通俗的說，爲何要是 devDependencies

糾結，dependencies 和 devDependencies 有什麼區別？我使用的包應該放到什麼地方？上網找資料，大神羣諮詢。獲得的答案是：

• 生產環境用到的放在 dependencies中;
• 開發環境用到的放在 devDependencies中;
• 這是規範，遵照就能一塊兒玩，不遵照就本身玩;

Emmm...大神就是喜歡說一些菜逼聽不懂的話。但我就是想知道：若是我不遵照，會怎麼樣？

提出這個問題的朋友應該都發現：不管放到dependencies中，仍是devDependencies，運行 npm install 時都會安裝，沒有差異，團隊合做也OK，照玩不誤啊。什麼叫只能本身玩？把koa放到devDependencies中有沒有問題？把webpack放到dependencies又會怎麼樣？

直到我要把本身的開源項目發佈到 npm 時，才明白了大神的意思。

生產環境 or 開發環境？

先來看個問題：小明使用 webpack 開發 web項目 的環境，是什麼環境？

答案是開發環境，但同時也是生產環境。

相對於 小明的項目 是 開發環境，但相對 webpack，就是生產環境。

從實踐中理解二者的區別

用開源項目 debug 項目舉例。它的 package.json 相關內容以下：

{
  "dependencies": {
    "ms": "^2.1.1"
  },
  "devDependencies": {
    "brfs": "^2.0.1",
    "browserify": "^16.2.3",
    "coveralls": "^3.0.2",
    "istanbul": "^0.4.5",
    "karma": "^3.1.4",
    "karma-browserify": "^6.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-mocha": "^1.3.0",
    "mocha": "^5.2.0",
    "mocha-lcov-reporter": "^1.2.0",
    "xo": "^0.23.0"
  }
}

使用debug (npm install debug)

咱們在使用debug時，須要這樣用（大部分用戶的使用方式）

手動建立一個項目

npm init
npm install debug --save

查看 node_modules 目錄中的內容

-- node_modules
  -- debug
  -- ms

能夠看出， npm 只安裝了 debug 和 ms(debug的dependencies包含的package)。
由於如今的環境相對於 debug 來講，是生產環境，因此 npm 只安裝了 debug 的生產依賴。

開發debug (git clone debug)

做爲 debug 項目的 開發者 或 二次開發者 ，纔會這樣用。

git clone https://github.com/visionmedia/debug.git
cd debug
npm install

查看node_modules

-- node_modules
  -- ms
  -- brfs
  -- xo
  -- connect
  -- date-format
  -- ...... 共653個package

能夠看出， npm 安裝了 dependencies、devDependencies 以及 它們的dependencies。
由於如今的環境相對於debug來講，是開發環境，因此npm安裝了debug的全部依賴，以及它們的生產依賴。

對比以上結果，能夠看出，通常狀況下開發環境所須要安裝的依賴遠多於生產環境。

很是規玩法（挑戰規範，知其因此然）

根據以上的實踐分析，總結出一些玩法：

1. 若是全部依賴包都是開放環境要用到的包，而且不會發布到npm讓別人使用（如webpack打包完成後發佈dist的前端項目），由於生產環境再也不須要依賴這些包(甚至都不須要nodejs)，這時你把依賴放到哪裏，徹底隨你開心。但爲了不有人說閒話，應該放到devDependencies中。
2. 若是全部依賴包都是生產環境要用到的包，而且不會發布到npm讓別人使用。如web項目經常使用的express和koa，是生產環境運行必須的包，你也能夠隨便放 （驚不驚喜意不意外），在生產環境中，部署生產環境時使用npm install，同樣會把全部包安裝下來，不影響生產環境的運行。爲了不有人說閒話，仍是要放到dependencies中。
3. 若是既有開發依賴又有生產依賴，而且不會發布到npm讓別人使用。你仍是能夠隨便放。npm install 會安裝全部包。但就會產生問題，生產環境安裝了開發環境的包，這個問題會死人嗎？不太清楚，但項目是能夠運行的。要避免這些額外的消耗，就要區分兩種包的位置。在生產環境中使用npm install --production，則只會安裝dependencies中的依賴。外翻篇：若是你開心，也能夠把開發依賴包放到devDependencies，生產依賴包放到dependencies，生產環境就用npm install --only=dev，這樣只會安裝devDependencies中的生產依賴。
4. 若是是一個要發佈到npm的項目，生產依賴就必定要放在dependencies中（缺失會致使運行出錯）；開發依賴應該放在devDependencies中，這樣能夠不浪費用戶資源，若是放到dependencies中，用戶端就會安裝不少多餘的依賴，浪費大量資源，增長版本衝突機率。

總結

簡單總結，當生產依賴和開發依賴分別放到不一樣位置時，會致使的問題：

玩法	dependencies	devDependencies	內部項目	做爲npm包發佈
規範	生產依賴	開發依賴	-	-
開發依賴放在dependencies中	生產依賴、開發依賴	-	浪費生產環境資源	浪費大量用戶資源
生產依賴放在devDependencies中	-	生產依賴、開發依賴	浪費生產環境資源、部署方式怪異	用戶沒法正常運行
反着放	開發依賴	生產依賴	部署方式怪異	浪費大量用戶資源、用戶沒法正常運行

能夠看出，在內部項目中，只要團隊能玩得轉（也不關心生產環境的資源浪費），能夠不用太在乎規範。但若是是要發佈到npm的項目，甚至是開源項目，就要特別注意。本身能夠亂來，但給用戶的，應該是最好的。