如何构建含环境变量的React应用（嵌入Angular渲染场景）

问题核心 #

你的React微应用使用microbundle-crl构建，需要将环境变量在构建时打包进产物（因要在Angular中通过ReactDOM渲染，无法运行时设置）。当前env-cmd配置未生效，硬编码环境变量可正常运行，而添加react-error-overlay和react-scripts的配置完全无效——这是因为microbundle-crl是独立打包工具，和react-scripts（create-react-app核心）无关，那些配置仅适用于create-react-app生态。

有效解决方案 #

方案1：直接导入环境文件（最简单可靠） #

既然已有导出环境变量的.env.development.js文件，直接在React代码中导入即可，无需依赖env-cmd：

1. 在React组件/工具文件中导入环境配置：

import appEnv from '../.env.development.js';

// 使用环境变量
const apiUrl = appEnv.AP_URL;

2. 构建时microbundle-crl会自动将该文件内容打包进产物，变量会被静态替换，运行时直接可用。

方案2：通过命令行注入环境变量（适合多环境切换） #

若需区分开发/生产等不同环境，可用cross-env在构建命令中直接注入变量，microbundle-crl会自动替换代码中的process.env引用：

1. 安装cross-env（跨平台环境变量注入工具）：

npm install cross-env --save-dev

2. 修改package.json的build脚本：

"scripts": {
  "build:dev": "cross-env AP_URL=http://localhost:10500 microbundle-crl --compress --format modern,cjs --jsxFragment React.Fragment",
  "build:prod": "cross-env AP_URL=https://your-prod-api.com microbundle-crl --compress --format modern,cjs --jsxFragment React.Fragment"
}

3. 在代码中使用process.env.AP_URL：

const apiUrl = process.env.AP_URL;

方案3：修复env-cmd的使用方式 #

若坚持用env-cmd，需确保microbundle-crl能识别其注入的环境变量：

1. 确认.env.development.js导出格式正确（当前格式无误）：

const version = require('./package.json').version;

module.exports = {
  AP_URL: 'http://localhost:10500'
};

2. 修改build脚本，确保env-cmd先注入变量再执行microbundle-crl：

"build": "env-cmd -f ./.env.development.js node -e \"process.env.NODE_ENV='production'; require('child_process').exec('microbundle-crl --compress --format modern,cjs --jsxFragment React.Fragment')\""

清理无效配置 #

删除package.json中无关的overrides和resolutions配置，它们对microbundle-crl完全无用：

// 删掉以下内容
"overrides": {
  "react-error-overlay": "6.0.10"
},
"resolutions": {
  "react-error-overlay": "6.0.10"
}

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