你应该知道的几类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 相关文章推荐
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
JS实现简单日历特效
Jan 03 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 16 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
WEB前端设计师常用工具集锦
2014/12/09 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
使用Python写个小监控
2016/01/27 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
python 弧度与角度互转实例
2020/04/15 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
Order by的几种用法
2013/06/16 面试题
初中英语教学反思
2014/01/25 职场文书
高中英语教学反思
2014/02/04 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
某某同志考察材料
2014/05/28 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
出国签证在职证明范本
2014/11/24 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL