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

每個模塊可以“全局安裝”查刻，也可以“本地安裝”。
“全局安裝”指的是將一個模塊安裝到系統(tǒng)目錄中岖赋，各個項目都可以調(diào)用。一般來說瓮孙，全局安裝只適用于工具模塊唐断，比如eslint和gulp。例如：/user/local/bin/目錄下杭抠。
“本地安裝”指的是將一個模塊下載到當(dāng)前項目的node_modules子目錄脸甘，然后只有在項目目錄之中，才能調(diào)用這個模塊偏灿。例如：./node-modules/

本地安裝
npm install <package name>
卸載：npm uninstall -g XXX

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

2.package.json 有什么作用丹诀？

npm init命令生成package.json文件，這個文件定義了項目所需的各種模板及相關(guān)配置信息（比如名稱翁垂、版本铆遭、許可證等元數(shù)據(jù)）。npm install命令根據(jù)這個配置文件沿猜，自動下載所需的模塊枚荣，也就是配置項目所需的運行和開發(fā)環(huán)境。

{
  "name": "cover_md",  //項目名稱
  "version": "1.0.6",  //項目版本號
  "description": "一個 markdown 轉(zhuǎn) html 的小工具",  //入口文件
  "main": "index.js",  //指定了加載的入口文件邢疙，require('moduleName')就會加載這個文件棍弄。這個字段的默認(rèn)值是模塊根目錄下面的index.js
  "bin": { 
// bin參數(shù)是{ 命令名：文件名 }的格式望薄，指定了各個內(nèi)部命令對應(yīng)的可執(zhí)行文件的位置，相當(dāng)于在user/local/bin下創(chuàng)建一個快捷方式,映射到對應(yīng)的文件呼畸，執(zhí)行所映射的文件
// 執(zhí)行`convert`命令時痕支，將運行對應(yīng)文件（./bin/server）
// ./bin/convert文件頭部需添加 #!/usr/bin/env node, 表示將以node運行這個文件

    "convert": "./bin/convert"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1" 
    "start" : "node app.js" //執(zhí)行當(dāng)前目錄下app.js
      //一般默認(rèn)一個test的空文件夾、用作寫測試代碼蛮原，`npm test`即可運行卧须。
      //自定義的命令名需加run才能與運行，`npm run make`
  },
  "keywords": [  //關(guān)鍵字儒陨，是一個字符串的數(shù)組花嘶，也有助于人們在npm搜索你的包
    "markdown",
    "html",
    "convert"
  ],
  "author": "wcon",  //作者名稱
  "license": "ISC", //協(xié)議
  "repository": {
    "type": "git",   //該包在github上的代碼托管倉庫地址
    "url": "git+https://github.com/wcongratulation/markdow.git"
  },
  "dependencies": {   // 正式使用時依賴的包, npm install --save xxx 生成
        "my_dep": "^1.0.0"
    },
  "devDependencies" : {  //開發(fā)或者測試時，依賴的包蹦漠。npm install --save-dev xxx生成
        "my_test_framework": "^3.1.0"
    }
  "bugs": {
    "url": "https://github.com/wcongratulation/markdow/issues" //一個對象椭员，包含url網(wǎng)址和郵箱，當(dāng)使用者發(fā)現(xiàn)問題時笛园，可以通過這兩種方式提交問題
  },
  "homepage": "https://github.com/wcongratulation/markdow#readme"  //主頁隘击，項目主頁的地址
}

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

如果將node_modules文件夾刪掉，則執(zhí)行npm install默認(rèn)會安裝dependencies字段和devDependencies字段中的所有模塊研铆。

這兩條命令都會下載app到node_modules文件夾下面埋同，不同之處在于：
npm install --save app：模塊名app將被添加到package.json下的dependencies。
npm install --save-dev app：模塊名app將被添加到package.json下的devDependencies棵红。

此外：dependencies下的模塊凶赁，是我們生產(chǎn)環(huán)境中需要的依賴，devDependencies只用于開發(fā)階段完成集成測試等功能模塊依賴逆甜。因此虱肄，執(zhí)行npm install server-mock時，只會下載它依賴層級dependencies下的模塊忆绰，而不會下載devDependencies的模塊浩峡，需要手動下載。

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

• 1.如果require的內(nèi)容以./或者../開頭的按照正常的查找路徑错敢。
• 2.require內(nèi)容不加./或者../查找的js文件翰灾。比如需要查找的依賴包叫“easytpl”,它會先在當(dāng)前目錄下查找node_module, 看有沒有easytpl文件夾（即easytpl包），如果有的話稚茅，會讀取easytpl文件夾下的package.json,找到里面的main參數(shù),加載main里對應(yīng)的路徑的文件纸淮。如果當(dāng)前目錄下沒有node_module，或當(dāng)前目錄下的node_module沒找到easytpl亚享，便向上級目錄中查詢咽块，直到系統(tǒng)根目錄。
• 3.node全局安裝在系統(tǒng)根目錄下欺税，所以全局安裝后可在所有目錄下使用侈沪。

如果當(dāng)前文件是'/home/ry/projects/foo.js' 然后require('bar.js'), 那么node將會按照以下路徑查找
/home/ry/projects/node_modules/bar.js
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js

nodejs路徑repuire的路徑規(guī)則https://my.oschina.net/lirongfei/blog/163069

5.npm3與 npm2相比有什么改進(jìn)揭璃？yarn和 npm 相比有什么優(yōu)勢?

npm2和npm3有一個很大的區(qū)別, 就是組織包的結(jié)構(gòu). npm2組織依賴的包是按照樹形組織的. npm3將其改進(jìn)為扁平結(jié)構(gòu)。
npm2會將所依賴的包存放到當(dāng)前目錄的./node_modules/目錄下. 而被安裝的包又會依賴其他的包的話, 則會存放到該包的./node_modules下. 所以, 當(dāng)依賴結(jié)構(gòu)很復(fù)雜的時候, 目錄結(jié)構(gòu)會非常深. 不管是性能還是操作上, 體驗都不怎么好亭罪。
而在npm3中, 采用扁平的目錄結(jié)構(gòu), 二級依賴會放到當(dāng)前目錄的node_modules的里, 與一級包在同一目錄瘦馍。

例如：
比如，有一個模塊A应役，依賴 B情组。npm3會將模塊B放置到與A同級目錄下，而npm2會將B放置到A的依賴模塊目錄下

Paste_Image.png

npm2箩祥，一個 App 里模塊 A 和 C 都依賴B院崇，無論被依賴的 B 是否是同一個版本，都會生成對應(yīng)結(jié)構(gòu)袍祖。

npm3底瓣，npm install 時會按照 package.json 里依賴的順序依次解析，遇到新的包就把它放在第一級目錄蕉陋，后面如果遇到一級目錄已經(jīng)存在的包濒持，會先判斷版本，如果版本一樣則忽略寺滚，否則會按照 npm2 的方式依次掛在依賴包目錄下

Paste_Image.png

npm3也存在開發(fā)環(huán)境和測試環(huán)境的 node_modules 目錄結(jié)構(gòu)不一樣以及其他的問題，因此FaceBook搞了 yarn 用來替代 npm

• 快速—會緩存已經(jīng)下載過的包屈雄，避免重復(fù)下載
• 安全 — 下載前會檢查簽名及包的完整性
  yarn 構(gòu)建步驟如下：
  Resolution: 向倉庫請求依賴關(guān)系
  Fetching: 看看本地緩存了沒有村视，否則把包拉到緩存里
  Linking: 直接全部從緩存里構(gòu)建好目錄樹放到 node_modules 里

參考 npm2 npm3 yarn 的故事
這里的緩存機(jī)制很像 mvn 之類的，而且其還引入了 lockfile 用于鎖定版本號酒奶，這很類似 shrinkwrap蚁孔，不過格式比 npm-shrinkwrap.json 更好 review。除了這些特別明顯的改進(jìn)惋嚎，還有很多體驗上的提升杠氢，具體可以看官方博客。

6.webpack是什么另伍？和其他同類型工具比有什么優(yōu)勢鼻百？

WebPack是一個模塊化加載器兼打包工具，它同時支持AMD摆尝、CMD等加載規(guī)范温艇。
它能夠打包WebHTML、js堕汞、CSS以及各種靜態(tài)文件（圖片勺爱、字體等）。
對于不同類型的資源讯检，webpack有對應(yīng)的模塊加載器琐鲁。
webpack模塊打包器會分析模塊間的依賴關(guān)系卫旱，最后 生成了優(yōu)化且合并后的靜態(tài)資源。
優(yōu)勢：

• 1.代碼分割：按需加載模塊
• 2.Loaders：通過加載器我們可以將其他類型的資源轉(zhuǎn)換為JS輸出
• 3.webpack提供了強(qiáng)大的插件系統(tǒng)围段，當(dāng)webpack內(nèi)置的功能不能滿足我們的構(gòu)建需求時顾翼，我們可以通過使用插件來提高工作效率。因為它可以加載幾乎所有的第三方庫

7.npm scripts 是什么蒜撮？如何使用暴构？

npm script 是 package.json 中的一個屬性
可以在這個屬性中自定義 npm 命令，輸入這個命令就會執(zhí)行指定的操作
如：

// 在 package.json 中
{
  ...
  'script': {
    'create': 'mkdir app'
  }
  ...
}

// 在命令行中輸入：
$ npm run create
// 就會運行指令 mkdir app, 表示創(chuàng)建一個文件app

8. gulp是什么段磨？使用 gulp 實現(xiàn)圖片壓縮取逾、CSS 壓縮合并、JS 壓縮合并

gulp：

• 它是一款nodejs應(yīng)用苹支。

• 它是打造前端工作流的利器砾隅，打包、壓縮债蜜、合并晴埂、git、遠(yuǎn)程操作...寻定，

• 簡單易用

• 無快不破

• 高質(zhì)量的插件

gulp 實現(xiàn)圖片壓縮

第一步儒洛、在命令行輸入

npm install --save-dev gulp-imagemin
前提是要安裝了 gulp
第二步、創(chuàng)建 gulpfile.js 文件編寫代碼

// 獲取 gulp
var gulp = require('gulp')
    // 獲取 gulp-imagemin 模塊
var imagemin = require('gulp-imagemin')

// 壓縮圖片任務(wù)
// 在命令行輸入 gulp images 啟動此任務(wù)
gulp.task('images', function() {
    // 1. 找到圖片
    gulp.src('images/*.*')
        // 2. 壓縮圖片
        .pipe(imagemin({
            progressive: true
        }))
        // 3. 另存圖片
        .pipe(gulp.dest('dist/images'))
});


// 在命令行使用 gulp auto 啟動此任務(wù)
gulp.task('auto', function() {
        gulp.watch('images/*.*', ['images'])
    })
    // 使用 gulp.task('default') 定義默認(rèn)任務(wù)
    // 在命令行使用 gulp 啟動 images 任務(wù)和 auto 任務(wù)
gulp.task('default', ['images', 'auto'])

CSS 壓縮合并
第一步狼速、在命令行輸入

npm install gulp-minify-css

第二步琅锻、創(chuàng)建 gulpfile.js 文件編寫代碼

// 獲取 gulp
var gulp = require('gulp')

// 獲取 minify-css 模塊（用于壓縮 CSS）
var minifyCSS = require('gulp-minify-css')

// 壓縮 css 文件
// 在命令行使用 gulp css 啟動此任務(wù)
gulp.task('css', function () {
    // 1. 找到文件
    gulp.src('css/*.css')
    // 2. 壓縮文件
        .pipe(minifyCSS())
    // 3. 另存為壓縮文件
        .pipe(gulp.dest('dist/css'))
})

// 在命令行使用 gulp auto 啟動此任務(wù)
gulp.task('auto', function () {
    // 監(jiān)聽文件修改，當(dāng)文件被修改則執(zhí)行 css 任務(wù)
    gulp.watch('css/*.css', ['css'])
});

// 使用 gulp.task('default') 定義默認(rèn)任務(wù)
// 在命令行使用 gulp 啟動 css 任務(wù)和 auto 任務(wù)
gulp.task('default', ['css', 'auto'])

JS 壓縮合并
第一步向胡、
npm install gulp-uglify
第二步

// 獲取 gulp
var gulp = require('gulp')

// 獲取 uglify 模塊（用于壓縮 JS）
var uglify = require('gulp-uglify')

// 壓縮 js 文件
// 在命令行使用 gulp script 啟動此任務(wù)
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 壓縮文件
        .pipe(uglify())
    // 3. 另存壓縮后的文件
        .pipe(gulp.dest('dist/js'))
})

// 在命令行使用 gulp auto 啟動此任務(wù)
gulp.task('auto', function () {
    // 監(jiān)聽文件修改恼蓬，當(dāng)文件被修改則執(zhí)行 script 任務(wù)
    gulp.watch('js/*.js', ['script'])
})


// 使用 gulp.task('default') 定義默認(rèn)任務(wù)
// 在命令行使用 gulp 啟動 script 任務(wù)和 auto 任務(wù)
gulp.task('default', ['script', 'auto'])
···