題目1： 如何全局安裝一個(gè) node 應(yīng)用?

Node模塊采用npm install命令安裝撬讽。

每個(gè)模塊可以“全局安裝”，也可以“本地安裝”。“全局安裝”指的是將一個(gè)模塊安裝到系統(tǒng)目錄中茶宵，各個(gè)項(xiàng)目都可以調(diào)用。一般來說，全局安裝只適用于工具模塊乌庶，比如eslint和gulp∑豕ⅲ“本地安裝”指的是將一個(gè)模塊下載到當(dāng)前項(xiàng)目的node_modules子目錄瞒大，然后只有在項(xiàng)目目錄之中，才能調(diào)用這個(gè)模塊搪桂。

# 本地安裝
 npm install <package name>

# 全局安裝
 npm install -g <package name>

# npm更新最新版本
cnpm install npm@lastest -g

如果下載速度比較慢透敌，可以使用淘寶的鏡像

//先執(zhí)行下面命令
npm install -g cnpm --registry=https://registry.npm.taobao.org

//以后安裝就用 cnpm 代替 npm
cnpm install -g xxx
install 可以縮寫成 i

題目2： package.json 有什么作用？

命令行npm init 可以初始化生成一個(gè)package.json

package.json 是一個(gè) json格式的文件踢械，用來記錄當(dāng)前的npm 包的相關(guān)信息酗电，如

name：包的名字
version：版本號
description：描述
main：包的入口文件
script： 運(yùn)行腳本命令的npm命令行縮寫
author: 作者
license: 版權(quán)信息
dependencies：項(xiàng)目運(yùn)行依賴，發(fā)布的時(shí)候内列，不需要發(fā)布依賴的包撵术，只要發(fā)布其名字，別人下載的時(shí)候话瞧，會自動下載依賴的包嫩与。
devDependencies：開發(fā)依賴，只有自己本地開發(fā)時(shí)候用的依賴包交排，發(fā)布以后別人不能用划滋。

{
"name": "packageName", 
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "cg",
"license": "ISC",
"dependencies": {},
"devDependencies": {}
}

題目3： npm install --save app 與 npm install --save-dev app有什么區(qū)別?

命令行參數(shù)

當(dāng)你為你的模塊安裝一個(gè)依賴模塊時(shí)，正常情況下你得先安裝他們埃篓，在模塊根目錄下npm install module-name处坪，然后連同版本號手動將他們添加到模塊配置文件package.json中的依賴?yán)?code>(dependencies)。

-save和save-dev可以省掉你手動修改package.json文件的步驟架专。

npm install module-name -save

自動把模塊和版本號添加到dependencies部分同窘。

npm install module-name -save-dev

自動把模塊和版本號添加到devdependencies部分。

配置文件

package.json提供了三種依賴關(guān)系定義：

• dependencies
• peerDependencies
• devDependencies

devDependencies是開發(fā)時(shí)依賴胶征，比如你模塊用了mocha測試框架塞椎，那么你的模塊的開發(fā)就依賴mocha，如果別人想為你的模塊貢獻(xiàn)代碼睛低，他就需要安裝mocha案狠。但是只是使用你的模塊的人，就不需要mocha钱雷。

peerDependencies是為插件準(zhǔn)備的骂铁。比如grunt的插件，里面沒有require(“grunt”)罩抗，所以用dependencies會有問題拉庵。所以需要單獨(dú)列出。

題目4： node_modules的查找路徑是怎樣的?

• 先從當(dāng)前目錄下查找node_modules文件夾套蒂，如果沒有钞支，則到父級文件夾查找node_modules文件夾茫蛹，直至查找到根目錄。

題目5： npm3與 npm2相比有什么改進(jìn)烁挟？yarn和 npm 相比有什么優(yōu)勢? (選做題目)

模塊和包

很多時(shí)候我們并不是很區(qū)分模塊和包婴洼，因?yàn)槲覀円话闶褂脠鼍熬褪?npm install xxx赌渣，然后在文件里直接require('xxx')靶溜。
但是考慮到很多時(shí)候我們也可以隨意 require 一個(gè)本地自己寫的 JS 文件，只要其按照CommonJS 規(guī)范 export即可搏予，因此這里需要嚴(yán)格區(qū)分下：

• 模塊：符合 CommonJS 規(guī)范的文件
• 包：一個(gè)包含 package.json以及入口文件的文件夾

這里也不是絕對這樣定義的且警，不過最終表現(xiàn)出來的就是這些粉捻，而 npm 的所有的管理的對象都必須包含 package.json 文件，用于模塊確定依賴關(guān)系斑芜。
說了這么多肩刃，只是為了強(qiáng)調(diào)：npm是包管理器。

npm2 問題

npm2 安裝依賴的時(shí)候比較簡單直接押搪，直接按照包依賴的樹形結(jié)構(gòu)下載填充本地目錄結(jié)構(gòu)树酪。
因?yàn)?npm 設(shè)計(jì)的初衷就是考慮到了包依賴的版本錯(cuò)綜復(fù)雜的關(guān)系，同一個(gè)包因?yàn)楸灰蕾嚨年P(guān)系原因會出現(xiàn)多個(gè)版本大州，簡單地填充結(jié)構(gòu)保證了無論是安裝還是刪除都會有統(tǒng)一的行為和結(jié)構(gòu)续语。
比如一個(gè) App 里模塊 A 和 C 都依賴 B，無論被依賴的 B 是否是同一個(gè)版本厦画，都會生成對應(yīng)結(jié)構(gòu)：

于是缺陷就凸顯出來了疮茄，太深的目錄樹結(jié)構(gòu)會嚴(yán)重影響效率，甚至在 Windows 下可能會超出系統(tǒng)路徑限制的長度根暑。另外力试，在 Windows 有刪 node_modules 目錄經(jīng)歷的可能都經(jīng)歷過漫長的等待。

npm3 解決方式

針對 npm2的問題排嫌，npm3加了點(diǎn)算法畸裳，直白的解釋就是：npm install
時(shí)會按照 package.json 里依賴的順序依次解析，遇到新的包就把它放在第一級目錄淳地，后面如果遇到一級目錄已經(jīng)存在的包怖糊，會先判斷版本，如果版本一樣則忽略颇象，否則會按照npm2 的方式依次掛在依賴包目錄下
還是剛剛的栗子伍伤，可以看下npm2和 npm3生成的結(jié)構(gòu)對比：

npm3 新的問題

你以為就這么完了嗎？注意到上面提到的npm3會按照package.json 的順序解析目錄樹见秤，試著看下下面的場景：

"dependencies": { "mod-a": "^1.0.0", "mod-c": "^1.0.0", "mod-d": "^1.0.0", "mod-e": "^1.0.0"}

如果恰好 A_v1.0 依賴 B_v1.0砂竖，然后我們本地升級了 A 到 v2.0，假設(shè)此時(shí)依賴 B_v2.0鹃答，那么此時(shí)目錄結(jié)構(gòu)會變成：

新的工具 yarn

除了上面的問題，還有個(gè)嚴(yán)重的問題紊服。npm 在使用的時(shí)候大多是用語義化版本號管理包依賴的檀轨，比如 ~1.0.0
表示只更新補(bǔ)丁，但是世界辣么大围苫，什么人沒有裤园？說不定哪個(gè)開發(fā)者就在 patch version 上就搞了major的升級，即使你本地使用固定版本號也無濟(jì)于事剂府。
當(dāng)然拧揽，后面 npm 也有 shrinkwrap 機(jī)制來保證這種一致性，不過說實(shí)話 npm-shrinkwrap.json 略難看，基本屬于給 npm 打補(bǔ)丁淤袜，讓我在一個(gè)項(xiàng)目引入這個(gè)幾乎無法 review 的文件肯定會不開心的痒谴。
太多因素導(dǎo)致了 npm 已經(jīng)步履維艱了，估計(jì) Facebook 也累了吧铡羡，于是前不久搞了yarn用來替代npm 了积蔚。
我覺得yarn革命性的更改在于其改變了構(gòu)建的步驟，其它有點(diǎn)都是新構(gòu)建方式的副產(chǎn)物烦周，yarn構(gòu)建步驟如下：

• Resolution: 向倉庫請求依賴關(guān)系
• Fetching: 看看本地緩存了沒有尽爆，否則把包拉到緩存里
• Linking: 直接全部從緩存里構(gòu)建好目錄樹放到 node_modules 里

這里的緩存機(jī)制很像 mvn 之類的，而且其還引入了lockfile 用于鎖定版本號读慎，這很類似shrinkwrap漱贱，不過格式比npm-shrinkwrap.json 更好 review。除了這些特別明顯的改進(jìn)夭委，還有很多體驗(yàn)上的提升幅狮，具體可以看官方博客。

題目6： webpack是什么株灸？和其他同類型工具比有什么優(yōu)勢崇摄？

WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)慌烧，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss逐抑，TypeScript等），并將其打包為合適的格式以供瀏覽器使用杏死。

WebPack和Grunt以及Gulp相比有什么特性

其實(shí) Webpack 和另外兩個(gè)并沒有太多的可比性泵肄，Gulp/Grunt 是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack 是一種模塊化的解決方案淑翼，不過Webpack 的優(yōu)點(diǎn)使得 Webpack 可以替代 Gulp/Grunt 類的工具腐巢。
Grunt 和 Gulp 的工作方式是：在一個(gè)配置文件中，指明對某些文件進(jìn)行類似編譯玄括，組合冯丙，壓縮等任務(wù)的具體步驟，這個(gè)工具之后可以自動替你完成這些任務(wù)遭京。

Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體胃惜，通過一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件哪雕，使用loaders處理它們船殉，最后打包為一個(gè)瀏覽器可識別的JavaScript文件。

如果實(shí)在要把二者進(jìn)行比較斯嚎，Webpack的處理速度更快更直接利虫，能打包更多不同類型的文件挨厚。

題目7：npm script是什么？如何使用糠惫？

npm允許在package.json文件里面疫剃，使用scripts字段定義腳本命令。

{
  // ...
  "scripts": {
    "build": "node build.js"
  }
}

上面代碼是package.json文件的一個(gè)片段硼讽，里面的scripts字段是一個(gè)對象巢价。它的每一個(gè)屬性，對應(yīng)一段腳本固阁。比如壤躲，build命令對應(yīng)的腳本是node build.js。
命令行下使用npm run命令备燃，就可以執(zhí)行這段腳本柒爵。

$ npm run build

等同于執(zhí)行

$ node build.js

這些定義在package.json里面的腳本，就稱為 npm 腳本赚爵。它的優(yōu)點(diǎn)很多。

• 項(xiàng)目的相關(guān)腳本法瑟，可以集中在一個(gè)地方冀膝。
• 不同項(xiàng)目的腳本命令，只要功能相同霎挟，就可以有同樣的對外接口窝剖。用戶不需要知道怎么測試你的項(xiàng)目，只要運(yùn)行npm run test即可酥夭。
• 可以利用 npm 提供的很多輔助功能赐纱。

查看當(dāng)前項(xiàng)目的所有 npm 腳本命令，可以使用不帶任何參數(shù)的npm run命令熬北。

$ npm run

題目8： 使用 webpack 替換 入門-任務(wù)15中模塊化使用的 requriejs

github代碼

題目9：gulp是什么疙描？使用 gulp 實(shí)現(xiàn)圖片壓縮、CSS 壓縮合并讶隐、JS 壓縮合并

簡介：

gulp 是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具起胰，是自動化項(xiàng)目的構(gòu)建利器；她不僅能對網(wǎng)站資源進(jìn)行優(yōu)化巫延，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成效五；使用她，我們不僅可以很愉快的編寫代碼炉峰，而且大大提高我們的工作效率畏妖。

gulp中文網(wǎng)

入門指南

1. 全局安裝 gulp：

$ npm install --global gulp

2. 作為項(xiàng)目的開發(fā)依賴（devDependencies）安裝：

$ npm install --save-dev gulp

3. 在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件：

var gulp = require('gulp');
gulp.task('default', function() {
  // 將你的默認(rèn)的任務(wù)代碼放在這
});

4. 運(yùn)行 gulp：

$ gulp

默認(rèn)的名為 default 的任務(wù)（task）將會被運(yùn)行，在這里疼阔，這個(gè)任務(wù)并未做任何事情戒劫。

想要單獨(dú)執(zhí)行特定的任務(wù)（task）半夷，請輸入 gulp <task> <othertask>。

gulp的常用插件

var gulp=require('gulp');
var del=require('del');                         // 刪除文件
var minify=require('gulp-minify-css');           //壓縮CSS
var uglify=require('gulp-uglify');                // 壓縮JS
var concat=require('gulp-concat');               // 合并文件
var imagemin=require('gulp-imagemin');       // 縮小圖片


gulp.task('css', function() {
    gulp.src('css/*.css')
        .pipe(concat('merge.css'))
        .pipe(minify())
        .pipe(gulp.dest('dist2/css'));
})

gulp.task('js', function() {
    gulp.src('js/**/*.js')
        .pipe(concat('merge.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist2/js'));
})

gulp.task('pic', function() {
    gulp.src('images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist2/images'));
})

gulp.task('clean', function() {
    del([
       'dist2'
    ])
 })

gulp.task('default',['css','js','pic'])