编程崽

登录

一叶在编程苦海沉沦的扁舟之上,我是那只激情自射的崽

npm 中依赖的版本问题

npm 中依赖的版本问题

版本号规则

先说一下版本号,当前业界基本有两种版本号规则。

Semver(语义化版本)

当前使用的版本规范通常基于Semver(语义化版本),官方网站

比软是某依赖的版本号为:3.4.5,则这三个数字的意义依次是:

  • 3:主版本号,又称大版本,当依赖做了不兼容的 API 修改,会更新此项。
  • 4:次版本号,又称小版本,当依赖做了向下兼容的功能性新增,会更新此项。
  • 5:修正号,当依赖做了向下兼容的问题修正,会更新此项。

年代版本号

另一种流行的版本号规范是年代版本号,比如 Ubuntu,每年会发布两个版本,比如21年4月发布的21.04是一个版本,10月份会发布21.10。偶数年的.04版本会最终成为 LTS,长期维护版本;奇数年的版本和.10版本则只维护半年,里面包含各种最新的软件组件,方便喜欢尝新的用户。

前端常见的软件和库,包括 node.js、Angular、Electron 也用这种方式确定版本号。

npm依赖的版本指令

npm安装的依赖和对应版本号,都会记录在package.json文件的dependenciesdevDependencies两个对象中。

首次安装依赖时的版本记录规则

如果直接使用常规的 npm install [依赖名称] 的方式安装,那如果在package.json中查看依赖的版本,基本都是类似 "^1.2.0"的写法,为什么前面还有个上标记^?

package.json中记录版本依赖的版本号,有以下几种规则:

  • "axios": "^1.2.0":要求大版本为1,小版本>= 2即可,使用 npm install [依赖名称] 是此规则。

  • "axios": "~1.2.0":要求大版本为1,小版本为2,修订版本>= 0即可。

  • "axios": "1.2.0":必须使用1.2.0版本的axios,使用 npm install [依赖名称]@1.2.0 是此规则。

package-lock.json 的作用

正常情况,一个已开发一段时间的项目,把package.json文件拿出来放在一个空文件夹中,执行 npm install,那么得到的 node_modules中的依赖们的版本,和原项目中的对应依赖的版本是不同的,都是符合版本规则的设定、但版本又稍微新一些。

这是因为依赖会不断更新,自己刚开始开发项目时安装的版本已经是旧的了。

正常来说也没问题,因为符合我们设定的规则,版本不一样问题也不大,但我在这方面吃过亏后,就不感觉问题不大了。

我们公司自己项目,在某次构建部署后,发现element-ui的message消息通知功能发生了小变化:多次使用message消息通知时,在页面上不会原地替换旧消息的内容,而是依次向下错位展示,出现多个message框,被领导注意到专门询问。

这就是因为,虽然element-ui版本升级后,api的用法没有变化,但在UI有了微调,就是上面那个。

导致这个的原因,就是我把package-lock.json文件设置为了git忽略文件。

使用npm安装依赖后,会出现一个 package-lock.json 文件,这个文件算作是package.json的补充,作用超级大。

它会记录安装依赖时的具体版本,包括我们依赖的依赖的版本,当我们线上构建、换了电脑、新增了成员,需要使用npm install安装全部依赖时,有这个文件在,就能保证所有依赖的版本和之前的一模一样。

如果没有这个文件,那么npm就会安装 package.json版本规则内的最新版本的依赖,就可能出现我上面的那个小问题。

上面那个问题,我也是把本地的package-lock.json 添加到git中,推送,再重新构建、部署,问题就解决了。

升级依赖

上面提到的package-lock.json就专门是用来防止依赖版本变化的,这里为啥又要升级依赖?因为依赖也有bug啊,又时候必须要升级到bug已解决的那个版本,才能友好的使用。

使用install重新安装依赖

直接再次使用安装指令来安装,会升级到package.json中axios版本规则中的最新版本。

package.json、package-lock.json中的axios相关的版本号(包括axios的依赖)都发生变化。

指令:

sh 复制代码
npm install axios

使用update升级依赖

直接再次使用安装指令来安装,同样是会升级到package.json中axios版本规则中的最新版本。

只package-lock.json中的axios相关的版本号(包括axios的依赖)发生变化,package.json中没有任何变化。

指令:

sh 复制代码
npm update axios

总结

建议正常安装依赖,保留package-lock.json文件,如果需要升级依赖,使用上面两种方案均可,个人建议使用install重新安装。