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

、

*-loader

loader系列等等，详细的可见我的 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)
},