请将你的npm依赖版本锁定

17,325 阅读6分钟

前言

来了新同事,拉同一个项目到本地安装依赖之后跑不起来,但是其他三台电脑运行着都没问题。
接下来就是逐步定位问题,首先排除了代码问题,因为最新代码在其他同事不同系统的电脑上都没正常运行,进过百度/谷歌/github issue搜索报错、反复重新拉项目、重启电脑、重装环境等一系列的的操作之后,终于定位到大概是依赖包版本更新的问题。
项目里一共有90+依赖,主要的几个依赖都是手动锁死版本的,但有个包没有锁死,而且前段时间应该是发布了次版本更新,跟别的包兼容有问题所以报了错。跟运行正常项目的node_moduels中版本对比,改了之后果然项目就跑起来了。

npm包管理原理

在思考解决方案前,首先了解下npm包管理及依赖版本管理的原理。这些都是通过package.json文件实现的 当你使用npm安装一个包(并保存它)或者更新一个包的时候,package.json里就自动添加了一条信息,包括包名和其版本。npm默认安装最新版本,然后在其版本号之前添加一个^符号。比如^1.2.12,它表明最低应使用1.2.12版本。并且在这之上,拥有相同大版本号的任何版本都是OK的。毕竟小版本和bugfix版本不会对使用造成任何影响,所以用任何相同大版本的更高级版本都很安全。

  • 符号^:表示主版本固定的情况下,可更新最新版。例如:vuex: "^3.1.3",3.1.3及其以上的3.x.x都是满足的。
  • 符号~:表示次版本固定的情况下,可更新最新版。如:vuex: "~3.1.3",3.1.3及其以上的3.1.x都是满足的。
  • 无符号:无符号表示固定版本号,例如:vuex: "3.1.3",此时一定是安装3.1.3版本。

版本依赖为什么需要锁定

没有版本锁定的情况下,在执行每次npm i的时候,对应的版本前都有个^符号。也就是未固定版本的依赖如果有了次版本更新或者修订版本更新,会自动安装对应的最新版。 在这种情况下,你再次install时安装的包的版本可能与前次不一样,具体的,你可以到package-lock.json中查看实际的包版本。 例如: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不应该发生变化。但很多开源库的开发者并没有严格遵守这个发布原则,导致了上面的这个问题。

为了在不同的环境下生成相同的node_modules,引入版本依赖锁定就尤为必要了。

更换/管理npm源

首先要说的是,很多同学可能习惯使用cnpm,因为安装速度确实比npm快不少,但在版本依赖锁定方案中,最基础的一条就是:不要使用cnpm,因为cnpm,是不支持依赖版本锁定的。

也即是说,无论你的项目中有package-lock.json、npm-shrinkwrap.json还是yarn-lock.json文件,执行cnpm i安装依赖的时候他们都只是摆设,都只会根据package.json文件进行安装。所以通过cnpm安装依赖是不能避免上面问题的。而且有很多网友反馈cnpm会有依赖包丢失的问题。

但是使用npm避不开的一个问题就是安装速度,实在太慢了。这里我们可以通过手动更换npm源和nrm的方式实现使用npm命令的同时,依然享受cnpm的安装速度。

手动更换npm

设置npm源: npm config set registry [url]

查看确认: npm config get registry

使用nrm

安装nrm

npm i nrm -g

查看可选的源

nrm ls

有的运行命令时,会报错:

image.png

需要修改下报错的地方,点击打开C:\Users\liang\AppData\Roaming\npm\node_modules\nrm\cli.js:17:20

修改:

//const NRMRC = path.join(process.env.HOME, '.nrmrc'); (删除)
const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');

再运行nrm ls,显示出列表,报错解决

image.png

在列出的列表中,带*的是当前使用的源,上面的输出表明当前源是官方源。

切换到某个源:nrm use xx

例如切换到淘宝源:nrm use taobao

增加源(添加企业内部的私有源或者其他源):

nrm add [registryName] [url]

删除源:

nrm del <registryName>

测试某个源的相应时间:

nrm test taobao

依赖版本锁定方案

大概有这么几条方案:

package.json中固定版本

这是最直接的,可以在package.json中写入固定版本号,也就是去掉版本号前面的~或者^,或者安装的时候加上--save-exact参数。但这样只能锁定最外一层的依赖,也就是这个依赖本身的其他依赖版本是不受控制的。所以不太推荐。

npm + package-lock.json

第一次npm i的时候会根据当前node_modules目录生成一个固定版本号的package-lock.json文件,后面如果安装新增的依赖,会自动更新这个文件。但如果需要更新当前某个依赖的版本号并锁定到package-lock.josn中,需要手动修改package.json中对应的版本或者指定依赖的版本号安装:npm i xxx@x.x.x

npm + npm-shrinkwrap.json

这种方式锁定版本,每次依赖有新增或者版本更新之后,要手动自行npm shrinkwrap来生成或者更新版本锁定文件。

yarn+yarn-lock.json

yarn-lock.json与package-lock.josn原理类似,习惯用yarn命令的可以采取这种方式。

npm ci

npm ci 类似于 npm install,常在用于自动化环境,如测试平台,持续集成和部署。区别是:

  • 该项目必须有一个 package-lock.json 或 npm-shrinkwrap.json。

  • 如果 package-loc 中的依赖项与 package.json 的依赖项不匹配,npm ci 则将退出并显示错误,而不是更新 package-lock。

  • npm ci 只能一次安装整个项目:使用此命令无法添加单个依赖项。

  • 如果 node_modules 已经存在,它将在 npm ci 开始安装之前自动删除。

  • 它永远不会写入 package.json 或任何包锁:安装基本上是冻结的。

npm ci必须存在package-lock.json且依赖版本和package.json匹配时才会安装依赖,否则报错,如此可强制开发者在持续集成前先在本地解决依赖版本的一致性问题。

yarn --frozen-lockfile

yarn --frozen-lockfilenpm ci类似,需要存在yarn-lock.json文件

推荐阅读:

移动端真机调试指南-对调试说easy
Vue SEO的四种方案
TypeScript + Vite + Vue3 + Element Plus 项目初探
震惊,SourceMap居然失效了?
请将你的npm依赖版本锁定