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

npm install -g packageName

2. package.json 有什么作用拔创？

執(zhí)行npm init -y生成package.json文件利诺，該文件對(duì)項(xiàng)目記錄了一些配置信息，主要是用來(lái)進(jìn)行包管理剩燥。包括name慢逾、version、description灭红、author侣滩、private、scripts变擒、dependencies君珠、decDependencies等。

• name：項(xiàng)目名稱(chēng)
• version：項(xiàng)目版本
• description：描述內(nèi)容
• main：主程序入口
• scripts：命令行工具娇斑，打造前端自動(dòng)化流程
• dependencies：指定了項(xiàng)目運(yùn)行所依賴(lài)的模塊
• devDependencies：項(xiàng)目開(kāi)發(fā)所需要的模塊
• keywords：可選字段策添，字符串?dāng)?shù)組。npm search的時(shí)候會(huì)用到毫缆。
• bin：可選字段唯竹。很多的包都會(huì)有執(zhí)行文件需要安裝到PATH中去。所有node_modules/.bin/目錄下的命令苦丁，都可以用npm run [命令]的格式運(yùn)行浸颓。在命令行下，鍵入npm run旺拉，然后按tab鍵产上，就會(huì)顯示所有可以使用的命令。

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

• npm install --save app在package.json中創(chuàng)建

"dependencies  ": {
    "app": "xxx",
}

發(fā)布之后蛾狗，項(xiàng)目運(yùn)行仍依賴(lài)這個(gè)模塊晋涣，會(huì)被用戶(hù)下載。

• npm install --save-dev app在package.json中創(chuàng)建

"devDependencies": {
    "app": "xxx",
}

開(kāi)發(fā)時(shí)依賴(lài)于這個(gè)模塊沉桌，項(xiàng)目正常運(yùn)行時(shí)不需要這個(gè)模塊谢鹊，不會(huì)被用戶(hù)所下載

4. node_modules的查找路徑是怎樣的?

require模塊時(shí)，先在當(dāng)前目錄查找node_modules下的模塊蒲牧，如果沒(méi)有，再往上一級(jí)目錄中查詢(xún)node_modules下的模塊赌莺，層層遞進(jìn)冰抢，直到系統(tǒng)根目錄。
比如某個(gè)模塊的絕對(duì)路徑是/home/user/foo.js艘狭，在該模塊中使用require('bar')方式加載模塊時(shí)挎扰，node將在下面的位置進(jìn)行搜索：
/home/user/node_modules/bar
/home/node_modules/bar
/node_modules/bar

5. npm3與 npm2相比有什么改進(jìn)翠订？

npm2 安裝依賴(lài)的時(shí)候比較簡(jiǎn)單直接，直接按照包依賴(lài)的樹(shù)形結(jié)構(gòu)下載填充本地目錄結(jié)構(gòu)遵倦。
因?yàn)?npm 設(shè)計(jì)的初衷就是考慮到了包依賴(lài)的版本錯(cuò)綜復(fù)雜的關(guān)系尽超，同一個(gè)包因?yàn)楸灰蕾?lài)的關(guān)系原因會(huì)出現(xiàn)多個(gè)版本，簡(jiǎn)單地填充結(jié)構(gòu)保證了無(wú)論是安裝還是刪除都會(huì)有統(tǒng)一的行為和結(jié)構(gòu)梧躺。
比如一個(gè) App 里模塊 A 和 C 都依賴(lài) B似谁，無(wú)論被依賴(lài)的 B 是否是同一個(gè)版本，都會(huì)生成對(duì)應(yīng)結(jié)構(gòu)：
npm2缺點(diǎn)：太深的目錄樹(shù)結(jié)構(gòu)會(huì)嚴(yán)重影響效率掠哥，甚至在 Windows 下可能會(huì)超出系統(tǒng)路徑限制的長(zhǎng)度巩踏。

對(duì)比圖

yarn和 npm 相比有什么優(yōu)勢(shì)?

1. Yarn 有一個(gè)鎖定文件 (lock file) 記錄了被確切安裝上的模塊的版本號(hào)。每次只要新增了一個(gè)模塊霜大，Yarn 就會(huì)創(chuàng)建（或更新）yarn.lock 這個(gè)文件构哺。這么做就保證了，每一次拉取同一個(gè)項(xiàng)目依賴(lài)時(shí)战坤，使用的都是一樣的模塊版本曙强，現(xiàn)在npm5.0在模塊安裝后，也會(huì)生成一個(gè)package-lock.json文件途茫，也有類(lèi)似的作用碟嘴。
2. Yarn在拉取包的時(shí)候，是采用了并行安裝囊卜，所以相較于npm的列隊(duì)安裝的速度會(huì)快很多娜扇。

6. webpack是什么？和其他同類(lèi)型工具比有什么優(yōu)勢(shì)栅组？

webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)雀瓢。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴(lài)關(guān)系圖(dependency graph)玉掸，其中包含應(yīng)用程序需要的每個(gè)模塊刃麸，然后將所有這些模塊打包成少量的 bundle - 通常只有一個(gè)，由瀏覽器加載司浪。

優(yōu)勢(shì)：

• webpack可以將代碼拆分成多個(gè)區(qū)塊泊业，每個(gè)區(qū)塊包含一個(gè)或多個(gè)模塊把沼，它們可以按需異步加載，極大地減少了頁(yè)面初次加載時(shí)間吁伺。
• webpack的核心是 一切皆模塊的思想
  任何模塊饮睬，CSS，圖片篮奄，字體捆愁，都被webpack當(dāng)做模塊來(lái)處理，我們只需要在需要這些模塊的時(shí)候來(lái)require宦搬，這樣牙瓢，開(kāi)發(fā)的時(shí)候，邏輯就很清晰间校。開(kāi)發(fā)人員就可以讓文件分割的徹底矾克，變成一個(gè)個(gè)的塊。只要配置好webpack,就可以實(shí)現(xiàn)按需要來(lái)加載這些塊憔足。
• Loader
  Webpack 本身只能處理原生的 JavaScript模塊胁附，但是 loader 轉(zhuǎn)換器可以將各種類(lèi)型的資源轉(zhuǎn)換成 javascript模塊。這樣滓彰，任何資源都可以成為 Webpack 可以處理的模塊控妻。
• 智能解析
  Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫(kù)揭绑，無(wú)論它們的模塊形式是 CommonJS弓候、 AMD 還是普通的 js文件。甚至在加載依賴(lài)的時(shí)候他匪，允許使用動(dòng)態(tài)表達(dá)式 require("./templates/" + name + ".jade")菇存。
• 插件系統(tǒng)
  Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的邦蜜，還可以開(kāi)發(fā)和使用開(kāi)源的 Webpack 插件依鸥，來(lái)滿(mǎn)足各式各樣的需求。
• 快速運(yùn)行
  Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率悼沈，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯贱迟。

7. npm script是什么？如何使用絮供？

npm script 是利用packge.json中 scripts 這個(gè)屬性衣吠，制定一個(gè)工作流。
比如 ''test'':''mkdir abc'',我們就可以直接使用npm test在當(dāng)前文件夾創(chuàng)建一個(gè) mkdir abc壤靶；
（但是除了 test和start,設(shè)置的其他命令均需要 用npm run xxx來(lái)啟用）缚俏，對(duì)此，我們可以在命令行的使用上就可以簡(jiǎn)化很多。不用來(lái)敲很多代碼袍榆，來(lái)執(zhí)行一個(gè)命令，而是敲少量的代碼塘揣，來(lái)執(zhí)行一系列的事情包雀。
npm script會(huì)將當(dāng)前目錄的node_modules/.bin子目錄加入PATH變量，執(zhí)行結(jié)束后亲铡，再將PATH變量恢復(fù)原樣才写。這意味著，當(dāng)前目錄的node_modules/.bin子目錄里面的所有腳本奖蔓，都可以直接用腳本名調(diào)用赞草，而不必加上路徑。比如吆鹤，當(dāng)前項(xiàng)目的依賴(lài)?yán)锩嬗?Mocha厨疙，只要直接寫(xiě)mocha test就可以了。

8. 使用 webpack 替換 入門(mén)-任務(wù)15中模塊化使用的 requriejs

代碼
效果

9. gulp是什么疑务？使用 gulp 實(shí)現(xiàn)圖片壓縮沾凄、CSS 壓縮合并、JS 壓縮合并知允。

gulp是前端開(kāi)發(fā)過(guò)程中對(duì)代碼進(jìn)行構(gòu)建的工具撒蟀，是自動(dòng)化項(xiàng)目的構(gòu)建利器；它不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化温鸽，而且在開(kāi)發(fā)過(guò)程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成保屯；使用它，我們不僅可以很愉快的編寫(xiě)代碼涤垫，而且大大提高我們的工作效率姑尺。
gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器， 她能自動(dòng)化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測(cè)試雹姊、檢查股缸、合并、壓縮吱雏、格式化敦姻、瀏覽器自動(dòng)刷新、部署文件生成歧杏，并監(jiān)聽(tīng)文件在改動(dòng)后重復(fù)指定的這些步驟镰惦。在實(shí)現(xiàn)上，她借鑒了Unix操作系統(tǒng)的管道（pipe）思想犬绒，前一級(jí)的輸出旺入，直接變成后一級(jí)的輸入，使得在操作上非常簡(jiǎn)單。

npm install gulp-imagemin --save-dev //圖片壓縮
npm install gulp-cssnano --save-dev  //css壓縮
npm install uglify --save-dev        //js壓縮
npm install gulp-jshint --save-dev   //js規(guī)范檢查
npm install gulp-concat --save-dev   //文件合并
npm install gulp-rename --save-dev   //重命名

//gulpfile.js
//引入插件
const gulp = require('gulp');
const cssnano = require('gulp-cssnano');
const concat = require('gulp-concat');
const jshint = require('gulp-jshint');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const rename = require('gulp-rename');

//css合并壓縮
gulp.task('build:css', function() {
  gulp.src('./src/css/*.css')
    .pipe(concat('merge.css'))
    .pipe(rename({
        suffix: '.min'
    }))
    .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(rename({
      suffix: '.min'
    }))
    .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']);

最后在命令行運(yùn)行 gulp build

10. 開(kāi)發(fā)一個(gè) node 命令行天氣應(yīng)用用于查詢(xún)用戶(hù)當(dāng)前所在城市的天氣茵瘾，發(fā)布到 npm 上去礼华。

npm install mamba-weather -g
weather 北京

源碼地址

1
1
1
1
1
1
1
1
1
1