在一个前端项目中，我们把依赖通过特有的p【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netacakge.json，其中的depen【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netdencies字段提供给npm来安装依赖【本文受版权保护】转载请注明出处：www.tangshuang.net。自从npm升级之后，就增加了依赖的控制【未经授权禁止转载】【转载请注明来源】，例如增加package-lock.js【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.neton来锁定开发时使用的依赖版本。而我们的【作者：唐霜】本文作者：唐霜，转载请注明出处。项目，很多会上到CI系统去构建，然后通过【本文受版权保护】【版权所有，侵权必究】CD系统来部署到我们的生产环境中。这就会【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。带来一个问题，我们在开发环境中使用的依赖【未经授权禁止转载】转载请注明出处：www.tangshuang.net，应不应该在CI系统中安装，因为大部分C【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。I系统都不具备开发环境那么宽松的编译环境转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】。那么到底要怎么来安排我们的开发环境依赖【版权所有】唐霜 www.tangshuang.net【作者：唐霜】、CI环境依赖和生产环境依赖？

首先理解三种依赖：【版权所有】唐霜 www.tangshuang.net

dependencies 【转载请注明来源】

本包的依赖。即当另外一个包/项目依赖你这【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】个包的时候，你的包必须依赖的其他包。np【转载请注明来源】【本文受版权保护】m在安装一个包的时候，它不单单只安装了这【关注微信公众号：wwwtangshuangnet】【转载请注明来源】个包本身，同时还安装了dependenc【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.neties里面指定的依赖。例如：

npm i databaxe【未经授权禁止转载】

你会发现，不单单databaxe这个包被【未经授权禁止转载】未经授权，禁止复制转载。安装了，databaxe这个包的pack【本文受版权保护】【转载请注明来源】age.json里面的dependenc【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.neties字段里面的包也被安装了（devDe【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netpendencies里面的包没有被安装，【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】optionalDependencies本文作者：唐霜，转载请注明出处。【本文受版权保护】 也会被安装，但是 optionalDe本文作者：唐霜，转载请注明出处。原创内容，盗版必究。pendencies 有一点不同，如果里【作者：唐霜】【本文受版权保护】面的包在安装过程中失败了，那么不会影响安【原创内容，转载请注明出处】未经授权，禁止复制转载。装过程，这个包因为安装失败而被忽略，具体【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net阅读这里本文版权归作者所有，未经授权不得转载。）。【版权所有】唐霜 www.tangshuang.net

由于我们大部分前端项目，在现阶段还是需要原创内容，盗版必究。【本文首发于唐霜的博客】通过构建工具构建的，因此，对于一个完整的本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】上线项目而言，dependecies里面【版权所有，侵权必究】转载请注明出处：www.tangshuang.net只需要放置node端的modules即可本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net，例如express等服务器依赖包，而不著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】需要把jquery等前端代码需要的包放在【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】 dependencies 里面，因为，【本文受版权保护】【未经授权禁止转载】前端代码的依赖包会被webpack等工具【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。打包进去。这些在构建阶段用到的包，可以放本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。在 devDependencies 里面本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】。

但是，对于一个组件，或者一个第三方前端包【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，你需要考虑的是，你的包被其他项目引用时本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】，会由其他项目去自己实现构建过程。你的代【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。码里面的依赖可以和该项目其他依赖的依赖共【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。用，例如前面提到的jquery，有可能你【转载请注明来源】【版权所有】唐霜 www.tangshuang.net的包和别人的包都用到了，是一个公用的依赖【本文首发于唐霜的博客】【版权所有，侵权必究】，因此，你不应该把jquery的代码打包【本文受版权保护】原创内容，盗版必究。到你自己发布的包代码中，而是作为依赖的形【本文首发于唐霜的博客】原创内容，盗版必究。式，添加到dependencies中去。本文版权归作者所有，未经授权不得转载。【本文受版权保护】这样，当别人的项目在构建时，会同时使用你【本文首发于唐霜的博客】原创内容，盗版必究。的包、别人的包、jquery去进行构建。本文版权归作者所有，未经授权不得转载。【作者：唐霜】这样保证了代码的复用和代码量的减少。

devDependencies未经授权，禁止复制转载。

本包的开发依赖。当你在开发一个包的时候，【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】你可能需要用到一些用于开发的依赖，例如w【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】ebpack，babel等。这些依赖只会原创内容，盗版必究。【本文受版权保护】在开发构建阶段（也包括你上到CI系统进行【原创不易，请尊重版权】【原创不易，请尊重版权】构建时）用到，而不会在生产环境用到。np著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】m在安装一个包时，这个包pacakge.本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netjson里面的devDependenci未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netes里面的包不会被同时安装。但你在把这个【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。包的源码克隆到本地，并准备开发时，你在项本文作者：唐霜，转载请注明出处。【本文受版权保护】目目录下执行

npm i【关注微信公众号：wwwtangshuangnet】

你就会发现，这些包被安装了。而且，这些包【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。里面的package.json里面的规定【作者：唐霜】【转载请注明来源】，也完全和本文所讲的规则一致。也就是说，著作权归作者所有，禁止商业用途转载。【本文受版权保护】虽然这些包是放在devDependenc未经授权，禁止复制转载。【原创不易，请尊重版权】ies里面，但是，它们被安装时，它们自己【未经授权禁止转载】未经授权，禁止复制转载。package.json里面的devDe未经授权，禁止复制转载。【作者：唐霜】pendencies里面的包不会被安装，【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。因为，这些是它们自己的开发依赖。当它们被【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】安装时，是被当作一个正式的第三方产品来使未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net用。

optionalDependencies

本包的可选依赖。当你在开发一个包的时候，著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。你可能希望有些包是可选的，比如，一个包由【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。AB两位同学在开发。其中A开发时由于自己本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net的习惯，使用到了一个包，但是B同学没有这【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】个习惯，他不希望自己在开发时这个多余的包【本文首发于唐霜的博客】【原创不易，请尊重版权】被下载浪费时间，这个时候，这个包应该被放【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。在optionalDependencie未经授权，禁止复制转载。【作者：唐霜】s里面。npm在安装一个包的时候，该包的未经授权，禁止复制转载。【未经授权禁止转载】optionalDependencies【未经授权禁止转载】【作者：唐霜】里面的依赖也不会被安装。但是，在开发时，【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】你执行

npm i【本文首发于唐霜的博客】

这些包还是会被安装。你可能会问，那它和d【转载请注明来源】【原创内容，转载请注明出处】evDependencies有啥区别？区【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】别在于，你可以使用参数让它们不被安装：

npm i 著作权归作者所有，禁止商业用途转载。–no-optional本文作者：唐霜，转载请注明出处。

通过这个参数，在执行npm i的时候，o未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】ptionalDependencies就著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。不会被安装了。

不同的开发环境如何正确选择一个包应该放在【作者：唐霜】【未经授权禁止转载】哪里？

• 但凡用于构建的、测试的、质量检查的，都放【转载请注明来源】转载请注明出处：www.tangshuang.net到devDependencies里面
著作权归作者所有，禁止商业用途转载。【转载请注明来源】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】
• 但凡仅用于本地开发，例如预览等，都放到o【本文首发于唐霜的博客】【原创不易，请尊重版权】ptionalDependencies里原创内容，盗版必究。未经授权，禁止复制转载。面
本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。

例如，我们经常会在本地开发时，起一个de原创内容，盗版必究。【原创不易，请尊重版权】vserver来对开发结果进行预览，但是【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。在上到CI系统时，这个功能根本不会用到，著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。所以，我们把这些依赖放到optional本文作者：唐霜，转载请注明出处。【未经授权禁止转载】Dependencies里面，而在CI系未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net统构建脚本中，一定要加上–no-optional【本文受版权保护】参数。【版权所有】唐霜 www.tangshuang.net

所以，最终总结下来，我们大致可以这么认为未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net：dependencies是给生产环境用原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。的，devDependencies是给C【作者：唐霜】【版权所有，侵权必究】I构建用的，optionalDepend【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netencies是给本地开发用的。虽然这个理转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】解有偏差，但对于对这个知识点刚刚了解的同【版权所有，侵权必究】【转载请注明来源】学来说，非常有用。