開發依賴和生產依賴到底有何區別

近期有了時間作一些本身的東西，中間發現一個有趣的問題，糾正了我一直以來的錯誤思惟，因此發一篇博客記錄一下

答案

先拋結論，若是是作普通前端項目的話，其實package.json裏面的依賴包做爲開發依賴和生產依賴基本沒啥區別，就算把項目的package.json中的dependencies包所有挪到devdependencies也沒問題。若是項目是作npm包或者node服務的，會有些許差異

背景

咱們都知道package.json的dependencies對應生產環境依賴，devdependencies是開發環境依賴。用npm install的時候加上--save是添加到dependencies，--save-dev把模塊添加到devDependencies部分。

在研究gatsby.js的時候，我發現官方推薦把typescript安裝在dependencies裏面...

我就很好奇，由於在我印象裏，ts只是靜態類型檢查約束的，真正生產上線的都是js，爲何要把它放在dependencies裏面？上線的時候會不會把它也打進最終的產品中去？

因而我google了typescript應該放在哪裏，結果發現不少這樣的issue，一個是在create-react-app裏面默認就把typescript加入到了dependencies，也引發了別人的疑問，見下圖

問答

丹（redux做者，react維護者）說："無所謂，你想放哪就放哪😜"...

接下來，他跟了一段話，簡單解釋了下：

dependencies和devDependencies的區別對於Node應用服務是有意義的，由於它們其實是做爲運行時(runtime)部署的。所以，您可能不想部署devDependencies。

對於create-react-app這樣的腳手架，最終結果是生產出靜態的bundle。所以，從某種意義上說，全部依賴包都應該是「dependencies」，甚至是您使用的React或庫。由於它們僅在構建時使用。

將全部依賴包放入devDependencies可能會破壞某些在服務器上進行初始build的部署腳本。所以，將全部依賴包放到dependencies中會更容易些。

提到的issue地址👇

github.com/facebook/cr…

還有一個類似的問題 github.com/facebook/cr…

原理

dependencies和devDependencies是package.json裏面的配置，而package.json和node_modules這套依賴包加載機制是node設計出來的。

咱們若是開發一個node應用，這個後端服務須要部署上線，確實要儘可能嚴格區分dependencies和devDependencies，由於項目自己就是運行態，若是部署上線咱們不會但願把開發態的一些工具，例如測試框架等，帶到線上。

若是開發npm包也是有區別的，假設咱們開發npm包A，並把它發佈，在某個項目中引入了依賴包A，A下載的話也有自身的node_modules，若是A的依賴裏有B，B在dependencies的話就會一塊兒被下載到A的node_modules，若是是開發的話，就不會下載，這樣咱們寫npm包A的時候，要把webpack或者gulp或者jest等開發依賴放到devDependencies，來減小別人使用A時下載的包大小。

若是是普通的SPA前端項目，那確實沒啥區別，由於咱們其實是用的項目生產出來的靜態頁面文件，部署的時候部署的頁面也只是webpack打包生產出來的產品，因此依賴包放在dependencies和devDependencies沒啥區別。

可是多說一嘴：有些自動構建工程build腳本會加上--production的參數，這個時候不會拉devDependencies的包，致使build流程異常，因此丹建議咱們儘可能都放到dependencies裏面!