ReactJS构建版本中$npm_package_version参数失效问题求助

问题根源 #

开发环境能正常读取$npm_package_version是因为react-scripts在dev模式下会直接解析shell变量，但使用env-cmd执行构建时，.env文件中的$npm_package_version不会被shell解析——env-cmd只是直接读取文件内容，不会处理shell变量替换，导致构建产物中该变量未被正确注入。

解决方案 #

方案1：直接在npm脚本中注入版本变量

修改package.json的构建脚本，跳过.env文件中的变量定义，直接在执行时传入版本号：

"scripts": {
  "build:staging": "npm run clean && REACT_APP_VERSION=$npm_package_version env-cmd -f .env.staging react-scripts build"
}

shell会先解析$npm_package_version为实际版本号，再传递给react-scripts，CRA会自动将该变量注入构建产物。

方案2：动态生成.env文件

通过脚本动态写入版本号到.env.staging，避免shell变量解析问题：

1. 在项目根目录创建set-version.js：

const fs = require('fs');
const pkg = require('./package.json');

const envContent = `NODE_ENV=development
REACT_APP_VERSION=${pkg.version}`;

fs.writeFileSync('.env.staging', envContent);

2. 修改package.json脚本：

"scripts": {
  "set-staging-version": "node set-version.js",
  "build:staging": "npm run clean && npm run set-staging-version && env-cmd -f .env.staging react-scripts build"
}

每次构建前都会自动生成包含正确版本号的.env.staging文件。

方案3：移除env-cmd（简化场景）

如果不需要复杂的多环境配置，直接在脚本中传递所有环境变量：

"scripts": {
  "build:staging": "npm run clean && REACT_APP_VERSION=$npm_package_version NODE_ENV=development react-scripts build"
}

跨平台兼容注意 #

如果使用Windows系统，shell变量写法需改为%npm_package_version%，或安装cross-env统一处理：

"scripts": {
  "build:staging": "npm run clean && cross-env REACT_APP_VERSION=$npm_package_version env-cmd -f .env.staging react-scripts build"
}

执行npm install cross-env --save-dev安装依赖。

验证要点 #

• 构建完成后清空浏览器缓存或重启部署服务，避免读取旧缓存
• 确认Login.tsx中直接使用process.env.REACT_APP_VERSION，不要用动态拼接或间接引用（CRA会静态替换该变量）

内容的提问来源于stack exchange，提问作者Osvaldo Costa