Node的包管理器

JavaScript缺少包結(jié)構(gòu)的定義，而CommonJS定義了一系列的規(guī)范。而NPM的出現(xiàn)則是為了在CommonJS規(guī)范的基礎上，實現(xiàn)解決包的安裝卸載，依賴管理，版本管理等問題。

CommonJS是一個致力于構(gòu)建統(tǒng)一的JS生態(tài)系統(tǒng)，它可以兼容web服務器、桌面應用、命令行應用、瀏覽器等。它定義了各種開發(fā)的規(guī)范和API不僅僅模塊化相關(guān)的規(guī)范）
官網(wǎng)的說明： 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)

包結(jié)構(gòu)

一個符合CommonJS規(guī)范的包應該是如下這種結(jié)構(gòu)：

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

package.json 說明

package.json文件就是當前項目或者包（js模塊、組件）的配置文件，所有當前項目的依賴的第三方模塊，當前項目的配置等都定義在package.json文件中，當前它有一定的規(guī)范，我們可以通過npm命令初始化和創(chuàng)建package.json文件。

創(chuàng)建package.json文件步驟：

# 打開命令行，確保您已經(jīng)安裝好了node
mkdir demos
cd demos
# 初始化當前項目的package.json文件，-y表示默認參數(shù)。
npm init -y

######當前demos目錄下就會增加一個package.json文件，內(nèi)容如下：######
{
  "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": [],          // 項目的關(guān)鍵詞
  "author": "",            // 作者，一般可以寫上郵箱
  "license": "ISC"         // 當前項目或者包的開源協(xié)議
}

package.json文件說明：

name。包名，需要在NPM上是唯一的。不能帶有空格。
description。包簡介。通常會顯示在一些列表中。
version。版本號。一個語義化的版本號（http://semver.org/ ），通常為x.y.z。
- x(Major): 主版本號：當你做了不兼容的 API 修改,一般一個比較完整大改版，需要修改x（一般增加1）
- y(Minor): 次版本號：當你做了向下兼容的功能性新增
- z(Patch): 修訂號：當你做了向下兼容的問題修正。
- 其他參考中文翻譯
keywords。關(guān)鍵字數(shù)組。用于NPM中的分類搜索。
maintainers。包維護者的數(shù)組。數(shù)組元素是一個包含name、email、web三個屬性的JSON對象。
contributors。包貢獻者的數(shù)組。第一個就是包的作者本人。在開源社區(qū)，如果提交的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），也可以是網(wǎng)頁地址（http://url）。
licenses。包所使用的許可證。
repositories。托管源代碼的地址數(shù)組。
dependencies。當前包需要的依賴。這個屬性十分重要，NPM會通過這個屬性，幫你自動加載依賴的包。

參考一個express框架的的包配置文件：

// 以下包，并不是完整的，我截取了部分內(nèi)容。
{
  "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這幾年的蓬勃發(fā)展, npm已經(jīng)不再局限于node平臺，尤其是Webpack的廣泛應用，前端包管理基本由npm統(tǒng)一管理了。

npm相關(guān)學習資源：

npm[官網(wǎng)(https://www.npmjs.com/)
npm中文文檔

npm安裝本地包

安裝第三方包到本地，只需要打開命令行，通過cd命令進入我們項目的根目錄(確保您之前已經(jīng)初始化了package.json文件)。
然后執(zhí)行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的增加的內(nèi)容

{
  "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，現(xiàn)在還支持,但建議用-P代替##
##################################################
$ npm i lodash -S
$ npm install lodash --save

安裝開發(fā)階段依賴的本地包

有時候我們需要一些第三方的包，僅僅在開發(fā)階段依賴，則需要把npm的install命令添加--save-dev參數(shù)。

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

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

開發(fā)依賴，會在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"
+ }
}

自動根據(jù)配置package.json文件下載安裝依賴的包

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

只需要： npm i

package.json文件中對模塊的依賴可以使用~、^、*來控制。

~: 安裝兼容模塊新發(fā)布的補丁版本，也就是說主版本號和次版本號不能變，最后一位修改號（補丁）可變化。例如：~1.1.0
^: （默認）主版本號不能變，后面兩個版本可變，兼容模塊新發(fā)布的次版本、補丁版本：^1.1.0
*: 兼容模塊新發(fā)布的大版本、小版本、補丁版本：任何版本都可以。

設置國內(nèi)鏡像

npm安裝的包的時候，先檢查本地是否有緩存，如果最近剛安裝過，而且本地有緩存的話，直接用緩存。如果沒有緩存會到npm的在線倉庫下載并安裝。默認的倉庫地址：https://registry.npmjs.org/.

但是由于服務器在國外，而且國內(nèi)你懂得，有時候下載比較大點的第三方包會非常慢，而且經(jīng)常斷掉。建議使用國內(nèi)比較穩(wěn)定快速的鏡像，比如淘寶的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"

安裝全局依賴的包

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

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

# 安裝成功后，我們就可以隨時隨地都可以運行g(shù)ulp命令了
$ gulp -v

更新安裝包

更新本地的安裝包：在 package.json 文件所在的目錄中執(zhí)行 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后續(xù)

發(fā)布npm包

npm不僅僅可以幫助我們進行安裝第三包，我們也可以自己發(fā)布一個包，供全世界的開發(fā)人員使用。
這塊內(nèi)容可以，查看官網(wǎng)的npm publish部分。

npm scripts 使用

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

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

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

比如：

// package.json文件
{
  // ...
  "scripts": {
    "dev": "gulp dev"    // 通過npm run dev 可以直接在shell中執(zhí)行g(shù)ulp 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"
  }
}

# 以下是執(zhí)行對應的任務

npm run build # 運行打包任務
npm run dist  # 運行生成dist目錄文件的命令
npm run dev   # 運行開發(fā)調(diào)試
npm run test  # 運行測試

# 以下有幾個內(nèi)置的可以簡寫：

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

yarn 是npm之外的另一種選擇

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

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

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

yarn能兼容npm的配置文件package.json，使用方式也非常接近npm，所以我們可以基本上無縫從npm遷移到y(tǒng)arn。而且yarn的確的確夠快、夠穩(wěn)定、夠優(yōu)秀。yarn的優(yōu)點：

速度快：Yarn 緩存了每個下載過的包，所以再次使用時無需重復下載。同時利用并行下載以最大化資源利用率，因此安裝速度更快。并行下載安裝包，速度真的是杠杠的。
比較安全：在執(zhí)行代碼之前，Yarn 會通過算法校驗每個安裝包的完整性。
可靠：使用詳細、簡潔的鎖文件格式和明確的安裝算法，Yarn 能夠保證在不同系統(tǒng)上無差異的工作。
不管安裝順序如何，相同的依賴關(guān)系將在每臺機器上以相同的方式安裝。
將依賴包的不同版本歸結(jié)為單個版本，以避免創(chuàng)建多個副本。
重試機制確保單個請求失敗并不會導致整個安裝失敗。

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全局安裝了一些命令包之后，可能全局范圍內(nèi)不能訪問，這時候需要把yarn的全局的bin目錄加入到操作系統(tǒng)的環(huán)境變量中。

# 查看yarn的全局bin目錄
yarn global bin

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

總結(jié)

至此，我們已經(jīng)基本掌握了nodejs的包管理、包加載機制等基本原理，后面就是我們怎么應用他們進行開發(fā)了。

參考：

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

Yarn 中文網(wǎng)

阮一峰老師的教程

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

第五章：node 模塊化(下) npm與yarn詳解

第五章：node 模塊化(下) npm與yarn詳解

Node的包管理器

包結(jié)構(gòu)

package.json 說明

npm進行包管理

npm安裝本地包

安裝開發(fā)階段依賴的本地包

自動根據(jù)配置package.json文件下載安裝依賴的包

設置國內(nèi)鏡像

控制安裝的版本號

安裝全局依賴的包

更新安裝包

卸載安裝包

其他npm常用命令

npm后續(xù)

yarn 是npm之外的另一種選擇

yarn的安裝

npm和yarn的cli差異

總結(jié)

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

第五章：node 模塊化(下) npm與yarn詳解

Node的包管理器

包結(jié)構(gòu)

package.json 說明

npm進行包管理

npm安裝本地包

安裝開發(fā)階段依賴的本地包

自動根據(jù)配置package.json文件下載安裝依賴的包

設置國內(nèi)鏡像

控制安裝的版本號

安裝全局依賴的包

更新安裝包

卸載安裝包

其他npm常用命令

npm后續(xù)

yarn 是npm之外的另一種選擇

yarn的安裝

npm和yarn的cli差異

總結(jié)

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频