npm 是前端開發(fā)廣泛使用的包管理工具，之前使用 Weex 時(shí)看了阮一峰前輩的文章瞭解了一些，這次結(jié)合官方文章總結(jié)一下，加深下理解吧！

讀完本文你將瞭解：

什麼是 npm？

官方文檔中對(duì)它的介紹是：

npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you're sharing.

即： npm 是一個(gè)包管理器，它讓 javascript 開發(fā)者分享、復(fù)用代碼更方便（有點(diǎn) maven 的感覺哈）。

在程序開發(fā)中我們常常需要依賴別人提供的框架，寫 js 也不例外。這些可以重複的框架代碼被稱作包（package）或者模塊（module），一個(gè)包可以是一個(gè)文件夾裡放著幾個(gè)文件，同時(shí)有一個(gè)叫做 package.json 的文件。

一個(gè)網(wǎng)站裡通常有幾十甚至上百個(gè) package，分散在各處，通常會(huì)將這些包按照各自的功能進(jìn)行劃分（類似我們安卓開發(fā)中的劃分子模塊），但是如果重複造一些輪子，不如上傳到一個(gè)公共平臺(tái)，讓更多的人一起使用、參與這個(gè)特定功能的模塊。

而 npm 的作用就是讓我們發(fā)佈、下載一些 JS 輪子更加方便。

我們可以去官方網(wǎng)站 https://www.npmjs.com/ 瀏覽、搜索想要的輪子，也可以直接在命令行中 search 一下意中輪。

使用 npm 後我們可以非常方便地查看依賴的輪子是否有更新、是否需要下載新版本。

現(xiàn)在我們知道 npm 是干什麼的了。當(dāng)人們說(shuō)起 「npm」 時(shí)，可能在說(shuō)三個(gè)東西：

1. 一個(gè)網(wǎng)站，就是前面提到用於搜索 JS 模塊的網(wǎng)站：https://www.npmjs.com/
2. 一個(gè)倉(cāng)庫(kù)，保存著人們分享的 JS 模塊的大數(shù)據(jù)庫(kù)
3. 命令行裡的客戶端，開發(fā)者使用它來(lái)管理、安裝、發(fā)佈模塊

只要開發(fā)者發(fā)佈某個(gè)模塊到倉(cāng)庫(kù)中，其他人就可以從 npm 網(wǎng)站或者命令行中下載、使用它了！

安裝 npm

npm 是依附於 Node.js 的，我們可以去它的官網(wǎng) https://nodejs.org/en/download/ 下載安裝 node.js。

下載好 node.js, npm 也就有了，使用 npm -v 查看安裝的 npm 版本：

zhangshixin$ node -vv6.10.0
1
2
1
2

更新 npm

npm 更新地可比 node 勤快多了，因此你下載的 node 附帶的 npm 版本可能不是最新的，你可以使用如下命令下載最新 npm:

npm install npm@latest -g
1
1

其中 install 不用介紹了，就是安裝，後面的 npm@latest 就是 <packageName>@<version> 的格式，我們?cè)谙螺d其他模塊時(shí)也是這個(gè)格式。-g 代表全局安裝。

package.json 文件

package.json 文件非常重要，因此需要單獨(dú)一小節(jié)介紹。

管理本地安裝 npm 包的最好方式就是創(chuàng)建 package.json 文件。

一個(gè) package.json 文件可以有以下幾點(diǎn)作用：

1. 作為一個(gè)描述文件，描述了你的項(xiàng)目依賴哪些包
2. 允許我們使用 「語(yǔ)義化版本規(guī)則」（後面介紹）指明你項(xiàng)目依賴包的版本
3. 讓你的構(gòu)建更好地與其他開發(fā)者分享，便於重複使用

package.json 如何創(chuàng)建

使用 npm init 即可在當(dāng)前目錄創(chuàng)建一個(gè) package.json 文件：

如圖所示，輸入 npm init 後會(huì)彈出一堆問(wèn)題，我們可以輸入對(duì)應(yīng)內(nèi)容，也可以使用默認(rèn)值。在回答一堆問(wèn)題後輸入 yes 就會(huì)生成圖中所示內(nèi)容的 package.json 文件。

如果嫌回答這一大堆問(wèn)題麻煩，可以直接輸入 npm init --yes 跳過(guò)回答問(wèn)題步驟，直接生成默認(rèn)值的 package.json 文件：

package.json 的內(nèi)容

package.json 文件至少要有兩部分內(nèi)容：

1. 「name」
   
   • 全部小寫，沒有空格，可以使用下劃線或者橫線
2. 「version」
   
   • x.x.x 的格式
   • 符合「語(yǔ)義化版本規(guī)則」

比如：

{  "name": "shixinzhang-demo-package",  "version": "1.0.0"}
1
2
3
4
1
2
3
4

其他內(nèi)容：

• description：描述信息，有助於搜索
• main: 入口文件，一般都是 index.js
• scripts：支持的腳本，默認(rèn)是一個(gè)空的 test
• keywords：關(guān)鍵字，有助於在人們使用 npm search 搜索時(shí)發(fā)現(xiàn)你的項(xiàng)目
• author：作者信息
• license：默認(rèn)是 MIT
• bugs：當(dāng)前項(xiàng)目的一些錯(cuò)誤信息，如果有的話

我們可以為 init 命令設(shè)置一些默認(rèn)值，比如：

> npm set init.author.email "shixinzhang2016@gmail.com"> npm set init.author.name "shixinzhang"> npm set init.license "MIT"
1
2
3
1
2
3

注意：
如果 package.json 中沒有 description 信息，npm 使用項(xiàng)目中的 README.md 的第一行作為描述信息。這個(gè)描述信息有助於別人搜索你的項(xiàng)目，因此建議好好寫 description 信息。

指定依賴的包

我們需要在 package.json 文件中指定項(xiàng)目依賴的包，這樣別人在拿到這個(gè)項(xiàng)目時(shí)才可以使用 npm install 下載。

包有兩種依賴方式：

1. dependencies：在生產(chǎn)環(huán)境中需要用到的依賴
2. devDependencies：在開發(fā)、測(cè)試環(huán)境中用到的依賴

舉個(gè)例子：

{    "name": "my-weex-demo",    "version": "1.0.0",    "description": "a weex project",    "main": "index.js",    "scripts": {        "build": "weex-builder src dist",        "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",        "dev": "weex-builder src dist -w",        "serve": "serve -p 8080"    },    "keywords": [        "weex"    ],    "author": "fkysly@gmail.com",    "license": "MIT",    "devDependencies": {        "babel-core": "^6.14.0",        "babel-loader": "^6.2.5",        "babel-preset-es2015": "^6.18.0",        "vue-loader": "^10.0.2",        "eslint": "^3.5.0",        "serve": "^1.4.0",        "webpack": "^1.13.2",        "weex-loader": "^0.3.3",        "weex-builder": "^0.2.6"    },    "dependencies": {        "weex-html5": "^0.3.2",        "weex-components": "*"    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Semantic versioning（語(yǔ)義化版本規(guī)則）

https://docs.npmjs.com/getting-started/semantic-versioning

dependencies 的內(nèi)容，以 "weex-HTML5": "^0.3.2" 為例，我們知道 key 是依賴的包名稱，value 是這個(gè)包的版本。那版本前面的 ^ 或者版本直接是一個(gè) * 是什麼意思呢？

這就是 npm 的 「Semantic versioning」，簡(jiǎn)稱」Semver」，中文含義即「語(yǔ)義化版本規(guī)則」。

在安卓開發(fā)中我們有過(guò)這樣的經(jīng)驗(yàn)：有時(shí)候依賴的包升級(jí)後大改版，之前提供的接口不見了，這對(duì)使用者的項(xiàng)目可能造成極大的影響。

因此我們?cè)诼暶鲗?duì)某個(gè)包的依賴時(shí)需要指明是否允許 update 到新版本，什麼情況下允許更新。

這就需要先瞭解 npm 包提供者應(yīng)該注意的版本號(hào)規(guī)範(fàn)。

如果一個(gè)項(xiàng)目打算與別人分享，應(yīng)該從 1.0.0 版本開始。以後要升級(jí)版本應(yīng)該遵循以下標(biāo)準(zhǔn)：

• 補(bǔ)丁版本：解決了 Bug 或者一些較小的更改，增加最後一位數(shù)字，比如 1.0.1
• 小版本：增加了新特性，同時(shí)不會(huì)影響之前的版本，增加中間一位數(shù)字，比如 1.1.0
• 大版本：大改版，無(wú)法兼容之前的，增加第一位數(shù)字，比如 2.0.0

瞭解了提供者的版本規(guī)範(fàn)後， npm 包使用者就可以針對(duì)自己的需要填寫依賴包的版本規(guī)則。

作為使用者，我們可以在 package.json 文件中寫明我們可以接受這個(gè)包的更新程度（假設(shè)當(dāng)前依賴的是 1.0.4 版本）：

• 如果只打算接受補(bǔ)丁版本的更新（也就是最後一位的改變），就可以這麼寫：
  
  • 1.0
  • 1.0.x
  • ~1.0.4
• 如果接受小版本的更新（第二位的改變），就可以這麼寫：
  
  • 1
  • 1.x
  • ^1.0.4
• 如果可以接受大版本的更新（自然接受小版本和補(bǔ)丁版本的改變），就可以這麼寫：
  
  • *
  • x

小結(jié)一下：總共三種版本變化類型，接受依賴包哪種類型的更新，就把版本號(hào)準(zhǔn)確寫到前一位。

安裝 package

使用 npm 安裝 package 有兩種方式：本地（當(dāng)前項(xiàng)目路徑）安裝 或者 全局安裝。

你選擇哪種安裝方式取決於你將如何使用這個(gè)包：

• 如果你只是想在當(dāng)前項(xiàng)目裡用 require() 加載使用，那你可以安裝到本地
  
  • npm install 默認(rèn)就是安裝到本地的
• 如果你想要在命令行裡直接使用，比如 grunt CLI，就需要安裝到全局了

如果在你的項(xiàng)目裡有 package.json 文件，運(yùn)行 npm install 後它會(huì)查找文件中列出的依賴包，然後下載符合語(yǔ)義化版本規(guī)則的版本。

npm install 默認(rèn)會(huì)安裝 package.json 中 dependencies 和 devDependencies 裡的所有模塊。

如果想只安裝 dependencies 中的內(nèi)容，可以使用 --production 字段：

npm install --production
1
1

本地安裝 package

npm 使用下面的命令下載一個(gè)包：

npm install <package_name>
1
1

後面就是要安裝包的名稱。這個(gè)命令會(huì)在當(dāng)前目錄創(chuàng)建一個(gè) node_modules 目錄，然後下載我們指定的包到這個(gè)目錄中。

舉個(gè)例子：

zhangshixindeMacBook-Pro:publish-pkg zhangshixin$ npm install lodashzhangshixindeMacBook-Pro:publish-pkg zhangshixin$ lsindex.js        package-lock.jsonnode_modules        package.jsonzhangshixindeMacBook-Pro:publish-pkg zhangshixin$ ls node_modules/lodash
1
2
3
4
5
6
1
2
3
4
5
6

下載後的項(xiàng)目文件夾：

安裝指定版本：

npm install 默認(rèn)安裝最新版本，如果想要安裝指定版本，可以在庫(kù)名稱後加 @版本號(hào)：

$ npm install sax@latest$ npm install sax@0.1.1$ npm install sax@">=0.1.0 <0.2.0"
1
2
3
1
2
3

如果當(dāng)前項(xiàng)目有 package.json 文件，下載包時(shí)會(huì)下載這個(gè)文件中指定的版本；
如果當(dāng)前項(xiàng)目中沒有 package.json 文件，就會(huì)下載指定包的最新版本。

有時(shí)下載會(huì)報(bào)錯(cuò)：npm install error saveError ENOENT: no such file or directory, open '/Users/zhangshixin/package.json'

解決辦法：
- 在目錄下執(zhí)行 npm init 創(chuàng)建 package.json，輸入初始化信息
- 然後再執(zhí)行下載命令

安裝參數(shù) --save 和 --save -dev

添加依賴時(shí)我們可以手動(dòng)修改 package.json 文件，添加或者修改 dependencies devDependencies 中的內(nèi)容即可。

另一種更酷的方式是用命令行，在使用 npm install 時(shí)增加 --save 或者 --save -dev 後綴：

• npm install <package_name> --save 表示將這個(gè)包名及對(duì)應(yīng)的版本添加到 package.json的 dependencies
• npm install <package_name> --save-dev 表示將這個(gè)包名及對(duì)應(yīng)的版本添加到 package.json的 devDependencies

使用下載好的包

下載後 node_modules 文件夾中有要使用的包，我們就可以使用其中的代碼了。

比如在 Node.js 項(xiàng)目中，我們可以用 require(XXX) 引入它。

舉個(gè)例子：
創(chuàng)建一個(gè) index.js 文件，寫入如下代碼：

在使用 require('lodash') 後引入了 lodash 庫(kù)，然後調(diào)用了它的 without() 方法，這個(gè)方法可以去除第一個(gè)數(shù)組參數(shù)中與第二個(gè)參數(shù)重複的數(shù)據(jù)。

保存這個(gè)文件後，使用 node index.js 運(yùn)行這個(gè)文件，成功的話就可以得到運(yùn)行結(jié)果；如果之前安裝失敗，可能就會(huì)遇到這個(gè)錯(cuò)誤：

module.js:340    throw err;          ^Error: Cannot find module 'lodash'
1
2
3
4
1
2
3
4

這時(shí)你需要在這個(gè)目錄下重新運(yùn)行 npm install lodash 安裝。

更新本地 package

有時(shí)候我們想知道依賴的包是否有新版本，可以使用 npm outdated 查看，如果發(fā)現(xiàn)有的包有新版本，就可以使用 npm update <package-name> 更新它，或者直接 npm update 更新所有：

上圖中，我們?cè)谳斎?npm update 後發(fā)現(xiàn)本地的 lodash 模塊還不是最新的，這是為什麼呢？

原來(lái)，npm update 的工作過(guò)程是這樣的：

1. 先到遠(yuǎn)程倉(cāng)庫(kù)查詢最新版本
2. 然後對(duì)比本地版本，如果本地版本不存在，或者遠(yuǎn)程版本較新
3. 查看 package.json 中對(duì)應(yīng)的語(yǔ)義版本規(guī)則
4. 如果當(dāng)前新版本符合語(yǔ)義規(guī)則，就更新，否則不更新

一開始我本地的 package.json 的依賴是這樣的：

  "dependencies": {    "lodash": "^3.1.0"  }
1
2
3
1
2
3

根據(jù)前面的介紹我們可以知道，這表示只接受小版本或者補(bǔ)丁版本的更新，因此在執(zhí)行了一次 npm update 後它變成了這樣：

  "dependencies": {    "lodash": "^3.10.1"  }
1
2
3
1
2
3

第二位升到了最高，但是無(wú)法更新第一位，因此無(wú)法更新到最新的 4.17.4。

所以我需要把它修改成：

  "dependencies": {    "lodash": "*"  }
1
2
3
1
2
3

這表示任何版本的更新都接受，然後再執(zhí)行 npm update，就發(fā)現(xiàn)更新成功了：

小結(jié)一下：

執(zhí)行 npm outdated 後可以看到有三個(gè)版本號(hào)：

第一個(gè)是當(dāng)前 node_modules 中該模塊的版本，第二個(gè)是 package.json 文件中聲明的版本，第三個(gè)是遠(yuǎn)程倉(cāng)庫(kù)最新的版本。

只有當(dāng)前模塊版本低於遠(yuǎn)程，package.json 中的版本語(yǔ)義規(guī)則滿足情況，才能更新成功。

卸載本地 package

卸載一個(gè)本地 package 很簡(jiǎn)單，npm uninstall <package-name> 即可：

官方文檔說(shuō)輸入 npm uninstall --save lodash 才能在刪除項(xiàng)目的同時(shí)移除 package.json 中對(duì)它的依賴。但我沒加 --save 也達(dá)到了一樣的效果，一臉懵逼。

卸載後再 ls node_modules/ 查看目錄下，發(fā)現(xiàn)沒有東西，刪除成功。

全局安裝 package

如果你想要直接在命令行中使用某個(gè)包，比如 jshint ，你可以全局安裝它。

全局安裝比本地安裝多了個(gè) -g:

npm install -g <package-name>
1
1

以 jshint 為例，全局安裝命令是：

npm install -g jshint
1
1

安裝後可以使用 npm ls -g --depth=0 查看安裝在全局第一層的包。

全局安裝的權(quán)限問(wèn)題

在全局安裝時(shí)可能會(huì)遇到 EACCES 權(quán)限問(wèn)題，解決辦法辦法有如下 3 種：

1.sudo npm install -g jshint，使用 sudo 簡(jiǎn)單粗暴，但是治標(biāo)不治本

2.修改 npm 全局默認(rèn)目錄的權(quán)限

先獲取 npm 全局目錄：npm config get prefix，一般都是 /usr/local；
然後修改這個(gè)目錄權(quán)限為當(dāng)前用戶：

 sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
1
1

3.使用其他包管理器幫你解決這個(gè)問(wèn)題

實(shí)在懶得弄可以直接卸載 node，然後使用 Homebrew 重裝 node:

brew install node
1
1

Homebrew 會(huì)幫我們處理好權(quán)限的問(wèn)題。

更新全局的 package

想知道哪些包需要更新，可以使用 npm outdated -g --depth=0，然後使用 npm update -g <package>更新指定的包：

要更新所有全局包，可以使用 npm update -g，可以發(fā)現(xiàn)對(duì)比本地的，只是多了個(gè) -g。

不過(guò)官方說(shuō)在 2.6.1 以下的 npm ，直接使用 npm update -g 並不安全，因?yàn)樗鼤?huì)遞歸地更新所有全局依賴。

這種情況下可以使用 npm-check ，貼一張它的截圖：

Github 地址：https://github.com/dylang/npm-check

卸載全局 package

一句搞定：npm uninstall -g <package>

其他命令

npm run

部分摘自 阮一峰的 NPM 教程

npm 還可以直接運(yùn)行 package.json 中 scripts 指定的腳本：

{  "name": "demo",  "scripts": {    "lint": "jshint **.js",    "test": "mocha test/"  }}
1
2
3
4
5
6
7
1
2
3
4
5
6
7

npm run 是 npm run-script 的縮寫。

命令行輸入 npm run lint 或者 npm run-script lint 就會(huì)執(zhí)行 jshint **.js 。

npm run 會(huì)創(chuàng)建一個(gè)Shell，執(zhí)行指定的命令，並臨時(shí)將node_modules/.bin加入PATH 變量，這意味著本地模塊可以直接運(yùn)行。

package.json 中的 scripts 執(zhí)行的腳本是本地項(xiàng)目?jī)?nèi) node_modules -> .bin 內(nèi)的腳本。

    "scripts": {        "build": "weex-builder src dist",        "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",        "dev": "weex-builder src dist -w",        "serve": "serve -p 8080"    }
1
2
3
4
5
6
1
2
3
4
5
6

直接運(yùn)行 npm run 會(huì)列出當(dāng)前項(xiàng)目的 package.json 中 scripts 屬性下的所有腳本命令。

npm install from github

npm install 也可以直接從 github 下載:

$ npm install git://github.com/package/path.git$ npm install git://github.com/package/path.git#0.1.0
1
2
1
2

npm info

npm info <package-name> 可以查看指定包的信息：

npm adduser

npm adduser 用於在npmjs.com註冊(cè)一個(gè)用戶:

$ npm adduserUsername: YOUR_USER_NAMEPassword: YOUR_PASSWORDEmail: YOUR_EMAIL@domain.com
1
2
3
4
1
2
3
4

npm home/repo

npm home <package-name>命令可以打開指定模塊的主頁(yè)；
npm repo <package-name>命令則是打開指定模塊的代碼倉(cāng)庫(kù)。

npm prune

prune 即「修剪」的意思。

npm prune 可以檢查出當(dāng)前項(xiàng)目的 node_modules目錄中，沒有在 package.json裡提到的模塊。

npm publish

現(xiàn)在水平還不夠，等寫出可以復(fù)用的 JS 代碼後，我們就可以將它發(fā)佈到 npm 倉(cāng)庫(kù)上，類似 Github 的提交。

這部分主要摘自阮一峰的 NPM 教程

要想發(fā)佈，首先需要使用 npm adduser向 npmjs.com申請(qǐng)用戶名（當(dāng)然去官網(wǎng)也可以）。

接著使用 npm login 在命令行中登錄。

登錄以後，就可以使用 npm publish命令發(fā)佈。

$ npm publish
1
2
1
2

如果當(dāng)前模塊是一個(gè)beta版，比如1.3.1-beta.3，那麼發(fā)佈的時(shí)候需要使用tag參數(shù)，將其發(fā)佈到指定標(biāo)籤，默認(rèn)的發(fā)布標(biāo)籤是latest。

$ npm publish --tag beta
1
2
1
2

如果發(fā)佈私有模塊，模塊初始化的時(shí)候，需要加上scope參數(shù)。只有npm的付費(fèi)用戶才能發(fā)佈私有模塊。

$ npm init --scope=<yourscope>
1
2
1
2

如果你的模塊是用ES6寫的，那麼發(fā)佈的時(shí)候，最好轉(zhuǎn)成ES5。首先，需要安裝Babel。

$ npm install --save-dev babel-cli@6 babel-preset-es2015@6
1
2
1
2

然後，在package.json裡面寫入build腳本。

"scripts": {  "build": "babel source --presets babel-preset-es2015 --out-dir distribution",  "prepublish": "npm run build"}
1
2
3
4
5
1
2
3
4
5

運(yùn)行上面的腳本，會(huì)將source目錄裡面的ES6源碼文件，轉(zhuǎn)為distribution目錄裡面的ES5源碼文件。

國(guó)內(nèi)鏡像

不翻的話有時(shí)候 npm 比較卡，可以使用國(guó)內(nèi)的淘寶鏡像 cnpm： https://npm.taobao.org。

cnpm 支持 npm 除了 publish 之外的所有命令。

總結(jié)

經(jīng)過(guò)這麼一番總結(jié)，總算可以說(shuō) npm 入門了。

接觸前端後發(fā)現(xiàn)這個(gè)圈子太複雜了，各種工具各種框架，眼花繚亂啊。一步一步來(lái)吧！

Thanks

https://docs.npmjs.com/
http://javascript.ruanyifeng.com/nodejs/npm.html#