部署至Netlify时无法使用$npm_package_version的问题

Netlify的环境变量面板不会自动解析shell变量（比如$npm_package_version），直接输入会被当成字面量字符串，以下是几种可行的解决方法：

方法1：修改Netlify构建命令 #

在Netlify的项目设置 -> 构建和部署 -> 构建命令中，把原来的npm run build替换为：

REACT_APP_VERSION=$npm_package_version npm run build

这样在构建启动时，shell会先解析$npm_package_version为package.json里的版本号，再传递给CRA的构建流程。

方法2：使用netlify.toml配置文件 #

在项目根目录创建netlify.toml文件，添加以下内容：

[build]
  command = "npm run build"
  publish = "build"

[context.production.environment]
  REACT_APP_VERSION = "${npm_package_version}"

Netlify会在构建时自动解析这个变量，无需在面板中手动设置该环境变量。

方法3：修改package.json的build脚本 #

直接在项目的package.json里修改build命令，把版本注入到构建流程中：

"scripts": {
  "build": "REACT_APP_VERSION=$npm_package_version react-scripts build"
}

这种方式不管是本地构建还是Netlify远程构建，都能正确获取版本号，同时可以移除Netlify面板中对应的环境变量设置。

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