如何通过命令行更新React应用package.json版本号并配合npm build使用

常见认知纠正 #

你此前对npm version指令的理解存在偏差：它并非仅适用于npm包发布场景，所有包含package.json文件的项目都可以用它快速修改版本字段。你的需求完全可以在npm build执行前/构建阶段实现。

具体实现方案 #

你要使用最近一次git commit的短SHA作为版本号，有两种常用实现方式：

方式1：使用npm version命令（推荐） #

直接将获取到的commit SHA作为版本号传入，添加--no-git-tag-version参数跳过自动打Git标签的逻辑，非常适合构建流水线场景：

# 单条命令完成版本更新
npm version $(git rev-parse --short HEAD) --no-git-tag-version

执行后package.json中的version字段会自动更新为最新的commit短SHA。

方式2：直接修改package.json（无npm依赖） #

如果你的构建环境需要更轻量的方案，可以用jq工具直接操作JSON文件：

jq '.version = "'$(git rev-parse --short HEAD)'"' package.json > tmp.json && mv tmp.json package.json

绝大多数Linux构建服务器默认预装了jq，不需要额外安装依赖。

集成到构建流程的方法 #

流水线配置集成 #

直接在你的构建任务步骤中调整执行顺序即可：

• 第一步：拉取最新代码
• 第二步：执行上述任意一条版本更新命令
• 第三步：执行npm run build
• 第四步：部署构建产物

项目内置自动执行 #

你也可以通过npm的生命周期钩子，不需要修改流水线配置，只要执行npm run build就会自动先更新版本号：
在package.json的scripts字段中添加prebuild钩子：

{
  "scripts": {
    "prebuild": "npm version $(git rev-parse --short HEAD) --no-git-tag-version",
    "build": "react-scripts build"
  }
}

npm会自动在执行build命令前先执行prebuild对应的指令。

额外提示 #

如果需要在React应用代码中读取当前版本号，直接引用process.env.npm_package_version即可，打包时会自动注入对应的版本值。

内容的提问来源于stack exchange，提问作者Christopher Townsend