你应该知道的几类npm依赖包管理详解


Posted in Javascript onOctober 06, 2017

前言

大家都知道在一个Node.js项目中,package.json几乎是一个必须的文件,它的主要作用就是管理项目中所使用到的外部依赖包,同时它也是npm命令的入口文件。下面话不多说了,来一起看看详细的介绍把。

npm 目前支持以下几类依赖包管理:

  • dependencies
  • devDependencies
  • peerDependencies
  • optionalDependencies
  • bundledDependencies / bundleDependencies

如果你想使用哪种依赖管理,那么你可以将它放在package.json中对应的依赖对象中,比如:

"devDependencies": {
 "fw2": "^0.3.2",
 "grunt": "^1.0.1",
 "webpack": "^3.6.0"
 },
 "dependencies": {
 "gulp": "^3.9.1",
 "hello-else": "^1.0.0"
 },
 "peerDependencies": { },
 "optionalDependencies": { },
 "bundledDependencies": []

下面我们一一来看:

dependencies

应用依赖,或者叫做业务依赖,这是我们最常用的依赖包管理对象!它用于指定应用依赖的外部包,这些依赖是应用发布后正常执行时所需要的,但不包含测试时或者本地打包时所使用的包。可使用下面的命令来安装:

npm install packageName --save

dependencies是一个简单的JSON对象,包含包名与包版本,其中包版本可以是版本号或者URL地址。比如:

{ 
 "dependencies" :{ 
 "foo" : "1.0.0 - 2.9999.9999", // 指定版本范围
 "bar" : ">=1.0.2 <2.1.2", 
 "baz" : ">1.0.2 <=2.3.4", 
 "boo" : "2.0.1", // 指定版本
 "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0", 
 "asd" : "http://asdf.com/asdf.tar.gz", // 指定包地址
 "til" : "~1.2", // 最近可用版本
 "elf" : "~1.2.3", 
 "elf" : "^1.2.3", // 兼容版本
 "two" : "2.x", // 2.1、2.2、...、2.9皆可用
 "thr" : "*", // 任意版本
 "thr2": "", // 任意版本
 "lat" : "latest", // 当前最新
 "dyl" : "file:../dyl", // 本地地址
 "xyz" : "git+ssh://git@github.com:npm/npm.git#v1.0.27", // git 地址
 "fir" : "git+ssh://git@github.com:npm/npm#semver:^5.0",
 "wdy" : "git+https://isaacs@github.com/npm/npm.git",
 "xxy" : "git://github.com/npm/npm.git#v1.0.27",
 }
}

devDependencies

开发环境依赖,仅次于dependencies的使用频率!它的对象定义和dependencies一样,只不过它里面的包只用于开发环境,不用于生产环境,这些包通常是单元测试或者打包工具等,例如gulp, grunt, webpack, moca, coffee等,可使用以下命令来安装:

npm install packageName --save-dev

举个栗子:

{ "name": "ethopia-waza",
 "description": "a delightfully fruity coffee varietal",
 "version": "1.2.3",
 "devDependencies": {
 "coffee-script": "~1.6.3"
 },
 "scripts": {
 "prepare": "coffee -o lib/ -c src/waza.coffee"
 },
 "main": "lib/waza.js"
}

prepare脚本会在发布前运行,因此使用者在编译项目时不用依赖它。在开发模式下,运行npm install, 同时也会执行prepare脚本,开发时可以很容易的测试。

至此,你理解了--save和--save-dev的区别了吗?

peerDependencies

同等依赖,或者叫同伴依赖,用于指定当前包(也就是你写的包)兼容的宿主版本。如何理解呢? 试想一下,我们编写一个gulp的插件,而gulp却有多个主版本,我们只想兼容最新的版本,此时就可以用同等依赖(peerDependencies)来指定:

{
 "name": "gulp-my-plugin",
 "version": "0.0.1",
 "peerDependencies": {
 "gulp": "3.x"
 }
}

当别人使用我们的插件时,peerDependencies就会告诉明确告诉使用方,你需要安装该插件哪个宿主版本。

通常情况下,我们会在一个项目里使用一个宿主(比如gulp)的很多插件,如果相互之间存在宿主不兼容,在执行npm install时,cli会抛出错误信息来告诉我们,比如:

npm ERR! peerinvalid The package gulp does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer gulp-cli-config@0.1.3 wants gulp@~3.1.9
npm ERR! peerinvalid Peer gulp-cli-users@0.1.4 wants gulp@~2.3.0

运行命令npm install gulp-my-plugin --save-dev来安装我们插件,我们来看下依赖图谱:

├── gulp-my-plugin@0.0.1
└── gulp@3.9.1

OK, Nice!

注意,npm 1 与 npm 2 会自动安装同等依赖,npm 3 不再自动安装,会产生警告!手动在package.json文件中添加依赖项可以解决。

optionalDependencies

可选依赖,如果有一些依赖包即使安装失败,项目仍然能够运行或者希望npm继续运行,就可以使用optionalDependencies。另外optionalDependencies会覆盖dependencies中的同名依赖包,所以不要在两个地方都写。

举个栗子,可选依赖包就像程序的插件一样,如果存在就执行存在的逻辑,不存在就执行另一个逻辑。

try {
 var foo = require('foo')
 var fooVersion = require('foo/package.json').version
} catch (er) {
 foo = null
}
if ( notGoodFooVersion(fooVersion) ) {
 foo = null
}

// .. then later in your program ..

if (foo) {
 foo.doFooThings()
}

bundledDependencies / bundleDependencies

打包依赖,bundledDependencies是一个包含依赖包名的数组对象,在发布时会将这个对象中的包打包到最终的发布包里。如:

{
 "name": "fe-weekly",
 "description": "ELSE 周刊",
 "version": "1.0.0",
 "main": "index.js",
 "devDependencies": {
 "fw2": "^0.3.2",
 "grunt": "^1.0.1",
 "webpack": "^3.6.0"
 },
 "dependencies": {
 "gulp": "^3.9.1",
 "hello-else": "^1.0.0"
 },
 "bundledDependencies": [
 "fw2",
 "hello-else"
 ]
}

执行打包命令npm pack, 在生成的fe-weekly-1.0.0.tgz包中,将包含fw2和hello-else。 但是值得注意的是,这两个包必须先在devDependencies或dependencies声明过,否则打包会报错。

总结

以上就是目前npm支持的依赖管理,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 设置文本框中焦点的位置
Nov 20 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
vue-cli构建项目使用 less的方法
Oct 04 #Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 #Javascript
浅谈angular2路由预加载策略
Oct 04 #Javascript
浅谈Angular路由复用策略
Oct 04 #Javascript
React-Native之定时器Timer的实现代码
Oct 04 #Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 #Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 #Javascript
You might like
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
pygame实现飞机大战
2020/03/11 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
explicit和implicit的含义
2012/11/15 面试题
毕业生个人求职信范文分享
2014/01/05 职场文书
项目经理任命书
2014/06/04 职场文书
飞越疯人院观后感
2015/06/09 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
导游词之河北邯郸
2019/09/12 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
浅谈Python数学建模之线性规划
2021/06/23 Python