package-lock.json那些事

已于 2022-08-05 16:56:10 修改
阅读量1.5k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 前端 文章标签： 前端 package.json package-lock 版本 npm
于 2022-08-05 12:03:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhichaosong/article/details/119682473

package-lock.json 在多人开发时经常冲突，该如何解决才能保证线上质量？package.json 如何定义才能符合我们的预期？
本文通过实验来探究包版本管理最佳实践，测试版本：node v12.20.0 (npm v6.14.8)

文章目录

一、问题

  1. 什么时候用到
  2. 什么时候更新
  • 正常 npm i 会更新 lock 文件吗
  • npm i xxx -S 会更新 lock 文件吗
  • 删掉一个包会更新吗
  • package.json 锁死后，lock 文件还会更新吗
  • lock文件是1.1.0，package.json从^1.0.0 改到 ^1.0.1
  1. 怎么强制更新
  2. cnpm、pnpm 影响

二、说明

2.1 package.json 规则

  • 如果写入的是 〜0.13.0，则只更新补丁版本：即 0.13.1 可以，但 0.14.0 不可以。
  • 如果写入的是 ^0.13.0，则要更新补丁版本和次版本：即 0.13.1、0.14.0、依此类推。
  • 如果写入的是 0.13.0，则始终使用确切的版本。

2.2 package-lock.json 作用

  • npm 版本是 5+，会自动生成 package-lock.json
  • 简单来说就是锁定安装模块的版本号，例如下图锁定二级依赖项的版本，保证版本稳定
    在这里插入图片描述

三、实验

3.1 正常新安装

  • 我们用 pdfjs-dist 这个包来做测试，目前最新版 2.15.349
    在这里插入图片描述
    在这里插入图片描述

  • 空项目的 package.json 如下

{
  "name": "test",
  "dependencies": {
  }
}

  • 安装一个新包
    npm i pdfjs-dist -S

  • 安装结果，lock 文件为 2.15.349 版本
    在这里插入图片描述

{
  "name": "test",
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "dommatrix": {
      "version": "1.0.3",
      "resolved": "http://bnpm.byted.org/dommatrix/-/dommatrix-1.0.3.tgz",
      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww=="
    },
    "pdfjs-dist": {
      "version": "2.15.349",
      "resolved": "http://bnpm.byted.org/pdfjs-dist/-/pdfjs-dist-2.15.349.tgz",
      "integrity": "sha512-EeCfqj6xi4/aegKNS7Bs+TCg3Y5gmKmG0s/5xXI0PqWW66x+Nm7iFXBpVcup7HnR8sNDm+5NESfFr8T6DeWp9Q==",
      "requires": {
        "dommatrix": "^1.0.3",
        "web-streams-polyfill": "^3.2.1"
      }
    },
    "web-streams-polyfill": {
      "version": "3.2.1",
      "resolved": "http://bnpm.byted.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q=="
    }
  }
}

3.2 确定版本

  • 我们选取最近两年下载量最高的版本 2.12.313 写死
    在这里插入图片描述
{
  "name": "test",
  "dependencies": {
    "pdfjs-dist": "2.12.313"
  }
}

npm i 安装结果

  • pdfjs-dist 使用了固定的 2.12.313 版本
  • 竟然没有其他依赖，这可能也是使用量高的原因？
    在这里插入图片描述
  • package-lock.json 结果
{
  "name": "test",
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "pdfjs-dist": {
      "version": "2.12.313",
      "resolved": "http://bnpm.byted.org/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz",
      "integrity": "sha512-1x6iXO4Qnv6Eb+YFdN5JdUzt4pAkxSp3aLAYPX93eQCyg/m7QFzXVWJHJVtoW48CI8HCXju4dSkhQZwoheL5mA=="
    }
  }
}

3.3 补丁版本升级

{
  "name": "test",
  "dependencies": {
    "pdfjs-dist": "~2.12.313"
  }
}
  • npm i 安装结果
    • package-lock.json 结果没有变化，因为 lock 文件锁死

在这里插入图片描述

  • npm upate 结果也没有变化，因为 2.12 下面只有 313 一个补丁版本

在这里插入图片描述

3.4 次版本升级

{
  "name": "test",
  "dependencies": {
    "pdfjs-dist": "^2.12.313"
  }
}

3.4.1 正常安装

  • npm i 安装结果
    • package-lock.json 因为版本锁死，依然没有变化

在这里插入图片描述

3.4.2 强制更新

  • npm update 更新结果
    • package-lock.json 根据 package.json 更新到最新
    • package.json 也相应的更新

在这里插入图片描述

  • package-lock.json 文件更新结果
{
  "name": "test",
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "dommatrix": {
      "version": "1.0.3",
      "resolved": "http://bnpm.byted.org/dommatrix/-/dommatrix-1.0.3.tgz",
      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww=="
    },
    "pdfjs-dist": {
      "version": "2.15.349",
      "resolved": "http://bnpm.byted.org/pdfjs-dist/-/pdfjs-dist-2.15.349.tgz",
      "integrity": "sha512-EeCfqj6xi4/aegKNS7Bs+TCg3Y5gmKmG0s/5xXI0PqWW66x+Nm7iFXBpVcup7HnR8sNDm+5NESfFr8T6DeWp9Q==",
      "requires": {
        "dommatrix": "^1.0.3",
        "web-streams-polyfill": "^3.2.1"
      }
    },
    "web-streams-polyfill": {
      "version": "3.2.1",
      "resolved": "http://bnpm.byted.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q=="
    }
  }
}
  • package.json 文件更新结果
    在这里插入图片描述

3.4.3 次版本允许更新，并修改补丁版本

  • 将 package.json 改为 "pdfjs-dist": "^2.12.500"
{
  "name": "test",
  "dependencies": {
    "pdfjs-dist": "^2.12.500"
  }
}
  • npm i 安装结果
    • package.json 无变化
    • package-lock.json 中更新为 2.15.349 最新版

这里需要特别注意的是，从确定版本改为次版本更新的时候（2.12.313 => ^2.12.313），是不会更新 lock 文件的；
但是从次版本更新改动补丁版本（^2.12.313 => ^2.12.500），就会触发 lock 更新；

在这里插入图片描述
在这里插入图片描述

3.5 安装新包

我们探索两种情况下安装新包：

  • 确定版本
  • 次版本

3.5.1 确定版本安装新包

  • 执行命令：npm i react -S
  • package.json 文件更新结果：新增一行 "react": "^18.2.0"
    在这里插入图片描述
  • package-lock.json 文件更新结果：pdfjs-dist 版本不受影响，新增 3 个 react 依赖包
    在这里插入图片描述
{
  "name": "test",
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "http://bnpm.byted.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
    },
    "loose-envify": {
      "version": "1.4.0",
      "resolved": "http://bnpm.byted.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
      "requires": {
        "js-tokens": "^3.0.0 || ^4.0.0"
      }
    },
    "pdfjs-dist": {
      "version": "2.12.313",
      "resolved": "http://bnpm.byted.org/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz",
      "integrity": "sha512-1x6iXO4Qnv6Eb+YFdN5JdUzt4pAkxSp3aLAYPX93eQCyg/m7QFzXVWJHJVtoW48CI8HCXju4dSkhQZwoheL5mA=="
    },
    "react": {
      "version": "18.2.0",
      "resolved": "http://bnpm.byted.org/react/-/react-18.2.0.tgz",
      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
      "requires": {
        "loose-envify": "^1.1.0"
      }
    }
  }
}

3.5.2 删除新安装包

  • package.json 文件删除一行 "react": "^18.2.0"
  • 执行命令：npm i
  • package-lock.json 文件更新结果：pdfjs-dist 版本不受影响，删除 3 个 react 依赖包在这里插入图片描述

3.5.3 次版本安装新包

  • 初始情况：package.json 改为次版本更新，但是 package-lock.json 文件依然为 2.12.313
{
  "name": "test",
  "dependencies": {
    "pdfjs-dist": "^2.12.313"
  }
}
  • 执行命令：npm i react -S
  • package.json 文件更新结果：新增一行 "react": "^18.2.0"
{
  "name": "test",
  "dependencies": {
    "pdfjs-dist": "^2.12.313",
    "react": "^18.2.0"
  }
}
  • package-lock.json 文件更新结果：同 「3.5.1 确定版本安装新包」，说明 lock 文件锁包的有效性

3.6 cnpm 影响

  • 初始状态：package.json 允许次版本更新 "pdfjs-dist": "^2.12.313"，package-lock 文件写死 2.12.313 版本
  • 执行命令：cnpm i，node_modules 包没有变动
  • 执行命令：rm -rf node_modules/ 删除已安装包
  • 执行命令：cnpm i，node_modules 包更新到 2.15.349 最新版本，无视 package-lock.json 的锁定同时也不更新该文件
    在这里插入图片描述
  • 执行命令：npm i，node_modules 包还原到 2.12.313 最新版本，package-lock.json 锁定有效
    在这里插入图片描述
  • 结论：cnpm 不支持（忽略）依据 package-lock.json 文件安装模块，默认依赖 package.json 进行安装

四、如何解决冲突

当两个同学都改动了 package.json 的时候，package-lock.json 文件的更新可能达到上千行的冲突，这时候如何处理？

  • 方式1：删掉 package-lock.json，npm i 重新安装？
    • 这种方式最不可取，相当于 lock 文件完全失效，全部重新安装
  • 方式2：手动合并？
    • 风险太高，integrity 字段 sha-512 校验如果改错会导致安装失败
  • 最佳实践
    • 将 package-lock.json 还原到最近一个没有冲突的版本（例如上一版 master），解决 package.json 的冲突后（这个手动解决的风险可控），npm i 自动更新 lock 文件

五、结论

  1. 持续使用 npm，保证 lock 文件的有效性
  2. package-lock.json，不能手动修改，不能删除，降低风险
  3. package.json 锁死版本降低误更新的可能性（同时继续使用 lock 文件，双重保险）

参考文档

  • http://nodejs.cn/learn/the-package-lock-json-file
  • https://zhuanlan.zhihu.com/p/89093696
  • https://stackoverflow.com/questions/44297803/what-is-the-role-of-the-package-lock-json
  • https://docs.npmjs.com/cli/v8/configuring-npm/package-lock-json
package-lock.json 与 yarn.lock 的深度解析：从原理到实践
嗨，欢迎来到我的 CSDN 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
06-03 1180
package-lock.json 与 yarn.lock 的深度解析：从原理到实践
记package-lock引发的一次事故
skysys的研究小屋
01-21 1535
转载自： http://shymean.com/article/%E8%AE%B0package-lock%E5%BC%95%E5%8F%91%E7%9A%84%E4%B8%80%E6%AC%A1%E4%BA%8B%E6%95%85 去年因为升级npm包导致在开发环境崩了(相关记录)。昨天在生产环境遇见了一个更严重的问题：线上环境升级了thrift，其升级包的某个依赖未正确安装，导致node服务启动失败，线上走静态容灾两个多小时~ 经过排查和总结，发现之前对于pageack-lock的机制理解存在误区，因此
web-streams-polyfill:[已弃用]使用https
05-06
网络流-polyfill Web流，基于WHATWG规范参考实现。 [已弃用]使用 链接 用法 对于node.js / browserify用户： var streams = require ( "web-streams-polyfill" ) ; var readable = new streams . ReadableStream ; // Or, in ES6 import { ReadableStream } from "web-streams-polyfill" ; 要用作polyfill，请在主脚本之前在html中包含dist/polyfill.min.js文件。 < script src =" /path/to/polyfill.min.js " > </ script > < script type =" text/javascript " > var read
前端开源库-web-streams-polyfill
08-30
前端开源库-web-streams-polyfill基于whatwg spec参考实现的web流polyfill、web流
sd-streams:Web Streams Standard实现和polyfill
05-09
Stardazed Web流实现 的完全兼容实现和polyfill以及相关类型。 该实施目前完全符合截至2019年1月的所有标准更新。 该存储库是所谓的monorepo，它包含几个包，这些包一起构成一组相关功能。 当前包括： :backhand_index_pointing_right: —流标准的完整实现，不依赖于在所有（合理）现代浏览器和Node中运行的依赖项。 :backhand_index_pointing_right: —帮助程序功能，用于创建自定义版本的fetch和Response类型，以使流标准的任何（模拟）实现都可以直接与fetch配合使用，包括使用流进行上传。 :backhand_index_pointing_right: —来自Encoding标准的TextDecoderStream和TextEncoderStream的实现， TextDecoderStream两个标准链接在一起以获得最佳兼容性和可重用性。 :backhand_index_pointing_right: -所述的实施CompressionStream和Decompressi
Vue项目中常见的依赖及其他问题解决方案
GmhVue的博客
09-27 1334
在Vue项目中，我们通常使用npm或者yarn来管理依赖包。当我们安装或升级依赖包时，可能会遇到版本冲突的问题。在开发过程中，我们常常需要与后端API进行交互。有时候，我们可能会遇到依赖包加载慢或加载失败的情况。这可能是由于网络问题或者依赖包服务器不稳定造成的。在Vue项目的前端开发过程中，我们经常会遇到各种依赖和其他问题。本文将介绍一些常见的问题，并提供相应的解决方案和源代码示例。在Vue项目中，我们经常需要加载并显示图片。以上是在Vue项目中常见的依赖及其他问题的解决方案。希望这些内容对你有所帮助。
基于C#，读取package-lock.json文件，并下载tgz到指定位置
06-12
背景：介于工作环境的问题，我们要把前端vue项目中所用到的各个依赖导入到另一个全新的内网仓库中，所以我就基于C#语言简单的写了个windows程序，实现根据vue项目的package-lock.json文件里相关依赖包的下载路径来...
将yarn.lock转换为package-lock.json，反之亦然-JavaScript开发
05-26
install npm install -g synp命令行用法yarn.lock => package-lock.json yarn＃确保node_modules文件夹目录并已更新synp --source-file /path/to/yarn.lock＃将创建/ path / to / package-lock.json package-lock....
fix-package-lock：通过重新生成来修复package-lock.json
02-03
通过重新生成来修复package-lock.json 入门 先决条件 使用npm 5在Node v9上进行了测试。 正在安装 全局安装fix-package-lock将安装fix-package-lock命令： # Using npm npm install -g fix-package-lock # Using ...
node-tgz-downloader:根据package-lock.json文件下载所有的node_modules
04-29
本地package-lock.json文件 网址到package-lock.json 包装名称 本地package.json文件 网址到package.json 搜索关键词 安装 npm install node-tgz-downloader -g 用法 来自代码： const downloader = require ( '...
lock-walker:在package-lock.json中可视化依赖树
05-17
可视化package-lock.json依赖关系树并使其可搜索。 在尝试我们的托管版本。 这个应用程式是由 + + 所建立，完全在浏览器中执行。 我们不会通过网络发送您的package-lock.json 。 背景 我们维护许多开源项目。 但是...
JS-Polyfills:一组polyfill，可在JavaScript的标准库中重新创建许多功能
05-06
JS Polyfills 这个polyfills集合重新创建了许多JavaScript 5.1标准库，例如parseInt，Array.prototype.pop和Math.abs。 大多数开发人员将不需要此库，因为每个JavaScript实现都已经包含了这些功能。 但是，如果您要构建一个新JavaScript解释器，那么此50多个polyfill的集合将减少您需要编写的本机代码函数的数量。 局限性： 目前，不支持Date或RegExp。 由于现有的和，未涵盖JSON。 性能相当差，特别是对于String的子字符串和Array的移位/不移位。 仅以JavaScript 5.1为目标，许多现有的polyfill可用于更高版本中引入的功能。
package-lock.json
letterTiger的博客
05-15 1万+
package.json确定依赖的范围，package-lock.json将这个范围精确到具体版本。主要是为了解决在各个环境中得到确定的node_modules，如果只依赖package.json因为该文件声明的是直接依赖的范围，它无法将直接依赖固定在某个特定版本，也无法声明依赖的依赖。所以需要引入package-lock.json文件来达到我们固定node_modules的目的。。npm7之后的版本生成的package-lock是可信的。...
package.json和package-lock.json分析
m0_69497411的博客
03-23 2164
在分析之前一定要 了解 node环境下npm这个包管理工具, 因为在使用npm进行本地安装就会生成 pacage.json 这个文件(内部记录了我们安装的包的版本信息)。这里又引入一个本地安装的概念,
package-lock.json文件详解
热爱前端的大三在校生
05-17 7303
在执行npm install下载包的时候，我们会发现目录中会出现package.json和package-lock.json文件，刚好最近我也在研究package的一些东西，对lock文件里的一些字段有点生疏了，写篇文章记录一下lock文件的一些知识。
关于package-lock.json
weixin_43112703的博客
04-28 1309
https://segmentfault.com/a/1190000044098267
package.json和package-lock.json依赖包文件
weixin_42844704的博客
06-19 3451
如果 package.json 的 semver-range version 和 package-lock.json 中版本兼容(package-lock.json 版本在 package.json 指定的版本范围内)，即使此时 package.json 中有新的版本，执行 npm install 也还是会根据 package-lock.json 下载。指定版本：比如 1.2.2 ，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。latest：安装最新版本。
package-lock.json能否直接删除？
最新发布
Java&Develop的博客
05-14 424
package-lock.json能否直接删除？
npm的package.json和package-lock.json更新策略
热门推荐
Hello博客
04-19 2万+
如果你之前用npm 安装产生了package-lock.json，后面的人用cnpm来安装你的package.json、package-lock.json安装可能会跟你安装的依赖包不一致，这是因为cnpm 不受package-lock.json影响，只会根据package.json进行下载。 npm、cnpm与package-lock.json的操作 npm install package-lo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值