參考文章：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
一、dependencies
這是npm最基本的依賴，寫在一個簡單的對象中，將依賴程序包映射到版本范圍。比較常用，命令為
npm install/i xxx@version -S/--save
如果不指定版本號version，則默認安裝最新版本。
二、devDependencies
顧名思義devDenpendencies是開發依賴，也就是開發中所使用的的依賴，線上生產環境上並不需要他們。命令為
npm install/i xxx -D/--save-dev
npm官方文檔將它定義為開發中所使用的外部的測試或者文檔框架。
文章中提到，開發依賴的目的是為了減少在安裝依賴時node_modules的體積，提升安裝依賴的速度，節省線上及其的硬盤資源以及部署上線的時間。那么那些依賴可以划分為開發依賴呢？
1、構建工具
點名webpack、webpack-cli、rollup（其實我沒用過）等等。構建工具是為了生成生產環境的代碼，在線上使用的代碼其實是他們工作的結果，也就是說在線上時，並不需要他們，因此他們可以歸為開發依賴。
當然他們衍生出來的插件，如xxx-webpack-plugin，也屬於開發依賴。
2、預處理器
指的是對源代碼進行一定的處理並生成最終代碼的工具。常見的有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。
3、測試工具
當然在線上時是用不到測試工具的，因此他們歸入開發依賴。常用如chai、e2e等等。
4、其他
最后一類很難概括，是開發時需要使用的，實際上顯示要么是已經打包成最終代碼了，要么是不需要了。比如 webpack-dev-server 支持開發熱加載，線上是不用的；babel-register 因為性能原因也不能用在線上。其他還可能和具體業務相關。
三、peerDependencies、bundleDependencies、optionalDependencies
作為npm包的使用者，前兩項其實已經足夠日常使用了，后三項是作為npm包的發布者需要考慮使用的，在此不做過多贅述，如果有興趣可以查閱原文章以及npm的文檔。