npm

1. 什么是npm

npm是Node官方提供的包管理工具婚瓜，它已經(jīng)成了Node包的標(biāo)準(zhǔn)發(fā)布平臺歼跟，用于Node包的發(fā)布、傳播声登、依賴控制狠鸳。npm提供了命令行工具，使你可以方便地下載悯嗓、安裝件舵、升級、刪除包脯厨，也可以讓你作為開發(fā)者發(fā)布并維護(hù)包铅祸。

2. 安裝npm

npm不需要單獨安裝。在安裝Node的時候合武，會連帶一起安裝npm临梗。

但是，Node附帶的npm可能不是最新版本稼跳，最后用下面的命令盟庞，更新到最新版本。

$ sudo npm install npm@latest -g

安裝完成查看 npm 的版本

$ npm -v
# 6.4.1

3. npm常用命令

3.1 安裝npm包

有兩種方式用來安裝 npm 包：本地安裝和全局安裝汤善。至于選擇哪種方式來安裝什猖，取決于我們?nèi)绾问褂眠@個包票彪。

如果你自己的模塊依賴于某個包（比如通過 Node.js 的require加載），那么你應(yīng)該選擇本地安裝不狮，這種方式也是npm install命令的默認(rèn)行為岩梳。 如果你想將包作為一個命令行工具，比如 creat-react-app,Vue Cli露筒，那么你應(yīng)該選擇全局安裝烘绽。

3.1.1 本地安裝

使用npm install進(jìn)行本地安裝,可以簡寫為npm i

npm i <package_name>

上述命令執(zhí)行之后將會在當(dāng)前的目錄下創(chuàng)建一個node_modules 的目錄（如果不存在的話），然后將下載的包保存到這個目錄下遂黍。

3.1.2 全局安裝

使用npm i -g進(jìn)行全局安裝

npm i -g 

3.1.3 安裝不同版本

 npm i <package_name>@latest
 npm i <package_name>@1.1.1
 npm i <package_name>@">=1.1.0 <1.2.0"

3.1.4 –save與--save-dev參數(shù)

使用npm i會安裝dependencies字段和devDependencies字段中的所有模塊

• --save：模塊名將被添加到dependencies终佛，可以簡化為參數(shù)-S,npm 5.x+版本默認(rèn)添加此參數(shù)
• --save-dev: 模塊名將被添加到devDependencies，可以簡化為參數(shù)-D

將運行時的依賴安裝到dependencies雾家，將開發(fā)時的依賴安裝到devDependencies铃彰。

dependencies下記錄的是項目在運行時必須依賴的插件，常見的例如vue react jquery等芯咧，
即使項目打包好了牙捉、上線了，這些也是需要用的敬飒，否則程序無法正常執(zhí)行邪铲。

devDependencies下記錄的是項目在開發(fā)過程中使用的插件，例如我們開發(fā)過程中需要使用webpack打包无拗，
但是一旦項目打包發(fā)布带到、上線了之后，webpack就都沒有用了英染。

一旦將包安裝到node_modules 目錄中揽惹，你就可以使用它了。

3.2 更新與卸載npm包

3.2.1 更新npm包

可以使用npm outdate命令查詢已安裝過的包中是否有過時版本

$ npm outdated
Package      Current   Wanted   Latest  Location
glob          5.0.15   5.0.15    6.0.1  test-outdated-output
nothingness    0.0.3      git      git  test-outdated-output
npm            3.5.1    3.5.2    3.5.1  test-outdated-output
local-dev      0.0.3   linked   linked  test-outdated-output
once           1.3.2    1.3.3    1.3.3  test-outdated-output

使用npm update命令,可以簡寫為npm up

# 本地更新
npm up <package_name>

# 使用 -S 參數(shù)更新package.json里面dependencies模塊的版本號
npm up <package_name> -S

# 使用 -D 參數(shù)更新package.json里面devDependencies模塊的版本號
npm up <package_name> -D

# 全局更新
npm up -g <package_name>

3.2.2 卸載npm包

使用npm uninstall命令,可以簡寫為npm un

# 卸載本地模塊
$ npm un <package_name>

# 卸載全局模塊
$ npm un -g <package_name>

3.3 npm run指令

npm不僅可以用于模塊管理四康，還可以用于執(zhí)行腳本搪搏。package.json文件有一個scripts字段，可以用于指定腳本命令闪金，供npm直接調(diào)用疯溺。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
    }
    
npm start 
npm run build

npm內(nèi)置了兩個命令簡寫，npm test等同于執(zhí)行npm run test哎垦，npm start等同于執(zhí)行npm run start喝检。

npm run為每條命令提供了pre-和post-兩個鉤子（hook）,
以npm run test為例，執(zhí)行這條命令之前撼泛，npm會先查看有沒有定義pretest和posttest兩個鉤子挠说，
如果有的話，就會先執(zhí)行npm run pretest愿题，然后執(zhí)行npm run test损俭，最后執(zhí)行npm run posttest蛙奖。
如果執(zhí)行過程出錯，就不會執(zhí)行排在后面的腳本杆兵，即如果pretest腳本執(zhí)行出錯雁仲，就不會接著執(zhí)行test和posttest腳本。

例子

{
  "test": "karma start",
  "test:lint": "eslint . --ext .js --ext .jsx",
  "pretest": "npm run test:lint"
}

# 上面代碼中琐脏，在運行npm run test之前攒砖，會自動檢查代碼，即運行npm run test:lint命令日裙。

下面是一些常見的pre-和post-腳本吹艇。

• prepublish，postpublish
• preinstall昂拂，postinstall
• preuninstall受神，postuninstall
• preversion，postversion
• pretest格侯，posttest
• prestop鼻听，poststop
• prestart，poststart
• prerestart联四，postrestart

另外撑碴，不能在pre腳本之前再加pre，即prepretest腳本不起作用朝墩。

注意灰羽，即使npm可以自動運行pre和post腳本，也可以手動執(zhí)行它們鱼辙。

更多npm命令參考npm命令行文檔

4. 如何發(fā)布npm包

通常發(fā)包的倉庫地址為npm倉庫或者公司內(nèi)部私有 npm 倉庫，這里以發(fā)布到npm倉庫為例

4.1 npm init初始化package.json文件

npm init

# 使用npm init -y可以快速生成默認(rèn)的package.json文件

# 根據(jù)提示填寫玫镐，其中name與version為必填
About to write to D:\luotongzhou\npm-example\package.json:
{
  "name": "npm-example-luotongzhou",
  "version": "1.0.0",
  "description": "npm-example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "luotongzhou",
  "license": "ISC"
}

如果是將包發(fā)布到私有倉庫需要在package.json修改發(fā)布地址

# packages.json
"publishConfig": {
    "registry": "http://localhost/repository/npm-hosted/" 
 }

4.2 創(chuàng)建模塊入口文件

在當(dāng)前目錄下創(chuàng)建index.js文件倒戏，該文件為模塊的入口文件，可在npm init或package.json文件中設(shè)置

# index.js
module.exports.printMsg = function() {
    console.log("my first npm package")
}

4.3 發(fā)布npm包

4.3.1 注冊npm賬號

注冊npm賬號有兩種方式恐似，一種是在npm官網(wǎng)注冊杜跷，另外一種是使用npm adduser命令注冊

npm adduser

Username: # 輸入用戶名
Password：# 輸入密碼，默認(rèn)不可見
Email：# 輸入郵箱

# 注冊完成后顯示
Logged in as <your username> on http://registry.npmjs.org/.

4.3.2 將包發(fā)布到npm倉庫

使用npm publish命令將包發(fā)布到npm倉庫

npm publish

# 發(fā)布完成后顯示
+ npm-example-luotongzhou@1.0.0

發(fā)布時可能報以下錯誤：

1.no_perms Private mode enable, only admin can publish this module

使用cnpm的原因矫夷，設(shè)置回原本的就可以了
npm config set registry http://registry.npmjs.org

發(fā)布完成之后,如果還想回到之前的cnpm,使用下面的命令

npm config set registry https://registry.npm.taobao.org

2.npm ERR! publish Failed PUT 403
You do not have permission to publish "xxxx". Are you logged in
as the correct user? : xxxx

這個錯誤是package.json中的name與npm倉庫中的包名重復(fù)了葛闷，修改package.json中的name為全網(wǎng)唯一就好了

3.npm ERR! publish Failed PUT 403
npm ERR! you must verify your email before publishing a new package

沒有驗證郵箱的原因，去注冊npm賬號的郵箱找到驗證的郵件點擊驗證鏈接就行了双藕，鏈接有可能過期淑趾，官網(wǎng)上登錄后可以重新發(fā)送驗證郵件

4.4 拉取并使用發(fā)布的包

新建一個文件夾,使用npm i拉取剛才發(fā)布的包

npm i npm-example-luotongzhou

創(chuàng)建index.js文件

var test = require('npm-example-luotongzhou')

test.printMsg();

運行node index.js命令

D:\luotongzhou\npm>node index.js
my first npm package  # 打印出結(jié)果

4.5 更新已發(fā)布的包

更新已發(fā)布的包需要修改包的版本號即packages.json的version值，可以直接修改packages.json文件中version的版本號忧陪。但為了使用語義化的版本不建議直接修改version的值扣泊，可以使用npm version命令進(jìn)行版本更新

# 修改printMsg方法里的內(nèi)容
module.exports.printMsg = function() {
    console.log("my first npm package has updated")
}

# 更新版本
npm version <update_type>
常用update_type有 major | minor | patch 
# 示例
npm version patch
v1.0.1

npm version minor
v1.1.0

npm version major
v2.0.0

繼續(xù)npm publish發(fā)布就好了
之后只需要在引入該包的項目中npm up更新該包即可近范。

5. npm配置

5.1 npm config

npm cli 提供了 npm config 命令進(jìn)行 npm 相關(guān)配置，通過 npm config ls -l 可查看 npm 的所有配置延蟹，包括默認(rèn)配置评矩。
修改配置的命令為npm config set <key> <value>, 我們使用相關(guān)的常見重要配置:

• proxy, https-proxy: 指定 npm 使用的代理
• registry 指定 npm 下載安裝包時的源，默認(rèn)為 https://registry.npmjs.org/ 可以指定為私有 registry 源
• package-lock 指定是否默認(rèn)生成 package-lock 文件阱飘，建議保持默認(rèn) true
• save true/false 指定是否在 npm install 后保存包為 dependencies, npm 5 起默認(rèn)為 true

例：

npm config set registry https://registry.npm.taobao.org 
# 切換淘寶鏡像

刪除指定的配置項命令為 npm config delete <key>.

5.2 npmrc 文件

除了使用 CLI 的 npm config 命令顯示更改 npm 配置斥杜，還可以通過 npmrc 文件直接修改配置。

這樣的 npmrc 文件優(yōu)先級由高到低包括：

• 工程內(nèi)配置文件: /path/to/my/project/.npmrc
• 用戶級配置文件: ~/.npmrc
• 全局配置文件: $PREFIX/etc/npmrc (即npm config get globalconfig 輸出的路徑)
• npm內(nèi)置配置文件: /path/to/npm/npmrc

通過這個機(jī)制沥匈，我們可以方便地在工程根目錄創(chuàng)建一個.npmrc 文件來共享需要在團(tuán)隊間共享的 npm 運行相關(guān)配置蔗喂。比如如果我們在公司內(nèi)網(wǎng)環(huán)境下需通過代理才可訪問 registry.npmjs.org 源，或需訪問內(nèi)網(wǎng)的 registry, 就可以在工作項目下新增.npmrc 文件并提交代碼庫咐熙。

proxy = http://proxy.example.com/
https-proxy = http://proxy.example.com/
registry = http://registry.example.com/