NPM使用手冊

NPM是什麼

在項目開發過程中，咱們經常須要引用他人已經開發好的包，好比React，Webpack, angular等等，而npm就是一個用來管理（安裝，查看，更新，卸載...）這些包的工具。你也能夠上傳你的包，和使用公共的包，能夠到npm官網查看詳細信息。

使用準備

1. 安裝Node

   安裝完畢能夠node -v 查看版本號

2. 安裝NPM
   命令行：npm install npm --global
   解釋：--global爲全局安裝的意思，整個電腦環境均可以使用，-g是全局安裝簡寫

使用NPM

安裝指定包

1. 全局安裝

命令行：npm install webpack --global

解釋：webpack爲你想要安裝的包名，--global說明是全局安裝此包，全局安裝後能夠供命令行(command line)使用，用戶能夠在命令行中直接運行該組件包支持的命令，以下圖全局安裝webpack後的cmd文件

2. 局部安裝(默認行爲)

命令行:npm install webpack

解釋：好比你想在一個叫‘mx-npm’的文件夾安裝一個包，你能夠經過mkdir mx-npm 建立一個叫mx-npm的文件夾，而後cd mx-npm 進入到文件夾，在來執行安裝命令行，也能夠直接在對應的文件夾內，按住shift，點鼠標右鍵，點擊在此處打開命令窗口，要進入到你要安裝的項目文件內來輸入命令行

引用方式：能夠直接經過require('')的方式引入項目中node_modules目錄下的模塊,也能夠用es6的import，

3. 爲何全局安裝後還要本地安裝?

詳細見nodejs全局安裝和本地安裝的區別
總結：有時候一些神奇的bug，頗有多是你的包的版本裝的不對，仍是按照package.json來安裝比較好，保證不一樣版本的包之間的相互依賴。

4.安裝制定版本

命令行：npm install webpack@2.1.0
解釋：局部安裝webpack其版本號爲2.1.0

刪除指定包

1. 全局刪除
   命令行：npm uninstall webpack -g
   解釋：webpack爲包名，-g是全局的縮寫

2. 局部刪除
   命令行： npm uninstall webpack

查看

1. 查看項目安裝了哪些包
   命令行：npm list
   

2. 查看某個包的信息
   命令行： npm info bootstrap
   

3. 查看全局安裝的根目錄
   命令行： npm root -g

   通常在  \ Users \ 用戶名 \ AppData \ Roaming\底下，我已經能記住了

更新

1. 檢查更新
   命令行：npm outdated

2. 更新限定
   在package.json裏面會被限制更新的版本號，見下文

3. 執行更新
   命令行：npm update

關於package.json

什麼是package.json

package.json是項目的配置文件，裏面能夠包含項目的名字，版本號，項目的描述，git倉庫，關鍵字，做者，依賴的包等等，可是至少要包含項目的名字，版本號，是能夠手工建立的，可是也能夠用NPM自動建立。

package.json使用好處

分享包的時候能夠刪除node_modules（這裏面放着各類項目使用到的包）,而後使用命令行npm install，就會根據package.json裏面的內容自動安裝包

自動建立package.json

命令行：npm init
解釋：輸入命令行以後會問你幾個問題，不必定每一個都要回答能夠直接回車，而後yes完成建立。

分析與使用package.json

• 第一次建立後的package.json

{
  "name": "simplejan-web",
  "version": "1.0.0",
  "description": "none",
  "repository": "none",
  "readme": "README.md",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "UNLICENSED",
  "dependencies": {
    "bootstrap": "^3.3.6",
    "bootstrap-material-design": "^0.5.9",
    "snackbarjs": "^1.1.0",
    "nouislider": "^6.2.0",
    "jquery": "*"
  },
 "devDependencies":{
},
}

^這個符號表明的是隻能更新版本號第二位數字，改成~能夠只能更新第三位，只有*表明更新到最新

• dependencies與devDependencies
  二者標識的是不一樣的依賴，dependencies是運行本項目所依賴的包，而devDependencies是用於開發時須要的模塊，包括一些用於開發測試的模塊

• 添加dependencies 依賴

  命令行： npm install bootstrap --save

• 添加devDependencies 依賴

  命令行：npm install webpack --save-dev

"dependencies": {
    "bootstrap": "^3.3.6",
    "bootstrap-material-design": "^0.5.9",
    "jquery": "^1.10.2",
    "nouislider": "^6.2.0",
    "snackbarjs": "^1.1.0"
  },
  "devDependencies": {
    "webpack": "^1.12.14"
  }
}

• 刪除的時候對應的package.json配置也刪除

  命令行：npm uninstall webpack --save-dev
  解釋：區別在於--save-dev 和--save

NPM進階

npm link

npm link命令是能夠將模塊安裝到全局，這樣你本身這個私有的包就能夠在全局使用啦，詳細用法見NPM Link

package.json

NPM 腳本 - "scripts"

{
  // package.json
  "scripts": {
    "build": "node index.js"
  }
}

當執行npm run build的時候，至關於執行了node index.js，好處多多，好比用於項目的自動構建打包等，有一篇詳細的文章見 npm scripts 使用指南

命令行可執行模塊 "bin"

//package.json 
{
...
 "bin": {
    "mx": "./mx.js"
  }
  ...
  }

用來執行各個內部命令對應的可執行文件的位置。好比在命令行中執行mx,就會執行mx.js，
這個有什麼用？舉個例子前端掃盲-之打造一個Node命令行工具

---

參考資料

寧皓網
InfoQ
前端掃盲-之打造一個Node命令行工具
NPM的特殊使用