Node入門教程(7)第五章：node 模組化(下) npm與yarn詳解

weixin_34119545發表於2018-04-04

Node的包管理器

JavaScript缺少包結構的定義，而CommonJS定義了一系列的規範。而NPM的出現則是為了在CommonJS規範的基礎上，實現解決包的安裝解除安裝，依賴管理，版本管理等問題。

CommonJS是一個致力於構建統一的JS生態系統，它可以相容web伺服器、桌面應用、命令列應用、瀏覽器等。它定義了各種開發的規範和API不僅僅模組化相關的規範）
官網的說明： a group with a goal of building up the JavaScript ecosystem for web servers, desktop and command line apps and in the browser.

CommonJS的模組主要如下：

binary: Binary Data Objects (byte arrays and/or strings) (proposals, discussion, early implementations)
encodings: Encodings and character sets (proposals, discussion, early implementations)
io: I/O Streams (proposals, discussion)
fs, fs-base: Filesystem (proposals, discussion, early implementations)
system: System Interface (stdin, stdout, stderr, &c) (1.0, amendments proposed)
assert, test: Unit Testing (1.0, amendment proposals pending)
sockets: Socket I/O TCP/IP sockets (early proposals)
event-queue: Reactor Reactor/Event Queue (early proposals)
worker: Worker Worker (concurrent shared nothing process/thread) (proposal)
console: console (proposal)

包結構

一個符合CommonJS規範的包應該是如下這種結構：

一個package.json檔案應該存在於包頂級目錄下
二進位制檔案應該包含在bin目錄下。
JavaScript程式碼應該包含在lib目錄下。
文件應該在doc目錄下。
單元測試應該在test目錄下。

package.json 說明

package.json檔案就是當前專案或者包（js模組、元件）的配置檔案，所有當前專案的依賴的第三方模組，當前專案的配置等都定義在package.json檔案中，當前它有一定的規範，我們可以通過npm命令初始化和建立package.json檔案。

建立package.json檔案步驟：

# 開啟命令列，確保您已經安裝好了node
mkdir demos
cd demos
# 初始化當前專案的package.json檔案，-y表示預設引數。
npm init -y

######當前demos目錄下就會增加一個package.json檔案，內容如下：######
{
  "name": "demos",         // 專案名稱
  "version": "1.0.0",      // 專案的版本號
  "description": "",       // 專案描述
  "main": "index.js",      // 引用目錄模組的入口檔案
  "scripts": {             // 可以通過npm執行的shell命令指令碼
    "test": "echo \"Error: no test specified\" && exit 1"   // 可以通過npm run test 啟動
  },
  "keywords": [],          // 專案的關鍵詞
  "author": "",            // 作者，一般可以寫上郵箱
  "license": "ISC"         // 當前專案或者包的開源協議
}

package.json檔案說明：

name。包名，需要在NPM上是唯一的。不能帶有空格。
description。包簡介。通常會顯示在一些列表中。
version。版本號。一個語義化的版本號（http://semver.org/ ），通常為x.y.z。
- x(Major): 主版本號：當你做了不相容的 API 修改,一般一個比較完整大改版，需要修改x（一般增加1）
- y(Minor): 次版本號：當你做了向下相容的功能性新增
- z(Patch): 修訂號：當你做了向下相容的問題修正。
- 其他參考中文翻譯
keywords。關鍵字陣列。用於NPM中的分類搜尋。
maintainers。包維護者的陣列。陣列元素是一個包含name、email、web三個屬性的JSON物件。
contributors。包貢獻者的陣列。第一個就是包的作者本人。在開源社群，如果提交的patch被merge進master分支的話，就應當加上這個貢獻patch的人。格式包含name和email。如：
```
"contributors": [{
    "name": "Jackson Tian",
    "email": "mail @gmail.com"
  }, {
    "name": "fengmk2",
    "email": "mail2@gmail.com"
}],
```
bugs。一個可以提交bug的URL地址。可以是郵件地址（mailto:mailxx@domain），也可以是網頁地址（http://url）。
licenses。包所使用的許可證。
repositories。託管原始碼的地址陣列。
dependencies。當前包需要的依賴。這個屬性十分重要，NPM會通過這個屬性，幫你自動載入依賴的包。

參考一個express框架的的包配置檔案：

// 以下包，並不是完整的，我擷取了部分內容。
{
  "name": "express",
  "description": "Fast, unopinionated, minimalist web framework",
  "version": "4.16.3",
  "author": "TJ Holowaychuk <tj@vision-media.ca>",
  "contributors": [
    "Aaron Heckmann <aaron.heckmann+github@gmail.com>",
    "Ciaran Jessup <ciaranj@gmail.com>",
  ],
  "license": "MIT",
  "repository": "expressjs/express",
  "homepage": "http://expressjs.com/",
  "keywords": [
    "express",
    "framework",
  ],
  "dependencies": {
    "accepts": "~1.3.5",
    "array-flatten": "1.1.1",
    "statuses": "~1.4.0",
    "type-is": "~1.6.16",
    "utils-merge": "1.0.1",
    "vary": "~1.1.2"
  },
  "devDependencies": {
    "after": "0.8.2",
    "cookie-parser": "~1.4.3",
    "cookie-session": "1.3.2",
    "ejs": "2.5.7",
    "connect-redis": "~2.4.1",
    "vhost": "~3.0.2"
  },
  "engines": {
    "node": ">= 0.10.0"
  },
  "files": [
    "LICENSE",
    "History.md",
    "Readme.md",
    "index.js",
    "lib/"
  ],
  "scripts": {
    "lint": "eslint .",
    "test": "mocha --require test/support/env --reporter spec --bail --check-leaks --no-exit test/ test/acceptance/",
  }
}

npm進行包管理

npm(node package manager)本來是Node.js的包管理工具，但隨著JS這幾年的蓬勃發展, npm已經不再侷限於node平臺，尤其是Webpack的廣泛應用，前端包管理基本由npm統一管理了。

npm相關學習資源：

npm[官網(https://www.npmjs.com/)
npm中文文件

npm安裝本地包

安裝第三方包到本地，只需要開啟命令列，通過cd命令進入我們專案的根目錄(確保您之前已經初始化了package.json檔案)。
然後執行npm的install命令，如下：

語法：npm install <package> --save-prod

$ cd demos
$ npm install lodash --save-prod
# 輸出如下：
npm notice created a lockfile as package-lock.json. You should commit this file.
+ lodash@4.17.5   # 有個+號，代表安裝當前。
added 1 package in 1.091s  # 這裡告訴我們天津一個包用了1.091秒

解釋：

install: 代表安裝第三方包的意思，可以直接用 i代替。
--save-prod: 代表把當前安裝包的配置寫入到當前package.json檔案中, 可以用 -P代替。

我們專案資料夾會有兩個變化：第一個就是增加了package.json檔案和node_modeules資料夾

以下是package.json的增加的內容

{
  "name": "demos",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
+ "dependencies": {             // 增加
+   "lodash": "^4.17.5"         // 增加lodash的安裝包
+ }                             // 增加
}

node_modeules資料夾存放我們剛剛安裝包的檔案。

命令簡寫的形式：

$ npm install lodash --save-prod  
$ npm i lodash -P  
##################################################
##  老版本中 --save 或者 -S，現在還支援,但建議用-P代替##
##################################################
$ npm i lodash -S
$ npm install lodash --save

安裝開發階段依賴的本地包

有時候我們需要一些第三方的包，僅僅在開發階段依賴，則需要把npm的install命令新增--save-dev引數。

例如，我們開發階段需要用gulp進行打包，則需要安裝gulp包。

$ npm install gulp --save-dev
# 以下是簡寫形式， -D === --save-dev
$ npm i gulp -D

開發依賴，會在package.json檔案的devDependencies下新增安裝包的配置。如下所示：

{
  "name": "demos",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.5"
  },
+ "devDependencies": {
+   "gulp": "^3.9.1"
+ }
}

自動根據配置package.json檔案下載安裝依賴的包

package.json檔案可以幫我們進行包的管理和配置，如果在專案根目錄下直接執行npm install,npm會自動的根據package.json檔案中的dependencies和devDependencies中配置的第三方包進行安裝。這尤其是在團隊開發和專案部署時非常有用。

只需要： npm i

package.json檔案中對模組的依賴可以使用~、^、*來控制。

~: 安裝相容模組新發布的補丁版本，也就是說主版本號和次版本號不能變，最後一位修改號（補丁）可變化。例如：~1.1.0
^: （預設）主版本號不能變，後面兩個版本可變，相容模組新發布的次版本、補丁版本：^1.1.0
*: 相容模組新發布的大版本、小版本、補丁版本：任何版本都可以。

設定國內映象

npm安裝的包的時候，先檢查本地是否有快取，如果最近剛安裝過，而且本地有快取的話，直接用快取。如果沒有快取會到npm的線上倉庫下載並安裝。預設的倉庫地址：https://registry.npmjs.org/.

但是由於伺服器在國外，而且國內你懂得，有時候下載比較大點的第三方包會非常慢，而且經常斷掉。建議使用國內比較穩定快速的映象，比如淘寶的npm映象。

設定npm下載包的映象為淘寶的映象，設定方式：

開啟終端(windows下請使用powershell)

# 設定淘寶映象
$ npm config set registry https://registry.npm.taobao.org

# 驗證是否配置成功
$ npm config get registry
# 輸出如下則表示成功：
https://registry.npm.taobao.org/

另外一種辦法：用cnpm替代npm。

# 首先安裝cnpm：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

# 使用
$ cnpm install expresstall express

控制安裝的版本號

我們通過npm安裝第三方包的時候，可以指定安裝的具體版本，在包的後面新增一個@符號和具體版本號就可以了。

# 安裝0.1.1版本的sax
$ npm install sax@0.1.1  
# 安裝最新的sax
$ npm install sax@latest

# 還可以指定範圍
$ npm install sax@">=0.1.0 <0.2.0"

安裝全域性依賴的包

有些包不僅僅需要我們本地開發執行時依賴，有時候也需要我們在命令列的任意位子啟動和使用第三方包，那麼就需要進行全域性安裝。
語法： npm install -g <package>
比如，gulp我們有時候在任何一點地方都可能用到gulp命令工具，則需要全域性安裝gulp。

$ npm install gulp --global
# 簡寫
$ npm i -g gulp

# 安裝成功後，我們就可以隨時隨地都可以執行gulp命令了
$ gulp -v

更新安裝包

更新本地的安裝包：在 package.json 檔案所在的目錄中執行 npm update 命令。
更新全域性的安裝包：

$ npm update -g jshint

解除安裝安裝包

解除安裝本地安裝包

$ npm uninstall --save-prod lodash
# 簡寫
$ npm un -P lodash

解除安裝全域性安裝包

$ npm uninstall -g lodash

其他npm常用命令

更新升級npm

$ npm i npm

羅列出當前安裝的所有的包

$ npm list 

# 控制列出所有包的目錄層級 --depth 控制層級
$ npm list --depth=0

# 可以用ls 替代 list
$ npm ls --depth=1

# 羅列全域性的安裝的包
$ npm -g list --depth=0

# 以下是我的安裝的包
/usr/local/lib
├── autoprefixer@7.2.3
├── babel-cli@6.18.0
├── bower@1.8.2
├── create-react-app@1.0.2
├── egg-init@1.9.0
├── eslint@3.12.2
├── generator-keystone@0.5.1
├── grunt-cli@1.2.0
├── gulp@3.9.1
├── json-server@0.12.1
├── live-server@1.2.0
├── n@2.1.5
├── nodemon@1.11.0
├── npm@5.6.0
├── npm-check@5.4.0
├── npm-check-updates@2.8.8
├── parcel-bundler@1.4.1
├── sails@0.12.13
├── static-server@2.0.5
├── typescript@2.2.1
├── vue-cli@2.9.3
├── vue-migration-helper@1.1.1
├── UNMET PEER DEPENDENCY webpack@>=1.3.0 <3
├── webpack-dev-server@1.16.2
└── yo@1.8.5

npm後續

釋出npm包

npm不僅僅可以幫助我們進行安裝第三包，我們也可以自己釋出一個包，供全世界的開發人員使用。
這塊內容可以，檢視官網的npm publish部分。

npm scripts 使用

我們可以通過npm編寫一些使用頻率非常高的：打包、執行測試、執行部署等shell命令到package.json檔案的 scripts配置節點，方便我們執行一些複雜的重複性很高的任務。
具體學習：請移步阮一峰老師的教程。

以下只是簡單介紹一下原理和使用：

npm 指令碼的原理非常簡單。每當執行npm run，就會自動新建一個 Shell，在這個 Shell 裡面執行指定的指令碼命令。因此，只要是 Shell（一般是 Bash）可以執行的命令，就可以寫在 npm 指令碼里面。

比如：

// package.json檔案
{
  // ...
  "scripts": {
    "dev": "gulp dev"    // 通過npm run dev 可以直接在shell中執行gulp dev命令。
  }
}

在scripts中定義的指令碼，我們可以直接通過npm run <keyname>執行，跟在shell中執行一樣。

常見的一般使用技巧：

// package.json檔案
{
  // ...
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit",
    "build": "node build/build.js"
  }
}

# 以下是執行對應的任務

npm run build # 執行打包任務
npm run dist  # 執行生成dist目錄檔案的命令
npm run dev   # 執行開發除錯
npm run test  # 執行測試

# 以下有幾個內建的可以簡寫：

npm start # => npm run start
npm stop  # => npm run stop的簡寫
npm test  # => npm run test的簡寫

yarn 是npm之外的另一種選擇

yarn是Facebook出的一款替代npm的包管理工具，npm的功能它都有對應，而且使用方法也都很相似。那為什麼Facebook再造一個重複的輪子呢？

在yarn之前的npm版本的問題：(當然部分問題已經修復)

npm 安裝包（packages）的速度不夠快，是順序下載，不是並行。
拉取的 packages 可能版本不同（最新的版本已經可以把版本鎖住：package-lock.json）
npm 允許在安裝 packages 時執行程式碼，這就埋下了安全隱患

yarn能相容npm的配置檔案package.json，使用方式也非常接近npm，所以我們可以基本上無縫從npm遷移到yarn。而且yarn的確的確夠快、夠穩定、夠優秀。yarn的優點：

速度快：Yarn 快取了每個下載過的包，所以再次使用時無需重複下載。同時利用並行下載以最大化資源利用率，因此安裝速度更快。並行下載安裝包，速度真的是槓槓的。
比較安全：在執行程式碼之前，Yarn 會通過演算法校驗每個安裝包的完整性。
可靠：使用詳細、簡潔的鎖檔案格式和明確的安裝演算法，Yarn 能夠保證在不同系統上無差異的工作。
不管安裝順序如何，相同的依賴關係將在每臺機器上以相同的方式安裝。
將依賴包的不同版本歸結為單個版本，以避免建立多個副本。
重試機制確保單個請求失敗並不會導致整個安裝失敗。

yarn的安裝

mac下安裝：

brew install yarn

windows安裝：直接下載安裝包。

測試是否安裝成功：

yarn --version
# 以下輸出的是yarn的版本號，筆者的是如下，你的可能跟我不一樣。
0.24.5

npm和yarn的cli差異

以下只是簡單介紹一下yarn的使用方法：

初始化一個新的專案

yarn init
# 對應npm
npm init

新增一個依賴包

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]
# 對應npm
npm install [package]

更新一個依賴包

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

# 對應npm
npm update [package]

刪除一個依賴包

yarn remove [package]
# 對應npm
npm uninstall [package]

安裝所有的依賴包

yarn
or
yarn install

# 對應npm
npm install

全域性安裝依賴包

yarn global add [package]
npm i [package] -g

yarn global remove [package]
npm un [package] -g

yarn upgrade [package]
npm update [package]

注意：yarn全域性安裝了一些命令包之後，可能全域性範圍內不能訪問，這時候需要把yarn的全域性的bin目錄加入到作業系統的環境變數中。

# 檢視yarn的全域性bin目錄
yarn global bin

# 輸出（mac下）
/usr/local/Cellar/node/9.9.0/bin

總結

至此，我們已經基本掌握了nodejs的包管理、包載入機制等基本原理，後面就是我們怎麼應用他們進行開發了。

參考：

深入淺出Node.js（三）：深入Node.js的模組機制

github地址：https://github.com/malun666/aicoder_node

node中npm結構詳解以及自定義npm包上傳到npm教程
2017-04-07
NPM
node中安裝yarn(nodejs Yarn替代npm包管理)
2020-04-07
YarnNodeJSNPM
yarn詳細入門教程
2018-11-23
Yarn
釋出node模組到npm
2017-07-28
NPM
前端學習 node 快速入門系列 —— npm
2021-03-10
前端NPM
node.js學習之npm 入門 ——2.《下載和管理npm》
2019-02-16
Node.jsNPM
Node中fs模組 API詳解
2018-09-11
API
Node模組之事件(events)詳解
2018-02-23
事件
Node 除錯工具入門教程
2018-03-20
除錯
Node Stream 入門與深入
2018-02-03
node模組載入層級優化
2016-11-21
優化
Node.js(一)——(Node.js安裝及使用，通過Node.js搭建伺服器，模組化及自定義模組，npm/yarn/nvm，內建模組fs的使用，buffer及stream，新聞列表案例)
2020-04-21
Node.js伺服器NPMYarn
Node.js基本入門級教程
2017-10-17
Node.js
windows下升級node&npm
2018-05-15
WindowsNPM
【Node】詳解模組的實現過程
2019-03-08
前端學習 node 快速入門系列 —— 模組（module）
2021-03-11
前端
ubuntu16.04 安裝 npm和node，利用n模組切換node版本
2018-10-15
UbuntuNPM
Node.js 核心模組 Timers 詳解
2017-11-06
Node.js
Windows系統下更新npm和node
2017-11-29
WindowsNPM
Node.js開發入門—Stream（流）基本用法詳解
2018-02-03
Node.js
極簡 Node.js 入門 - 1.2 模組系統
2020-08-05
Node.js
Node.js 原生開發入門完全教程
2017-07-04
Node.js
Centos7安裝Node.js詳細教程。
2024-01-28
CentOSNode.js
Node那些事之模組化
2019-02-27
node.js，express入門看詳細篇
2018-05-11
Node.jsExpress
Node 爬蟲入門
2017-05-31
爬蟲
node HelloWorld入門篇
2017-12-14
[Node.js]npm安裝node-gyp
2019-02-16
Node.jsNPM
linux下安裝node npm並配置
2018-05-11
LinuxNPM
入門到放棄node系列之網路模組（二）
2019-02-16
Node.js教程15：net模組初探
2019-03-05
Node.js
無涯教程: Node.js - Web模組
2021-09-09
Node.jsWeb
Node.js&NPM的安裝與配置
2017-12-21
Node.jsNPM
Win7: VirtualBox虛擬機器安裝Ubuntu詳細教程 & Ubuntu下如何安裝最新Node.js&npm包
2018-01-09
Win7虛擬機UbuntuNode.jsNPM
ROS GUI-node，npm
2020-12-06
ROSGUINPM
node模組化之require學習
2019-03-03
UI
《Node.js開發指南》——Node.js入門
2012-04-25
Node.js
【入門指南】node.js
2019-04-15
Node.js