什麼是npm系列：1、npm簡介

本文同步發表於做者博客: 什麼是npm系列：1、npm簡介

npm是Node.js的包管理工具，它的誕生也極大的促進了前端的發展，在現代前端開發中都離不開npm的身影。

本文是npm系列的第一篇，知識很基礎，做爲一個熱身文章，若是各位已是開發熟練工了，徹底能夠跳過這篇。

1. 安裝 npm

npm 是基於 Node.js，因此咱們須要安裝 Node.js，方式有兩種：

1. Node.js 網站
2. nvm (建議) 具體文章能夠搜索下

2. 使用

2.1 如何更新npm

// 查看npm版本
npm -v
// 更新npm自身
npm install npm@latest -g
複製代碼

2.2 安裝依賴

在實際使用中咱們既安裝本地包（項目依賴），也會安裝全局包（命令行工具）。

1. 如何管理本地包

可使用下面的命令來安裝一個包：

npm install <package_name>
複製代碼

移除包能夠用指令：

npm uninstall <package_name>
複製代碼

在項目中安裝包時默認會安裝到dependencies中，咱們能夠經過如下參數來控制這個行爲：

• -P, --save-prod：記錄在dependencies中
• -D, --save-dev：記錄在devDependencies中
• -O, --save-optional：記錄在optionalDependencies中
• --no-save：不會記錄在dependencies中

除此以外還有兩個額外的參數：

• -E, --save-exact：版本號不會按照語義化記錄，會顯示具體的"1.2.3"
• -B, --save-bundle：依賴也會記錄在bundleDependencies中

如需從 package.json 文件中刪除依賴，須要在命令後添加參數:

npm uninstall --save lodash

// 經過--save-dev安裝的包，移除的時候也需指定爲--save-dev將其卸載
npm uninstall --save-dev webpack
複製代碼

2. 如何安裝全局包

全局安裝通常是用來安裝命令行工具，諸如gulp、http-server，咱們只須要在後面加上-g，好比：

npm install -g http-server
複製代碼

有時候咱們記不清某個包，想查看全部已安裝的包應該用什麼命令呢：

// depth表明遍歷的深度，若是沒有該參數，會把全部包的依賴也顯示
npm list -g --depth 0
複製代碼

2.3 package-lock.json

項目中安裝依賴後在自動生成package-lock.json文件，裏面包含安裝的依賴信息，主要是用來鎖定依賴版本，確保團隊之間安裝依賴時不會出現差別。

3. dependencies

前面提到dependencies的概念，那在npm中都有哪些依賴呢？

• dependencies 生產環境
• devDependencies 開發環境
• optionalDependencies 可選依賴
• peerDependencies 前置依賴
• bundleDependencies 待打包依賴（沒找到具體名稱，能夠看下後面的具體介紹）

3.1 dependencies && devDependencies

這兩個是咱們使用的最多的，也是最須要注意的。

假設咱們有一個插件magic-lint，它的做用是在提交commit時檢查以及格式化代碼，那麼裏面至少有prettier插件用來美化代碼，咱們須要確保其餘用戶安裝magic-lint以後能正常使用，那就要把prettier列爲dependencies。

另外咱們在開發magic-lint過程是屬於開發環境，咱們會須要jest來測試，普通用戶安裝時是不須要jest，咱們把jest列爲devDependencies後就能夠避免這樣的狀況。

若是添加--production標記，或者環境變量NODE_ENV被設置爲production, npm就不會安裝devDependencies中的模塊。

3.2 peerDependencies

那何時用peerDependencies呢？

假設咱們有一個webpack-plugin-god插件，它只是webpack的插件，並不依賴webpack，因此在dependencies或devDependencies中不會寫明webpack，但事實上它又是針對特定的webpack版本開發，這個時候咱們就能夠把webpack寫入peerDependencies中。

3.3 optionalDependencies

若是有一個包屬於可與有無的，咱們就能夠把它歸爲optionalDependencies

寫代碼時咱們能夠這樣使用可選包：

try {
  var foo = require('foo')
  var fooVersion = require('foo/package.json').version
} catch (er) {
  foo = null
}
if ( notGoodFooVersion(fooVersion) ) {
  foo = null
}

// .. then later in your program ..

if (foo) {
  foo.doFooThings()
}
複製代碼

3.4 bundleDependencies

假設咱們有一個package.json：

{
  "name": "awesome-web-framework",
  "version": "1.0.0",
  "bundledDependencies": [
    "renderized", "super-streams"
  ]
}
複製代碼

經過npm pack命令咱們能夠獲得文件awesome-web-framework-1.0.0.tgz，裏面會包含renderized和super-streams兩個依賴。

在項目中執行npm install awesome-web-framework-1.0.0.tgz，結構也會變爲：

├── node_modules
    ├── awesome-web-framework
    │   └── renderized
    │   └── super-streams
    └── xxx
複製代碼

4. 預告

下一篇將講解 npm install，看了以後，但願可以讓你驚歎一下：「哇~ 原來還能夠這樣」，我就心滿意足了。

系列彙總

• 什麼是npm系列：1、npm簡介
• 什麼是npm系列：2、install 的十八般武藝
• to be continued