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

岁月是把杀猪刀

devDependencies和dependencies的区别

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

那么,究竟有什么区别呢?

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

dependencies用户发布环境,所以,不会包含本地开发任何的包,比如:reactreact-reduxreact-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)
},

完整项目地址

戳我 >>

阅读 8.4k

岁月是把杀猪刀
这是一个帅小伙儿写前端的技术博客

もっと遠くにあるはずの、とこか、僕はそこに行きたいんだ

1.6k 声望
385 粉丝
0 条评论

もっと遠くにあるはずの、とこか、僕はそこに行きたいんだ

1.6k 声望
385 粉丝
宣传栏