npm的lock机制解析


Posted in Javascript onJune 20, 2019

npm是什么

npm是一个包管理工具,开源作者可以把开源包发布在平台上供其他人下载使用。前端的同学基本都使用过npm,这里就不做过多介绍。日常工作中npm的主要用途就是根据项目的package.json使用npm install去安装依赖。

npm install可以说是我们使用最频繁的一个指令。在npm5版本之前,npm install会根据package.json指定的依赖版本去进行安装。但往往package.json中指定的是一个版本范围,例如:

"dependencies": {
  "packageA": "^2.0.0"
},

以上这个 ^2.0.0 指定的范围是版本号大于等于2.0.0且大版本号为2。即2.6.10这个是符合的,而3.0.0和1.0.0这种是不符合的。
这样的范围指定会导致一个问题:A新建了一个项目,生成了上面这份package.json文件,但A安装依赖的时间比较早,此时packageA的最新版本是2.1.0,该版本与代码兼容,没有出现bug。后来B克隆了A的项目,在安装依赖时packageA的最新版本是2.2.0,那么根据语义npm会去安装2.2.0的版本,但2.2.0版本的API可能发生了改动,导致代码出现bug。

这就是package.json会带来的问题,同一份package.json在不同的时间和环境下安装会产生不同的结果。

理论上这个问题是不应该出现的,因为npm作为开源世界的一部分,也遵循一个发布原则:相同大版本号下的新版本应该兼容旧版本。即2.1.0升级到2.2.0时API不应该发生变化。

但很多开源库的开发者并没有严格遵守这个发布原则,导致了上面的这个问题。

lock机制

一个新的事物的诞生都是为了解决一个历史问题

基于这种状况,npm5推出了lock机制。在使用npm5.0.0之后的版本时,npm install后会自动生成package-lock.json文件,该文件记录了当前这次install所安装的依赖版本号。

例如当package.json的依赖如下:

"dependencies": {
  "vue": "^2.0.0"
 },

install后自动生成的package-lock.json会指定安装vue2.6.10版本(当前最新)

"dependencies": {
  "vue": {
   "version": "2.6.10",
   "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
   "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
  }
 }

package-lock.json相当于本次install的一个快照,它不仅记录了package.json指明的直接依赖的版本,也记录了间接依赖的版本。

如果我们想在不同环境和不同时间下每次install时安装相同版本的依赖,我们就可以把package-lock.json带上。

当package.json和package-lock.json同时存在时,npm install会去检测package-lock.json指定的依赖版本是否在package.json指定的范围内。如果在,则安装package-lock.json指定的版本。如果不在,则忽略package-lock.json,并且用安装的新版本号覆盖package-lock.json。

举个例子:

// package.json
"dependencies": {
  "vue": "^2.0.0"
 }

// package-lock.json
"dependencies": {
  "vue": {
   "version": "2.1.0",
   "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.1.0.tgz",
   "integrity": "sha1-KTuj76rKhGqmvL+sRc+FJMxZfj0="
  }
 }

这种情况下package-lock.json指定的2.1.0在^2.0.0指定的范围内,npm install会安装vue2.1.0版本。

// package.json
"dependencies": {
  "vue": "^2.2.0"
 }

// package-lock.json
"dependencies": {
  "vue": {
   "version": "2.1.0",
   "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.1.0.tgz",
   "integrity": "sha1-KTuj76rKhGqmvL+sRc+FJMxZfj0="
  }
 }

这种情况下package-lock.json指定的2.1.0不在^2.2.0指定的范围内,npm install会按照^2.2.0的规则去安装最新的2.6.10版本,并且将package-lock.json的版本更新为2.6.10。

值得注意的是npm5一发布时并不是采取这种install逻辑,在npm5.0到npm5.6之间install的逻辑发生了多次变更,而在npm5.6之后一直沿用当前这种逻辑。

npm ci

npm5之后的lock机制满足了要求锁版本的开发者们的需要,我们只需要拿到一份package-lock.json就可以知道要安装的依赖的具体版本号。但细心的同学会发现当package-lock.json指定的版本号不在package.json指定的范围内时,package-lock.json就会被更新覆盖。这可不利于我们去维持版本的固定。

因此后续npm也推出了npm ci的指令来解决这一问题,npm ci和npm i的不同之处在于:当package-lock.json指定的依赖版本不在package.json指定的依赖版本范围内时,npm会报错并取消安装。

npm的lock机制解析

这样我们就不怕在package-lock和package.json不一致时发生覆盖更新。

总结

在npm5.6以后我们就可以放心大胆地使用package-lock.json文件来锁版本,而在构建部署时可以使用npm ci安装命令来防止npm install的覆盖更新问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
express如何解决ajax跨域访问session失效问题详解
Jun 20 #Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 #Javascript
如何在微信小程序中实现Mixins方案
Jun 20 #Javascript
js JSON.stringify()基础详解
Jun 19 #Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 #jQuery
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 #Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 #Javascript
You might like
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
ThinkPHP5&5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
javascript中Object使用详解
2015/01/26 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
详细介绍Python函数中的默认参数
2015/03/30 Python
常用python编程模板汇总
2016/02/12 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
公司企业表扬信
2014/01/11 职场文书
餐厅筹备计划书
2014/04/25 职场文书
学生会干部任命书
2015/09/21 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
Python进程池与进程锁之语法学习
2022/04/11 Python