开发依赖和生产依赖到底有何区别

近期有了时间作一些本身的东西，中间发现一个有趣的问题，纠正了我一直以来的错误思惟，因此发一篇博客记录一下

答案

先抛结论，若是是作普通前端项目的话，其实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里面!