你应该知道的几类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中匿名函数,函数直接量和闭包
May 08 Javascript
奇妙的js
Sep 24 Javascript
javascript function、指针及内置对象
Feb 19 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
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
关于IIS php调用com组件的权限问题
2012/01/11 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python内存管理机制原理详解
2019/08/12 Python
django ajax发送post请求的两种方法
2020/01/05 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
八一建军节活动方案
2014/02/10 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS