package.json中的开发依赖dependencies和生产依赖devDependencies到底有何区别

最近在学习webpack，中间发现一个有趣的问题，对于开发依赖和生产依赖，摸索中遇到了两种不同的说法，一种是要严格区分，一种是写在哪里都一样，打包出来的是一样的。于是查看了很多博客，对于纠结了好几天的问题，做一下总结。

我的误区

我们说 devDependencies是开发依赖 ， dependencies是生产依赖。我一直认为我们在npm run build 的时候就直接用的是生产依赖，在npm run serve的时候用的就是开发依赖。比如建议我们把对代码处理的压缩，合并等等webpack的一系列操作应该放在开发依赖里面。把真正页面用到的比如jquery、vue、vue-router等等放到生产依赖里面。于是我就有一个疑问

疑问怎么这么多？

如果npm run serve 只用开发依赖，那开发环境也需要vue等这些东西啊？怎么做到可以用的呢？具体怎么打包呢？然后我做了一个实验，我把package.json里面的devDependencies和dependencies都删除掉，再进行开发和发布测试。发现完全不受影响。还可以完整的正常打包。后来我才想明白，这个开发依赖和生产依赖只是针对与npm install。npm install的时候会把这里面的都下载下来，然后做区分。而webpack真正打包的时候，是基于页面上按需打包的，用到什么打包什么，只要我们的node_modules里面有就可以。我的误区是把这俩个过程混淆了。所以在SPA单页应用中，放在哪里都一样。唯一的是严格放，可以让开发者一眼看清楚这些插件大概的用处。

结论

来源于别人的结论：

如果是做普通前端项目的话，其实package.json里面的依赖包作为开发依赖和生产依赖基本没啥区别，就算把项目的package.json中的dependencies包全部挪到devDependencies也没问题。如果项目是做npm包或者node服务的，会有些许差别

验证

我只验证了SPA项目：我在SPA项目中，把所有包分别都写在dependencies中和devDependencies中测试了一下，打包出来的东西是一样的，包括大小内容和打包时间都一样，打包时间似乎差几毫秒，我觉得可以忽略的。

npm包和node服务未验证。可以看下下面的原理，理解下。

原理

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没啥区别。

本文参考：https://juejin.cn/post/6844904167513784333