如何在create-react-app的package.json中使用REACT_APP_BASENAME环境变量？

嘿，很高兴你也get到了React环境变量的便捷之处！关于你想把REACT_APP_BASENAME用到package.json的homepage字段里的需求，这里有几个实用的方案——毕竟直接在package.json里写${process.env.REACT_APP_BASENAME}是行不通的，因为JSON文件不支持环境变量插值哦。

方案一：构建命令中同步设置环境变量（推荐） #

create-react-app里的PUBLIC_URL会优先于homepage字段生效，所以我们可以在构建命令中同时设置REACT_APP_BASENAME和PUBLIC_URL，让它们保持一致。这样既满足了<BrowserRouter>的basename需求，也能让%PUBLIC_URL%正确替换。

如果你用的是Windows系统，建议先安装cross-env来跨平台兼容环境变量设置：

npm install cross-env --save-dev

然后修改package.json的scripts：

"scripts": {
  "start": "cross-env REACT_APP_BASENAME=/your-app-path react-scripts start",
  "build": "cross-env REACT_APP_BASENAME=/your-app-path PUBLIC_URL=/your-app-path react-scripts build"
}

这样一来：

• 代码里的process.env.REACT_APP_BASENAME就是你设置的路径，完美给<BrowserRouter>的basename赋值
• index.html里的%PUBLIC_URL%会自动替换成相同的路径，和homepage字段的作用一致

方案二：动态修改package.json（进阶） #

如果你一定要让package.json的homepage字段显示这个变量对应的路径，可以写个简单的Node脚本在构建前自动修改package.json：

1. 在项目根目录创建set-homepage.js文件：

const fs = require('fs');
const path = require('path');

const packagePath = path.join(__dirname, 'package.json');
const packageJson = require(packagePath);

// 用环境变量设置homepage，默认值为根路径
packageJson.homepage = process.env.REACT_APP_BASENAME || '/';

// 写回package.json
fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2));

2. 修改package.json的scripts，添加prebuild钩子（会在build之前自动执行）：

"scripts": {
  "prebuild": "cross-env REACT_APP_BASENAME=/your-app-path node set-homepage.js",
  "build": "react-scripts build"
}

这样每次执行npm run build时，脚本会先把homepage字段改成REACT_APP_BASENAME的值，再进行构建，同样能实现你要的效果。

补充说明 #

为什么不能直接在package.json里写变量？因为package.json是静态JSON文件，create-react-app或者Node.js不会解析里面的模板字符串，直接写的话会把${process.env.REACT_APP_BASENAME}当成普通字符串，达不到替换的效果哦。

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