摘要：博客地址這篇文章是我在眾成翻譯翻譯的一篇文章，一篇的入門(mén)指南，原文鏈接的出現(xiàn)使得用寫(xiě)服務(wù)端應(yīng)用成為可能。你可以看到，這個(gè)過(guò)程也安裝了其他的模塊，它們都是的所依賴的模塊。但是，得到的輸出信息會(huì)很冗長(zhǎng)，我們可以加上來(lái)精簡(jiǎn)一下輸出。

github 博客地址： https://github.com/zengxiaota...

這篇文章是我在 眾成翻譯 翻譯的一篇文章，一篇 npm 的入門(mén)指南，原文鏈接

Node.js 的出現(xiàn)使得用 Javascript 寫(xiě)服務(wù)端應(yīng)用成為可能。Node.js 由 C++ 編寫(xiě)而成并且構(gòu)建于 V8 引擎之上，因此運(yùn)行得很快。一開(kāi)始，Node.js 只是想運(yùn)行于服務(wù)端環(huán)境，但是開(kāi)發(fā)者們顯然不滿足于此，開(kāi)始創(chuàng)造各種工具來(lái)實(shí)現(xiàn)自動(dòng)化任務(wù)。也因?yàn)榇?，基?Node 的前端自動(dòng)化工具（如Grunt, Gulp 和 Webpack)的出現(xiàn)也給前端開(kāi)發(fā)帶來(lái)了翻天覆地的變化。

本文最后更新時(shí)間為 08.06.2017, 介紹了包括了 npm 當(dāng)前現(xiàn)狀，以及 npm5 的一些改變。

想要利用這些工具或者模塊包，我們需要使用合理的方式來(lái)安裝和管理這些模塊，這也是 npm 這個(gè)包管理工具出現(xiàn)的初衷。我們通過(guò) npm 來(lái)安裝模塊并且使用其提供的接口來(lái)使用這些模塊。

在本文中，我將要介紹 npm 的基本用法，告訴你們?cè)趺窗惭b安裝本地和全局模塊包，怎么刪除，升級(jí)和安裝一個(gè)特定版本的模塊。同時(shí)我還會(huì)介紹怎么利用 package.json 文件來(lái)管理你的依賴。如果你喜歡觀看視頻，也可以注冊(cè)成為 SitePoint Premium 的會(huì)員，觀看我們的免費(fèi)視頻： What is npm and How Can I Use It?。

在我們開(kāi)始使用 npm 之前，我們必須先在本地系統(tǒng)中安裝 Node.js。讓我們開(kāi)始吧。

Redux vs MobX: Which Is Best for Your Project?

10 jQuery HTML5 Audio Players

首先前往 Node.js 的下載頁(yè)面獲取你需要的版本。下載頁(yè)面提供了 Windows 和 Mac 的安裝包以及預(yù)編譯的 Linux 二進(jìn)制源代碼，對(duì)于 Linux 用戶，你還可以通過(guò)包管理工具來(lái)安裝。

寫(xiě)這篇教程時(shí)，Node.js 的 LTS 版本為 v6.10.3,因此本文也會(huì)以此版本來(lái)講解。

提示：你可能想通過(guò)版本管理工具來(lái)安裝 Node.js，我們將會(huì)在后面的章節(jié)介紹。

安裝之后讓我們來(lái)看看 node 的安裝位置以及安裝的版本。

$ which node
/usr/bin/node
$ node --version
v6.10.3

為了驗(yàn)證我們已經(jīng)正確安裝，進(jìn)入 Node 的 REPL 試一下。

$ node
> console.log("Node is running");
Node is running
> .help
.break Sometimes you get stuck, this gets you out
.clear Alias for .break
.exit  Exit the repl
.help  Show repl options
.load  Load JS from a file into the REPL session
.save  Save all evaluated commands in this REPL session to a file
> .exit

至此 Node.js 已經(jīng)安裝完成，讓我們來(lái)看看 npm, 它已經(jīng)隨著 Node.js 一起安裝在了你的系統(tǒng)中。

$ which npm
/usr/bin/npm
$ npm --version
3.10.10

npm 可以以全局或者本地模式安裝模塊。本地模式下，所有的模塊包安裝在你當(dāng)前工作目錄下的 node_modules 文件夾中，能被當(dāng)前用戶訪問(wèn)到。全局模式則是將模塊安裝在 {prefix}/lib/node_modules/ 中，為 root 用戶所有({prefix} 通常是 /usr/ 或者 /usr/local])。這意味著當(dāng)你想全局安裝模塊的時(shí)候，出于安全性的考慮和避免解析第三方的依賴模塊時(shí)可以引發(fā)的權(quán)限錯(cuò)誤，你需要使用 sudo 命令。

Time to manage those packages

輸入 npm config 命令，看看會(huì)輸出什么。

$ npm config list
; cli configs
user-agent = "npm/3.10.10 node/v6.10.3 linux x64"

; userconfig /home/sitepoint/.npmrc
prefix = "/home/sitepoint/.node_modules_global"

; node bin location = /usr/bin/nodejs
; cwd = /home/sitepoint
; HOME = /home/sitepoint
; "npm config ls -l" to show all defaults.

npm config 命令提供了我們的安裝的信息?，F(xiàn)在，讓我們獲取它們的安裝位置。

$ npm config get prefix
/usr

This is the prefix we want to change, so as to install global packages in our home directory. To do that create a new directory in your home folder.

$ cd ~ && mkdir .node_modules_global
$ npm config set prefix=$HOME/.node_modules_global

為了在我們的 home 目錄安裝全局模塊，我們要更改的 prefix 就是這個(gè)，我們首先在 home 目錄中創(chuàng)建一個(gè)新文件夾。

$ npm config get prefix
/home/sitepoint/.node_modules_global
$ cat .npmrc
prefix=/home/sitepoint/.node_modules_global

我們?nèi)匀辉?root 用戶目錄下安裝了 npm, 但是由于我們?cè)摳淖兞巳帜K的安裝位置，我們需要再一次安裝 npm,這一次我們會(huì)安裝最新版本的 npm5到新用戶目錄。

$ npm install npm --global
└─┬ npm@5.0.2
  ├── abbrev@1.1.0
  ├── ansi-regex@2.1.1
....
├── wrappy@1.0.2
└── write-file-atomic@2.1.0

最后我們需要添加 .node_modules_global/bin 至 $PATH 環(huán)境變量。這樣我們就可以在命令行運(yùn)行這些全局模塊。在 .profile，.bash_profile 或者 .bashrc 文件中添加下面這一行，并重啟你的終端。

`export PATH="$HOME/.node_modules_global/bin:$PATH"`

現(xiàn)在，命令行會(huì)首先發(fā)現(xiàn) .node_modules_global/bin 目錄，并且會(huì)使用正確的 npm 版本。

$ which npm
/home/sitepoint/.node_modules_global/bin/npm
$ npm --version
5.0.2

到目前為止我們只安裝了 npm 這一個(gè)全局模塊?，F(xiàn)在再安裝 UglifyJS (一個(gè) JavaScript 壓縮工具)。使用 --flag 標(biāo)記，當(dāng)然也可以簡(jiǎn)寫(xiě)成 -g。

$ npm install uglify-js --global
/home/sitepoint/.node_modules_global/bin/uglifyjs -> /home/sitepoint/.node_modules_global/lib/node_modules/uglify-js/bin/uglifyjs
+ uglify-js@3.0.15
added 4 packages in 5.836s

你可以看到，這個(gè)過(guò)程也安裝了其他的模塊，它們都是 Uglify 的所依賴的模塊。

通過(guò) npm list 可以列出所有已經(jīng)安裝的全局模塊。

$ npm list --global
home/sitepoint/.node_modules_global/lib
├─┬ npm@5.0.2
│ ├── abbrev@1.1.0
│ ├── ansi-regex@2.1.1
│ ├── ansicolors@0.3.2
│ ├── ansistyles@0.1.3
....................
└─┬ uglify-js@3.0.15
  ├─┬ commander@2.9.0
  │ └── graceful-readlink@1.0.1
  └── source-map@0.5.6

但是，得到的輸出信息會(huì)很冗長(zhǎng)，我們可以加上 --depth=0 來(lái)精簡(jiǎn)一下輸出。

$ npm list -g --depth=0
/home/sitepoint/.node_modules_global/lib
├── npm@5.0.2
└── uglify-js@3.0.15

輸出信息現(xiàn)在更清楚了。我們只列出了我們安裝的模塊和版本號(hào)。

所有全局安裝的模塊都可以通過(guò)命令行訪問(wèn)到。舉個(gè)例子，現(xiàn)在你想要使用 Uglify 模塊來(lái)壓縮 example.js 文件，輸出文件為 example.min.js：

`$ uglifyjs example.js -o example.min.js`

當(dāng)你想在本地安裝一個(gè)模塊，你首先需要一個(gè) package.json 文件，所以讓我們先創(chuàng)建一個(gè)。

$ npm init
package name: (project)
version: (1.0.0)
description: Demo of package.json
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

按下 Enter 它將會(huì)使用默認(rèn)值，最后輸入 yes 來(lái)確認(rèn)。這將會(huì)在你工程下的根目錄下創(chuàng)建一個(gè) package.json 文件。

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

小技巧：使用 npm init --y 能更快的創(chuàng)建 package.json文件。

package.json 的除了 main 和 scripts,每一項(xiàng)的意思的都很明確，具有 “自解釋性”。main 這一項(xiàng)表示你的程序的入口文件，scripts 表示你項(xiàng)目生命周期里定義的可運(yùn)行的腳本命令。到此，package.json 文件的這些項(xiàng)已經(jīng)足夠，如果你想了解更多關(guān)于每一項(xiàng)的含義，你可以看看 npm 的文檔 和這篇文章 using npm as a build tool.

現(xiàn)在，我們來(lái)安裝 Underscore。

$ npm install underscore
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN project@1.0.0 No description
npm WARN project@1.0.0 No repository field.

+ underscore@1.8.3
added 1 package in 0.344s

注意到，安裝過(guò)程中創(chuàng)建了一個(gè) lockfile 文件，我們之后會(huì)介紹它。

現(xiàn)在，再看一看 package.json 文件，我們看到它多了 dependencies 這一項(xiàng)。

{
  ...
  "dependencies": {
    "underscore": "^1.8.3"
  }
}

正如你所見(jiàn)，你的工程項(xiàng)目已經(jīng)安裝了 1.8.3 版本的 Undescore。版本號(hào)前面的 ^ 符號(hào)表示當(dāng)你安裝此模塊的時(shí)候，npm 會(huì)拉取它能發(fā)現(xiàn)的關(guān)于此模塊的最新版本，但是必須匹配主版本號(hào)（如果本地沒(méi)有 package-lock.json 文件）。在本例中，npm 會(huì)尋找低于 2.0.0 版本的最新版的 Underscore。這種模塊版本安裝方法叫做 語(yǔ)義化版本。你可以閱讀這篇文章 Semantic Versioning: Why You Should Be Using it 來(lái)了解更多。

同樣要注意到，Underscore 被保存到了 dependencies 這一項(xiàng)了。在最新版本的 npm 也就是 npm5 中，這已經(jīng)成為了默認(rèn)選項(xiàng)，表示程序運(yùn)行時(shí)的必需模塊。你也可以指定 --save-dev 選項(xiàng)來(lái)把模塊信息添加到 devDependencies 這一項(xiàng)，表示開(kāi)發(fā)時(shí)所需的模塊，比如說(shuō)測(cè)試或者代碼轉(zhuǎn)換。

你也在 package.json 文件中添加 private: true 這一項(xiàng)，防止你的私人倉(cāng)庫(kù)被誤發(fā)布，同時(shí)運(yùn)行 npm install 命令時(shí)，避免產(chǎn)生任何警告信息。

到目前為止，最應(yīng)該使用 package.json 的理由是 package.json 指定了所有的依賴項(xiàng)，所以當(dāng)我們想克隆別人的代碼，我們只需要復(fù)制 package.json 文件到項(xiàng)目的根目錄并運(yùn)行 npm i，npm 將會(huì)自動(dòng)分析文件并且安裝所有我們所需的模塊。我們?cè)诤竺孢€會(huì)詳細(xì)講解。

在結(jié)束這一部分之前，我們來(lái)檢查一下 underscore 是否正常工作。我們?cè)诟夸泟?chuàng)建一個(gè) test.js 文件，并且將如下代碼添加到代碼中。

const _ = require("underscore");
console.log(_.range(5));

在控制臺(tái)輸入 node test.js 來(lái)運(yùn)行這個(gè)文件，屏幕上會(huì)輸出 [0, 1, 2, 3, 4]。

npm 是一個(gè)包管理工具，所以必須具有移除模塊的功能。假設(shè)我們現(xiàn)在安裝的 underscore 版本會(huì)引起一個(gè)兼容性問(wèn)題，我們可以先移除它，并安裝之前穩(wěn)定的版本。

$ npm uninstall underscore
removed 2 packages in 0.107s
$ npm list
project@1.0.0 /home/sitepoint/project
└── (empty)

我們現(xiàn)在可以安裝任意想要的版本的 underscore, 只需要在 @ 符號(hào)后面加上所需版本號(hào)即可。

$ npm install underscore@1.8.2
+ underscore@1.8.2
added 1 package in 1.574s

$ npm list
project@1.0.0 /home/sitepoint/project
└── underscore@1.8.2

讓我們檢查一下 underscore 是否有更新

$ npm outdated
Package     Current  Wanted  Latest  Location
underscore    1.8.2   1.8.3   1.8.3  project

Current 這一列告訴我們我們本地安裝的 underscore 版本，Latest 這一列則告訴我們當(dāng)前的 underscore 的最新版本，Wanted 這一列則表示在不破壞當(dāng)前代碼的前提下，我們可以升級(jí)的最新版本。

記得我們之前所說(shuō)的 package-lock.json 文件嗎？ npm5 開(kāi)始引入這個(gè)文件，目的是記住安裝的依賴包的版本號(hào)，從而使每臺(tái)機(jī)器上安裝的依賴包的版本都相同。每當(dāng)你修改了 node_modules 文件夾或者 package.json 文件，package-lock.json 文件將會(huì)自動(dòng)生成。

你可以嘗試一個(gè)這個(gè)特性。刪除 node_modules 文件夾，重新運(yùn)行 npm i 。新版本的 npm5 將會(huì)安裝 v1.8.2 版本的 Underscore。(因?yàn)樵?package-lock.json 指定了 Underscore 的版本為 1.8.2)。而舊版本的 npm 會(huì)安裝 1.8.3 版本的 Underscore。之前的經(jīng)驗(yàn)證明，版本不一致的依賴模塊將會(huì)給開(kāi)發(fā)者帶來(lái)很大的麻煩，在之前，你需要手動(dòng)創(chuàng)建一個(gè) npm-shrinkwrap.json 文件來(lái)避免這個(gè)問(wèn)題。

現(xiàn)在，假設(shè) Underscore 的最新版本已經(jīng)修復(fù)了我們之前遇到的 bug, 我們現(xiàn)在要更新 Underscore 至最新版本。

$ npm update underscore
+ underscore@1.8.3
updated 1 package in 0.236s

$ npm list
project@1.0.0 /home/sitepoint/project
└── underscore@1.8.3

提示: 為了上述操作能生效，Underscore 必須位于 package.json 的 dependency 中。另外，如果你也很多過(guò)時(shí)的模塊，可以執(zhí)行 npm update 命令一起更新所有模塊。

你可以看到，這篇教程你我們已經(jīng)多次使用了 mkdir 命令，那么是否有一個(gè)模塊可以實(shí)現(xiàn)和 mkdir 一樣的功能，我們有 npm search 試試看。

$ npm search mkdir
NAME      | DESCRIPTION          | AUTHOR          | DATE       | VERSION
mkdir     | Directory crea…      | =joehewitt      | 2012-04-17 | 0.0.2
fs-extra  | fs-extra conta…      | =jprichardson…  | 2017-05-04 | 3.0.1
mkdirp    | Recursively mkdir,…  | =substack       | 2015-05-14 | 0.5.1
...

我們找到了(mkdirp)。安裝它。

$ npm install mkdirp
+ mkdirp@0.5.1
added 2 packages in 3.357s

現(xiàn)在我們創(chuàng)建一個(gè) mkdir.js 文件，并且將以下代碼復(fù)制進(jìn)去。

const mkdirp = require("mkdirp");
mkdirp("foo", function (err) {
  if (err) console.error(err)
  else console.log("Directory created!")
});

在命令行中運(yùn)行這個(gè)文件

$ node mkdir.js
Directory created!

首先我們安裝多個(gè)模塊。

$ npm install request
+ request@2.81.0
added 54 packages in 15.92s

檢查一下 package.json 文件

"dependencies": {
  "mkdirp": "^0.5.1",
  "request": "^2.81.0",
  "underscore": "^1.8.2"
},

注意到，dependencies 列表也自動(dòng)更新了。在之前的 npm 版本，只有執(zhí)行 npm install request --save 命令才會(huì)將 dependency 保存到 package.json 文件中。如果你不想在 package.json 中保存，只需要使用 --no-save 參數(shù)。

假設(shè)你把你的工程文件拷貝到了另外一臺(tái)機(jī)器上，并且我們想安裝這些依賴。讓我們先刪除 node_modules 文件夾，然后執(zhí)行 npm install 命令。

$ rm -R node-modules
$ npm list
project@1.0.0 /home/sitepoint/project
├── UNMET DEPENDENCY mkdirp@^0.5.1
├── UNMET DEPENDENCY request@^2.81.0
└── UNMET DEPENDENCY underscore@^1.8.2

npm ERR! missing: mkdirp@^0.5.1, required by project@1.0.0
npm ERR! missing: request@^2.81.0, required by project@1.0.0
npm ERR! missing: underscore@^1.8.2, required by project@1.0.0

$ npm install
added 57 packages in 1.595s

檢查一下你的 node_modules 文件夾，你會(huì)發(fā)現(xiàn)所有的模塊都已經(jīng)重新安裝了。通過(guò)這種方式，你可以很簡(jiǎn)單的與其他人分享你的工程文件，你只需給他們一個(gè) package.json 文件，而不用把你的所有依賴模塊給他們。

當(dāng)你通過(guò) npm 安裝一個(gè)模塊時(shí)，它會(huì)保存一份模塊的副本，所以當(dāng)你下次安裝同樣的模塊的時(shí)候，npm 它不會(huì)訪問(wèn)網(wǎng)絡(luò)，而是直接從你當(dāng)前工作目錄的 .npm 文件夾下讀取緩存。

$ ls ~/.npm
anonymous-cli-metrics.json  _cacache  _locks  npm  registry.npmjs.org

但是隨著時(shí)間的推移，你的 .npm 文件夾會(huì)有很多夾雜許多舊的模塊包，這時(shí)就很有必要定期清理一下你的 .npm 目錄了。

`$ npm cache clean`

如果你的想清除你系統(tǒng)內(nèi)有多個(gè) node 工程，你也在你的工作目錄下使用以下命令刪除所有的 node_modules 文件夾。

`find . -name "node_modules" -type d -exec rm -rf "{}" +`

你可能注意到了，這里有很多方式去執(zhí)行我們的 npm 命令。這里有一個(gè)簡(jiǎn)單的 npm 別名的列表

npm i – install local package 本地安裝模塊

npm i -g – install global package 全局安裝模塊

npm un – uninstall local package 卸載本地模塊

npm up – npm update packages 更新本地模塊

npm t – run tests 運(yùn)行測(cè)試

npm ls – list installed modules 列出已安裝的模塊

npm ll or npm la – print additional package information while listing modules 打印出所列模塊的附加信息

你也可以像這樣一次安裝多個(gè)模塊

`$ npm i express momemt lodash mongoose body-parser webpack`

如果你想了解所有的 npm 命令，只需要運(yùn)行 npm help 命令，或者你也可以讀一讀我們的這篇文章: 10 Tips and Tricks That Will Make You an npm Ninja.

有很多的 Node.js 版本工具可供使用來(lái)管理你系統(tǒng)內(nèi)的 Node.js 版本。比如說(shuō) n,或者nvm (Node Version Manager). 如果你對(duì)他們感興趣，你應(yīng)該讀一下我這篇入門(mén)指南: Install Multiple Versions of Node.js using nvm.

在這篇教程中，我介紹了 npm 的基本用法，包括如何安裝 Node.js、如何改變?nèi)帜K的安裝位置(這樣我們可以避免使用 sudo)、如果本地或者去全局安裝 npm 模塊、同時(shí)還介紹了怎么刪除，升級(jí)模塊，怎么安裝一個(gè)指定版本的模塊以及怎么管理你工程的各個(gè)依賴項(xiàng)。如果你想了解關(guān)于更多的 npm 最新版本的特性，你可以訪問(wèn) npm 的 官方倉(cāng)庫(kù)。

npm5 給全世界前端開(kāi)發(fā)帶來(lái)了巨大的改進(jìn)。其 COO 說(shuō)，npm 的用戶群在不斷變化，大部分用戶不僅僅為了寫(xiě) Node 程序而使用 npm, npm 已經(jīng)成為了前端整合 JavaScript 代碼的工具，甚至是現(xiàn)代 JavaScript 不可或缺的一部分。如果你還沒(méi)有在你的項(xiàng)目中使用 npm ,現(xiàn)在是時(shí)候了。

這篇文章由Graham Cox審核。感謝 SitePoint 上的審核人員，是你們讓 SitePoint 的內(nèi)容變得更好。