package-lock.json那些事

已于 2022-08-05 16:56:10 修改
阅读量1.2k 收藏 2
点赞数
分类专栏： 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
zhichaosong
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
package.json与package-lock.json
web18334137065的博客
06-10 173
记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）,不能锁定后面的小版本，package-lock.json 是在 `npm install`时候生成一份文件。记录了node_modules目录下所有模块（包）的名称、版本号、下载地址、及这个模块又依赖了哪些依赖。npm5以前，没有package-lock.json这个文件。package.json文件会记录你项目中所需要的所有模块。当你执行npm install的时候，node会先从package.json文件中读取所有dep
npm package-lock的管理
MichaelAn的博客
02-13 1413
npm package-lock的管理 package-lock.json文件很容易产生冲突，我们先来看看为什么需要 package-lock.json. package-lock.json 作用 package-lock.json is automatically generated for any operat...
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 Yarn yarn global add fix-package-lock 运行使用： fix-package-lock fix-package-lock也可以使用npx运行： npx fix-package-lock 建于 一个更好的child_process
推荐：web-streams-polyfill —— 您的Web Streams解决方案
最新发布
gitblog_00032的博客
06-04 493
推荐：web-streams-polyfill —— 您的Web Streams解决方案 web-streams-polyfillWeb Streams, based on the WHATWG spec reference implementation项目地址:https://gitcode.com/gh_mirrors/we/web-streams-polyfill 项目介绍 web-str...
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 1377
在分析之前一定要 了解 node环境下npm这个包管理工具, 因为在使用npm进行本地安装就会生成 pacage.json 这个文件(内部记录了我们安装的包的版本信息)。这里又引入一个本地安装的概念,
很多人上来就删除的package-lock.json，还有这么多你不知道的（深度内容）
前端下午茶
03-24 8822
作者：wuwhs原文：https://segmentfault.com/a/11900000396844600. 前言看完本文，你将从整体了解依赖版本锁定原理，package-lock.j...
package-lock.json的作用
why404
02-09 1万+
背景 不知道大家平时在开发中有没有注意到，你的项目中有两个文件： package.json package-lock.json 应该很多人平时都不会去关注这两个文件有啥关系吧！今天就给大家简单地讲讲吧，这样下次面试官问起时，大家也可以装装杯了~~ 例子 背景 在package.json中，vue的版本是^2.6.14。 "vue": "^2.6.14", ^的意思是，假如过几天Vue在大版本 2下更新了小版本 2.6.15，那么当你npm install时Vue会自动升级为2.6.15 引.
基于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....
package.json中的版本和package-lock.json的作用
01-07
而且当你的 npm 版本升级到 5.X.X 版本以上的时候，对应目录下还是自动生成一个 package-lock.json 文件，这个文件的作用又是什么呢。博主根据网上资料简单说明一下。 1.package.json 版本 dependencies: { react:...
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 ( '...
npm报错之package-lock.json found. 问题和淘宝镜像源过期问题
touyigeyueliang的博客
02-13 1776
关于解决package-lock.json found. 问题和淘宝镜像源过期问题的方法如上，在阅读过程中如若有误，劳请指正！
npm install 是否会更新package-lock.json
HYEHYEHYE的博客
09-23 2016
npm 并不是一开始就是按照现有这种规则制定的。 5.0.x 版本： 不管 package.json 中依赖是否有更新，npm install 都会根据 package-lock.json 下载。针对这种安装策略，有人提出了这个 issue[6] ，然后就演变成了 5.1.0 版本后的规则。 5.1.0 版本后： 当 package.json 中的依赖项有新版本时，npm install 会无视 package-lock.json 去下载新版本的依赖项并且更新 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...
package-lock.json是用来干啥的呢？
Lam's IT Story
08-04 2435
用一句话来概括很简单，就是锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。 以下引用别人的详细介绍 根据官方文档，这个package-lock.json 是在 `npm install`时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。 它有什么用呢？因为npm是一个用于管理package之...
package-lock.json 文件的作用
weixin_44090040的博客
07-23 1380
同一个项目第一次cnpm install的时候还可以启动，过一段时间，把node_modules删掉，重新cnpm install，发现项目启动报错了。奇怪，项目代码和之前一样，一点都没改动。查其原因，发现是package.json文件的依赖模块版本号没有固定， package.json 如上图所示 。这里有个^,安装的时候会安装对应的最新版本，如果这期间该模块有更新，再次安装的时候版本不一样，所以项目报错了。 解决办法： 通过npm5之后安装文件之后会多出一个package-lock.json的文.
删除所有node_modules和package-lock配置文件
GMLGDJ的博客
03-09 1405
npkill概述：一个可以轻松找到并删除旧的和沉重的node_modules文件夹的插件（也可以用来删除其他文件）我们可以直接使用以下命令来删除当前目录下所有的 node_modules。通过以下命令删除其他文件如 package-lock.json。有一部分paceage-lock不是npm生成的删除时需要注意。本章就介绍到这里更多使用请看文章开头的官网！首先我们通过以下命令安装npkill插件。
package-lock.json和package.json
08-12
package-lock.json和package.json是在Node.js项目中使用的两个重要文件。 package.json是一个描述项目依赖关系和其他元数据的文件。它包含了项目的名称、版本号、作者、许可证等信息，还列出了项目所需的所有依赖包及其版本范围。当你运行npm install命令时，它会根据package.json文件中的依赖关系下载并安装所需的软件包。 package-lock.json是在运行npm install命令时自动生成的文件。它是一个锁定文件，确保每次安装相同的依赖包版本。它记录了每个依赖包的确切版本号以及它们之间的依赖关系树。这样，当多个开发者在不同的环境中运行npm install时，他们都会得到相同的依赖包版本，避免了由于不同版本引起的问题。 总结起来，package.json是开发者手动编辑的文件，用于定义项目的元数据和依赖关系。而package-lock.json是自动生成的锁定文件，用于确保每次安装相同的依赖包版本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值