Node的包管理器
JavaScript缺少包結構的定義，而CommonJS定義了一系列的規(guī)范徐绑。而NPM的出現(xiàn)則是為了在CommonJS規(guī)范的基礎上傲茄，實現(xiàn)解決包的安裝卸載盘榨，依賴管理蟆融，版本管理等問題型酥。
CommonJS是一個致力于構建統(tǒng)一的JS生態(tài)系統(tǒng)弥喉，它可以兼容web服務器、桌面應用棚亩、命令行應用讥蟆、瀏覽器等瘸彤。它定義了各種開發(fā)的規(guī)范和API不僅僅模塊化相關的規(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)
包結構
一個符合CommonJS規(guī)范的包應該是如下這種結構：
- 一個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": [], // 項目的關鍵詞
"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窿撬。關鍵字數(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相關學習資源：
- 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
# 安裝成功后，我們就可以隨時隨地都可以運行gulp命令了
$ 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í)行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"
}
}
# 以下是執(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)上無差異的工作冬殃。
- 不管安裝順序如何叁怪，相同的依賴關系將在每臺機器上以相同的方式安裝。
- 將依賴包的不同版本歸結為單個版本涣觉，以避免創(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
總結
至此步淹，我們已經(jīng)基本掌握了nodejs的包管理缭裆、包加載機制等基本原理，后面就是我們怎么應用他們進行開發(fā)了澈驼。
參考：
