題目1： 如何全局安裝一個 node 應用?
npm install -g package_name
or
npm install package_name -g
題目2： package.json 有什么作用？
//package.json
{
"name": "plearner-demo0",
"version": "1.0.0",
"description": "this is a desrtiption of my test",
"main": "text.js",
"scripts": {
"test": "echo peng"
},
"keywords": [
"test"
],
"author": "plearner",
"license": "ISC",
"dependencies": {
"marked": "^0.3.6"
},
"devDependencies": {
"easytpl": "^1.0.4"
}
}
上述代碼就是package.json的一個簡易文件
name: 該node_module的名字
version: 向npm發(fā)布時，該node_module的版本號
descriptiion: 對該模塊的描述
main: require該模塊時，該模塊從此文件開始執(zhí)行，也就是程序的入口文件
scripts: 這是一個對象，對象的鍵表示指令，值表示要執(zhí)行的代碼，當指令
為test何start時，可直接用npm test或npm test執(zhí)行，當指令為其他的非系
統(tǒng)預設值時，必須要用npm run command_name才可以執(zhí)行。
keywords: 在npm網(wǎng)站搜索時，通過搜索該關鍵字，可以找到該模塊
author: 該模塊的作者
dependencies : 該模塊運行時需要依賴的其他模塊，當其他人npm install該模塊時，也會把該模塊的依賴模塊一并安裝
devDependencies: 編寫該模塊時，采用的開發(fā)工具，非必須，當其他人npm install該模塊時，不會安裝此開發(fā)依賴工具
題目3： npm install --save app 與 npm install --save-dev app有什么區(qū)別?
npm install --save app會在package.json文件中的dependencies中，記錄此依賴模塊的名字及其版本號，當別人安裝我開發(fā)的模塊時，也會一并把我開發(fā)時所依賴的模塊進行下載和安裝.
npm install --save-dev app會在package.json文件中的devDependencies中，記錄此開發(fā)依賴工具，及其版本號，當別人安裝我開發(fā)的模塊時，并不會下載安裝此開發(fā)依賴工具。
題目4： nodule_modules的查找路徑是怎樣的?
當require('模塊id')不是node的核心模塊
路徑也不為(. , ./, ../ , /)開頭
就會遞歸的往上層目錄中的node_modules文件夾下尋找模塊
直到查完所有module.paths數(shù)組，還找不到，就報錯是核心模塊，就直接找核心模塊
路徑以(. , ./, ../ , /)開頭，就按路徑查找
題目5： npm3與 npm2相比有什么改進？yarn和 npm 相比有什么優(yōu)勢? (選做題目)
npm3在安裝模塊時就按字母序安裝在node_modules的第一級目錄
當后續(xù)包有重復依賴時就不需要重新安裝
yarn是優(yōu)化了的npm，速度更快
題目6： webpack是什么？和其他同類型工具比有什么優(yōu)勢？
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
優(yōu)勢:
對 CommonJS 、 AMD 、ES6的語法做了兼容
對js、css、圖片等資源文件都支持打包
串聯(lián)式模塊加載器以及插件機制，讓其具有更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持
有獨立的配置文件webpack.config.js
可以將代碼切割成不同的chunk，實現(xiàn)按需加載，降低了初始化時間
支持 SourceUrls 和 SourceMaps，易于調(diào)試
具有強大的Plugin接口，大多是內(nèi)部插件，使用起來比較靈活
webpack 使用異步 IO 并具有多級緩存。這使得 webpack 很快且在增量編譯上更加快
題目7：npm script是什么？如何使用？
npm script允許在package.json中使用scripts字段定義腳本命令。
{
//...
"scripts": {
"run": "echo 11111"
}
}
執(zhí)行npm run命令就等同于執(zhí)行echo 11111命令。
題目8： 使用 webpack 替換 入門-任務15中模塊化使用的 requriejs
題目9：gulp是什么？使用 gulp 實現(xiàn)圖片壓縮、CSS 壓縮合并、JS 壓縮合并
1. 安裝壓縮插件
安裝圖像壓縮插件
npm install gulp-imagemin --save-dev
安裝文件合并插件
npm install gulp-concat --save-dev
安裝css壓縮插件
npm install gulp-cssnano --save-dev
安裝js規(guī)范檢查插件
npm install jshint gulp-jshint --save-dev
安裝js壓縮插件
npm install uglify --save-dev
創(chuàng)建gulpfile.js文件
//gulpfile.js
2. 載入插件
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify'); // js壓縮
var imagemin = require('gulp-imagemin'); // image壓縮
var jshint = require('gulp-jshint'); // js代碼規(guī)范性檢查
3. 定義任務
定義css合并壓縮任務
gulp.task('build:css', function() {
gulp.src('./src/css/*.css')
.pipe(concat('index-merge.css'))
.pipe(cssnano())
.pipe(gulp.dest('dist/css/')); //
})
定義js合并壓縮任務
gulp.task('build:js', function() {
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'));
})
定義圖片壓縮任務
gulp.task('build:image', function() {
gulp.src('src/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/imgs'));
})
gulp.task('build', ['build:css', 'build:js', 'build:image']);
4. 執(zhí)行任務
在命令行中執(zhí)行命令:
gulp build
