[前端工程化] | npm semver 的踩坑记录

154 阅读2分钟

笔者目前使用的包管理工具为 「pnpm」

「qiankun」 之前,对于大型项目的解耦,一般来说是采用 「iframe」 技术集成,但还有一种方法是采用通过 「package」 的方式进行接入,这种方式下,对 npm semver 「version」 的理解和控制异常重要。技术发展后,我们关注的是解耦后项目的 「镜像版本」 ,对于 package 的版本,在 「敏捷模型」 的开发模式下,我们甚至一个版本写到项目结束🤣。笔者对这个概念的了解亦浅,因此在某些依赖场景踩了一些坑,本文以此记录。

踩坑场景

笔者在公网上有两个 「package」

  1. www.npmjs.com/package/@si…
  2. www.npmjs.com/package/@si…

upload_pgnxbgga96h3nfglmir75n3bfgw8gggh.png

如图所示 「react-utils」 依赖 「fe-utils」, 在笔者最初的想法中,react-utils 导出了 fe-utils 的所有方法,除了一些特定在 「react」 中使用的方法外,大部分情况只需要升级 fe-utils 通用方法包即可,下图是笔者在 「react-utils」 中的早期依赖写法:

upload_cez23srywl5fpatbh0lf26jxo3eqz6x3.png

然而在今日更新了 fe-utils ,并通过 「github action」 发布到 npm 后:

upload_p2jap9v73um6m2rc2fjedwffzctqwelr.png

在项目中执行 pnpm up ,奇怪的事情发生了,在项目中的 react-utils 的上游依赖依然是 fe-utils@0.04 版本,一度怀疑是 pnpm 中 不存在的 **「幽灵依赖」**🤣,删除依赖和 .lock 文件重新安装亦如此。

重拾 npm semver

先放个 「semver」 版本的定义: upload_kr5j5j1oawgzsd5ksnpsz5fxkzid3mt1.png

「npm semver」 这套依赖管理方法中,有两个特殊的符号 「~」「^」:

  1. ~ : 如果有次版本号,它会选择更新为当前次版本号的最新修订版本;如果没有,则更新为当前最新的次版本号。
  2. ^ : 它会匹配当前 【主版本,次版本,修订版】「从左往右」 的第一个 「非零元素」 的最大版本号,如果主版本是0,则匹配主版本为 0 的最大版本,如果 次版本 也是 0,若修订版不为0,则匹配为当前修订版本;若没有修订版则匹配为当前 0.0 的最新修订版 假设有一个 package 有如下的 version
  • 0.0.1
  • 0.0.2
  • 0.0.3
  • 0.1.1
  • 0.1.2
  • 1.0.1
  • 1.0.2
  • 1.1.1
  • 1.1.2

那么,会有如下的选择

  1. ~0: 0.1.2
  2. ~0.0: 0.0.3
  3. ~0.0.2: 0.0.3
  4. ~0.1: 0.1.2
  5. ~1: 1.1.2
  6. ~1.0: 1.0.2
  7. ^0: 0.1.2
  8. ^0.0: 0.0.3
  9. ^0.0.2: 0.0.2
  10. ^0.1: 0.1.2
  11. ^1: 1.1.2
  12. ^1.0: 1.1.2

阅读资料过程中发现 「0」 作为主版本号 是比较特殊的存在,因此也推荐 从 「1」 开始作为主版本号。 对于笔者遇到的坑,将版本改为 「"^0"」 即可更新到最新的 0.0.5,或者 设置为 * 也是一个解法

此外,npm 官方也有版本计算器,意外的好用。链接:semver.npmjs.com/」

upload_yq2bym4phqkfobyceswvv15ec5f5w1c1.png