package.json管理依赖包版本详解

 更新时间:2022年07月07日 14:58:36   作者:我是leon  
本文讲述前端项目的实战中,是如何使用package.json对依赖包进行版本管理的,以及不同规则对依赖的管理会产生什么影响

npm版本号定义

版本格式:X.Y.Z[-string]其含义为:

  • X:主版本号
  • Y:次版本号
  • Z:修正版本号
  • string: 先行版本号或版本编译信息

举个例子:

6.3.2-alpha的含义为:

主版本号6,有6次不可向下兼容的更新迭代。

次版本号3,有3次小的功能迭代。6.*.* <=6.3.2的依赖声明,都可以安装此新包。

修正版本号2,有2次bug修改或其他非重大功能的修改。6.*.* <=6.3.2的依赖声明,都可以安装此新包。

先行版本号alpha,表示处理试验阶段。

扩展阅读:语义化版本 2.0.0

package.json怎么识别依赖版本

将按下述代码进行阐释:

"vue": "~2.5.22",
"vue-class-component": "^6.0.0",
"vue-router": "3.0.1",
"express": "latest",
"mongoose": "*",
  • 符号^:锁定主版本,可更新次版本号、修正版本号和先行版本号
  • 例如"vue-class-component": "^6.0.0",安装依赖时,可以安装符合6.*.* 的任意版本,只要主版本号是6即可。
  • 符号~:锁定主版本号和次版本号,可更新修正版本号和先行版本号
  • 例如"vue": "~2.5.22",安装依赖时,可以安装符合2.5.*的任意版本。
  • 空符号:锁定所有版本号
  • 例如"vue-router": "3.0.1",只能安装版本为3.0.1的依赖包。
  • 符号*:定义某个版本号范围
  • 例如vue-router": "3.0.*",可以安装3.0固定的任意版本,比如3.0.1、3.0.2。
  • latest:安装最新的稳定版本

例如"express": "latest",可以安装4.18.1 (2022.06.13最新版本)。

*:安装最新发布的版本,不一定是稳定版本

例如"mongoose": "*",可以安装6.0.0-rc2、3.9.7等。

Git URL:使用Git上发布的包

引用格式: <protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]

"test": "git+ssh://git@github.com:npm/cli.git#v1.0.27"

扩展阅读:npm docs - dependencies

不要太相信npm包的版本号

如题,这个是血的教训换来的经验。

笔者在使用system.js时,使用的版本限制是:system.js: "^6.3.2"。

在安装依赖的时候,意外安装了> 6.3.2的版本,导致项目运行出错。

原因就是system.js作者,没有按照semver规范,进行版本号命名,导致笔者的项目,引入了不可向下兼容的更新,进而使项目运行出错。

dependencies、devDependencies与peerDependencies

dependencies

生产环境中使用到的依赖,统一安装在dependencies下。

举个例子:

"dependencies": {
	"chalk": "^2.4.2",
	"commander": "^3.0.0",
	"fs-extra": "^8.1.0",
	"inquirer": "^6.5.0",
	"mem-fs": "^1.1.3",
	"mem-fs-editor": "^6.0.0",
	"shelljs": "^0.8.3"
}

上述代码,是笔者做的cli工具包的package.json中的片段。

shelljs用于操作文件,如果改在devDependencies声明,则用户安装当前工具包后,运行会报错。

因为devDependencies字段声明的依赖,在npm install 工具包时,是不会安装的。

必须在dependencies字段中声明,才会被安装。

devDependencies

生产环境不需要使用的依赖,都需要安装在peerDependencies下。

因为生产环境下,是不会安装devDependencies字段下的依赖的。

举个例子:

"devDependencies": {
	"@commitlint/cli": "^8.1.0",
	"@commitlint/config-conventional": "^8.1.0",
	"commitizen": "^4.0.3",
	"commitlint-config-cz": "^0.12.1",
	"cz-customizable": "^6.2.0",
	"standard-version": "^7.0.0"
}

上述代码,是笔者做的cli工具包的package.json中的片段。

commitizen是笔者用于规范Git提交规范的依赖包,只在开发环境中使用,所以在devDependencies中声明。

peerDependencies

当开发一些插件和工具包时,对使用方的运行环境的依赖包版本有要求,可以使用peerDependencies字段进行声明。

举个例子:

{
  "name": "tea-latte",
  "version": "1.3.5",
  "peerDependencies": {
    "tea": "2.x"
  }
}

当前工具tea-latte,依赖tea包。而且,要求tea包是主版本2。

当不满足要求时,控制台会进行报错处理。

注意

npm v7版本, peerDependencies会默认安装。

npm v3 到 npm v6版本, peerDependencies不会自动安装。

参考

npm Docs

语义化版本 2.0.0

以上就是package.json管理依赖包版本详解的详细内容,更多关于package.json管理依赖包版本的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript格式化日期时间的方法和自定义格式化函数示例

    JavaScript格式化日期时间的方法和自定义格式化函数示例

    JavaScript默认的时间格式我们一般情况下不会用,所以需要进行格式化,下面说说我总结的JavaScript时间格式化方法
    2014-04-04
  • openlayers实现图标拖动获取坐标

    openlayers实现图标拖动获取坐标

    这篇文章主要为大家详细介绍了openlayers实现图标拖动获取坐标,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JS如何判断对象是否包含某个属性

    JS如何判断对象是否包含某个属性

    这篇文章主要介绍了JS如何判断对象是否包含某个属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 基于JavaScript实现抽奖系统

    基于JavaScript实现抽奖系统

    这篇文章主要为大家详细介绍了基于JavaScript实现抽奖系统,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 原生JS获取元素的位置与尺寸实现方法

    原生JS获取元素的位置与尺寸实现方法

    下面小编就为大家带来一篇原生JS获取元素的位置与尺寸实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 支持多浏览器(IE、Firefox、Opera)剪切板复制函数_脚本之家修正版

    支持多浏览器(IE、Firefox、Opera)剪切板复制函数_脚本之家修正版

    有朋友要剪切板复制函数,可网上的好多代码都是不能运行的,各种其它符号,导致了脚本的不可运行,脚本之家站长特整理了下,修正了错误。
    2008-12-12
  • JS父页面与子页面相互传值方法

    JS父页面与子页面相互传值方法

    这篇文章主要介绍了使用JS在父页面和子页面间相互传值方法,子页面可以是window.open弹出的,也可以是iframe框架中的页面,需要的朋友可以参考下
    2014-03-03
  • js中作用域的实例解析

    js中作用域的实例解析

    本文主要通过几个实例对js中作用域进行详细解析,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Bootstrap模态框水平垂直居中与增加拖拽功能

    Bootstrap模态框水平垂直居中与增加拖拽功能

    最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,通过查阅资料才解决此问题,下面小编给大家分享解决思路
    2016-11-11
  • 使用JavaScript实现轮播图特效

    使用JavaScript实现轮播图特效

    这篇文章主要为大家详细介绍了使用JavaScript实现轮播图特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论