npm 依赖版本号中 `^` 和 `~` 到底有什么区别?

前言

Axios被爆存在投毒风险,需要尽快规避使用0.30.4和1.14.1版本,这正好是一个活生生的例子,帮助大家理解 ^~ 在实际项目中的影响,在查看 package.json 时,都会看到依赖版本号前面带着 ^~ 符号,比如:

json 复制代码
{
  "dependencies": {
    "axios": "^0.21.0",
    "lodash": "~4.17.20",
    "vue": "^3.2.0"
  }
}

你有没有想过:这两个符号到底代表什么?它们的区别是什么?

今天我们就来彻底搞清楚这个问题。

一、先了解语义化版本(Semver)

在讲 ^~ 之前,我们必须先理解 npm 采用的语义化版本规范(Semantic Versioning)。

一个标准的版本号格式是:

复制代码
Major.Minor.Patch
主版本.次版本.补丁版本

1.2.3 为例:

字段 含义 什么时候变
1(Major) 主版本号 破坏性变更(Breaking Changes)时递增
2(Minor) 次版本号 新增向下兼容的功能时递增
3(Patch) 补丁版本号 修复向下兼容的 Bug时递增

理解了这个,下面就好说了。

二、^(插入符)--- 锁定主版本号

^ 是 npm 的默认行为 。当你执行 npm install axios 时,写入 package.json 的就是 ^ 前缀。

规则:主版本号不变,允许次版本和补丁版本升级。

复制代码
^1.2.3  →  >=1.2.3  且  <2.0.0

示例

写法 允许安装的范围 能装 不能装
^1.2.3 1.2.3 ~ 1.x.x 1.2.41.9.0 2.0.0
^2.0.0 2.0.0 ~ 2.x.x 2.1.02.99.99 3.0.0

⚠️ 特殊情况:主版本为 0

当主版本号是 0 时,^ 的行为会变得更保守

复制代码
^0.21.0  →  >=0.21.0  且  <0.22.0   (只允许补丁更新)
^0.0.3   →  >=0.0.3   且  <0.0.4    (完全锁死)

因为在 semver 规范中,0.x.x 代表不稳定版本,任何次版本的变化都可能是破坏性的,所以 npm 在这里做了特殊处理。

三、~(波浪符)--- 锁定主版本 + 次版本号

规则:主版本号和次版本号都不变,只允许补丁版本升级。

复制代码
~1.2.3  →  >=1.2.3  且  <1.3.0

示例

写法 允许安装的范围 能装 不能装
~1.2.3 1.2.3 ~ 1.2.x 1.2.41.2.99 1.3.0
~4.17.20 4.17.20 ~ 4.17.x 4.17.21 4.18.0

~^ 更保守,它只接受 bug 修复级别的更新。

四、一图对比

复制代码
版本号:Major.Minor.Patch

^1.2.3                          ~1.2.3
  │                               │
  ├── 锁定 Major                  ├── 锁定 Major + Minor
  ├── Minor 可升级 ✅              ├── Minor 不可升级 ❌
  └── Patch 可升级 ✅              └── Patch 可升级 ✅
  
  范围:1.2.3 ~ 1.x.x             范围:1.2.3 ~ 1.2.x
  更宽松,更新更多                   更保守,只收 bug 修复

五、实际场景理解

假设你的 package.json 中有这么一行:

json 复制代码
"axios": "^1.2.3"

当你(或你的同事、CI/CD)执行 npm install 时,npm 会在 ^1.2.3 的范围内选择当前可用的最新版本来安装。

  • 如果此时 axios 最新版是 1.6.0,就会装 1.6.0
  • 如果此时 axios 最新版是 2.0.0,仍然只会装 1.x.x 的最新版

如果改为:

json 复制代码
"axios": "~1.2.3"
  • 如果此时 axios 最新版是 1.2.8,就会装 1.2.8
  • 如果此时 axios 最新版是 1.3.0,仍然只会装 1.2.x 的最新版

六、其他常见写法

除了 ^~,你可能还会见到这些:

写法 含义
1.2.3 精确版本,只装这个版本
* 任意版本(危险,不建议)
>=1.2.3 大于等于 1.2.3 的任意版本
1.2.x 等同于 ~1.2.0
1.x 等同于 ^1.0.0

七、那到底该用哪个?

场景 建议
大多数项目 使用 ^(npm 默认),信任社区遵守 semver
对稳定性要求极高 使用 ~,只接受补丁更新
线上环境要绝对可控 使用精确版本,或依赖 package-lock.json 锁版本

最佳实践 :无论用 ^ 还是 ~,都要把 package-lock.json 提交到 Git 仓库。它会精确锁定每个依赖的实际安装版本,确保团队所有人和 CI/CD 环境安装的版本完全一致。

八、实战案例:Axios 的版本策略建议

情况一:项目使用 0.*.* 版本的 Axios

如果你的 package.json 中写的是 "axios": "^0.21.0",根据前面讲的规则,^0.21.0 的实际范围是 >=0.21.0 且 <0.22.0,行为和 ~ 一致,最多只会更新到 0.21.x。只要你用的不是 0.30.4 这类已知有问题的版本,基本可以放心,不需要额外修改。

情况二:项目使用 1.*.* 版本的 Axios

如果你的 package.json 中写的是 "axios": "^1.2.0",那范围就是 >=1.2.0 且 <2.0.0。这意味着:一旦有团队成员删除了 package-lock.json 后重新 npm install,就有可能安装到 1.14.1 等存在问题的版本。

建议 :对于 1.*.* 版本的 Axios,将版本前缀从 ^ 改为 ~,例如将 "axios": "^1.2.0" 改为 "axios": "~1.2.0",这样即使丢失了 lock 文件,也只会在 1.2.x 范围内更新,大大降低风险。

这个案例也再次说明了一点:package-lock.json 一定要提交到仓库,同时对关键依赖使用 ~ 可以提供额外的安全网。

总结

  • ^:宽松策略,锁主版本号,允许 Minor 和 Patch 更新
  • ~:保守策略,锁主版本 + 次版本号,只允许 Patch 更新
  • 主版本为 0 时,^ 会自动变保守,和 ~ 行为接近
  • 实际项目中 package-lock.json 才是真正的版本锁,^~ 只在 npm install 没有 lock 文件时起作用
相关推荐
谷谷地图下载器11 分钟前
全球、台湾省的无水印·街景数据(离线数据),专为可视化项目定制,支持国产化
javascript·c++·3d·arcgis·sqlite
万少14 分钟前
如果你要自动化操作浏览器,Kimi-WebBridge可能适合你
前端·javascript·后端
韩曙亮36 分钟前
【错误记录】flutter attach 附加设备 执行报错 ( 附加设备注意事项 )
android·javascript·flutter·flutter attach
倾颜44 分钟前
React 自定义 Hook 实战:把 AI Chat 的会话流和滚动体验从组件中拆出来
前端·react.js·next.js
vipbic1 小时前
从一句话需求到可交互草图,我用 AI 设计了一个团队组件共享平台
前端
小小前端--可笑可笑1 小时前
【Web 流媒体三部曲之一】直播、点播与 WebRTC 是什么?
前端·webrtc
gCode Teacher 格码致知1 小时前
Javascript提高:冒泡和捕获的典型案例-由Deepseek产生
前端·javascript
蒟蒻星球住民1 小时前
web应用技术作业01
前端·javascript·firefox
Csvn1 小时前
前端团队协作
前端
道友可好1 小时前
Superpowers:给 AI 编程助手装上超能力
前端·人工智能·后端