package.json中的devdependencies和dependencies的区别

网上有很多关于devdependencies 和 dependencies区别的文章，看了下，都没有说到重点。

其实官网已经说得非常清楚了

https://docs.npmjs.com/cli/v6/configuring-npm/package-json#devdependencies

如果还是不理解，下面这个文章很好

https://www.yuque.com/docs/share/963e29e1-3314-453f-b417-d8ce543b78cc

我的理解是，如果不是发布npm包，例如我们常用的就是clone源码，然后npm install，这样的话，这两个地方包含的依赖都会被正确下载到 node_modules 里。——意思就是，没区别。

但是，如果你要发布npm包，那就要注意了，这种情况如果有人想使用你的npm模块，npm install只会下载在dependencies的依赖。举个例子，你做了个日历插件，用到了element.js，没有把它放在dependencies，而是放在了devdependencies，那别人使用你的日历插件的时候就会报错，因为在dependencies找不到element.js。

另一种，假如你把“无用”的依赖放在了dependencies，那会导致使用的时候下载多余的文件。还是这个例子，你做了个日历插件，为了方便使用了webpack来打包，那这个webpack就应该放在devdependencies，放在dependencies虽然不会导致错误，但是别人使用的时候明明不需要却下载了webpack。所以，这里的“无用”是指开发时需要，但是上线以后就不用了。

总结一下，如果不是发布npm包，devdependencies和dependencies没有区别，你的依赖放其中哪个都行。当然，为了规范，还是不要乱写。所以不管是不是要发布npm包，都要做好规范。那么如何判断一个依赖放哪里呢？element.js是一个组件库，项目一直需要它，放dependencies；而webpack是为了方便打包上线，打包上线后就用不到了，放devdependencies。

常见的几种情况：

devdependencies：babel-core、babel-eslint、等babel系列，autoprefixer、webpack、webpack-dev-server、*-loader loader系列等等

dependencies：react、vue、react-redux、react-router-dom