npm的package.json中devDependencies和dependencies区别是什么？

devDependencies和dependencies的区别

最近发现，很多公司的小伙伴也好，网上的很多文章也好，包括上半年的我也好，都对devDependencies和dependencies并没有那么在意，年初做gulp重构公司的前端工程也一股脑的把所有npm包打到devDependencies。

那么，究竟有什么区别呢？

大部分观点：
devDependencies用于本地环境开发时候，所以，所有的不会在发布时候打包进线上代码的npm包都放在这里，命令是：npm i -D ***。比如像这些包：babel-core、babel-eslint、等babel系列，autoprefixer、webpack、webpack-dev-server、koa、*-loaderloader系列等等，详细的可见我的 Github源码

dependencies用户发布环境，所以，不会包含本地开发任何的包,比如：react、react-redux、react-router-dom等，详细同样可见我的 Github源码

这样做有什么好处呢？

这样做的话，我们在发布的时候，可以将dependencies里的所有包，打包成一个vendor.js文件，因为这个文件都是三方库，代码几乎不太会改变，这样，这部分代码就能很好的被游览器缓存利用了；而对于项目相关的JS代码，愉快得迭代就好了。

实现细节

以webpack为例子，在配置文件中，编辑：

const pkg = require('./package.json');
.
.
.
entry: {
    app: path.resolve(__dirname, 'app/index.jsx'), // 这行是项目相关的JS代码
    // 将第三方依赖（node_modules）的库打包
    vendor: Object.keys(pkg.dependencies)
},

完整项目地址

戳我 >>