前端運行時依賴（dependencies）和開發依賴（devDependencies）區分

參考文章：https://mp.weixin.qq.com/s/cSHCKRdMPLKyPP_pOH3nkg

之前一直對package.json中的dependencies和devDependencies抱有疑問，爲何依賴還要分爲運行時（前者）和開發依賴（後者）呢？並且在安裝一個依賴時，如何判斷是應該放在dependencies仍是devDependencies呢？

文章中說npm的依賴共分爲如下五類（見npm官方文檔https://docs.npmjs.com/files/package.json#dependencies）：

• dependencies
• devDependencies
• peerDependencies
• bundledDependencies
• optionalDependencies

1、dependencies

這是npm最基本的依賴，寫在一個簡單的對象中，將依賴程序包映射到版本範圍。比較經常使用，命令爲

npm install/i xxx@version -S/--save

若是不指定版本號version，則默認安裝最新版本。

2、devDependencies

顧名思義devDenpendencies是開發依賴，也就是開發中所使用的的依賴，線上生產環境上並不須要他們。命令爲

npm install/i xxx -D/--save-dev

npm官方文檔將它定義爲開發中所使用的外部的測試或者文檔框架。

 文章中提到，開發依賴的目的是爲了減小在安裝依賴時node_modules的體積，提高安裝依賴的速度，節省線上及其的硬盤資源以及部署上線的時間。那麼那些依賴能夠劃分爲開發依賴呢？

一、構建工具

點名webpack、webpack-cli、rollup（其實我沒用過）等等。構建工具是爲了生成生產環境的代碼，在線上使用的代碼實際上是他們工做的結果，也就是說在線上時，並不須要他們，所以他們能夠歸爲開發依賴。

固然他們衍生出來的插件，如xxx-webpack-plugin，也屬於開發依賴。

二、預處理器

指的是對源代碼進行必定的處理並生成最終代碼的工具。常見的有css中的less、scss、sass、stylus，js中的typescript、coffee-script、babel等等。

以 babel 爲例，經常使用的有兩種使用方式。其一是內嵌在 webpack 或者 rollup 等構件工具中，通常以 loader 或者 plugin 的形式出現，例如 babel-loader。其二是單獨使用（小項目較多），例如 babel-cli。babel 還額外有本身的插件體系，例如 xxx-babel-plugin。相似地，less 也有與之對應的 less-loader 和 lessc。這些都算做開發依賴。

在 babel 中還有一個注意點，那就是 babel-runtime 是 dependencies 而不是 devDependencies。

三、測試工具

固然在線上時是用不到測試工具的，所以他們納入開發依賴。經常使用如chai、e2e等等。

四、其餘

最後一類很難歸納，是開發時須要使用的，實際上顯示要麼是已經打包成最終代碼了，要麼是不須要了。好比 webpack-dev-server 支持開發熱加載，線上是不用的；babel-register 由於性能緣由也不能用在線上。其餘還可能和具體業務相關。

3、peerDependencies、bundleDependencies、optionalDependencies

做爲npm包的使用者，前兩項其實已經足夠平常使用了，後三項是做爲npm包的發佈者須要考慮使用的，在此不作過多贅述，若是有興趣能夠查閱原文章以及npm的文檔。