如何在ReactJS的public HTML文件中实现条件式外部脚本引用并访问环境变量？

其实React已经为我们提供了便捷的方式来在public目录下的HTML文件中使用环境变量，不用自己费劲找其他路子，下面给你两种靠谱的实现方案：

第一步：配置环境变量 #

首先你需要在项目根目录创建对应环境的配置文件，React会自动识别以REACT_APP_开头的变量并注入到HTML中：

• 创建.env.test（预发布/测试环境）文件，内容如下：

  REACT_APP_ENV=test
  # 或者直接配置脚本地址
  REACT_APP_GOCARDLESS_SCRIPT=https://pay-sandbox.gocardless.com/js/beta
  

• 创建.env.production（生产环境）文件，内容如下：

  REACT_APP_ENV=production
  REACT_APP_GOCARDLESS_SCRIPT=https://pay.gocardless.com/js/beta
  

然后记得在package.json里配置对应的启动/构建脚本，方便快速切换环境：

"scripts": {
  "start:test": "react-scripts start --env-file .env.test",
  "build:test": "react-scripts build --env-file .env.test",
  "build": "react-scripts build" // 默认使用生产环境配置
}

方案一：动态创建脚本（和你的思路匹配） #

在public/index.html里直接使用%REACT_APP_XXX%的形式获取环境变量，然后动态生成脚本标签：

<script>
  const scriptElement = document.createElement('script');
  // 用React注入的环境变量判断当前环境
  if ('%REACT_APP_ENV%' === 'test') {
    scriptElement.src = 'https://pay-sandbox.gocardless.com/js/beta';
  } else {
    scriptElement.src = 'https://pay.gocardless.com/js/beta';
  }
  // 挂载到你指定的元素，比如body或者某个特定div
  document.getElementById("your-target-id").appendChild(scriptElement);
</script>

方案二：直接通过环境变量引用脚本（更简洁） #

如果不需要复杂的逻辑，直接把脚本地址配置成环境变量，在HTML里直接引用即可：

<script src="%REACT_APP_GOCARDLESS_SCRIPT%"></script>

这种方式代码更干净，不需要写额外的JS逻辑，适合简单的环境切换场景。

注意点 #

• 环境变量必须以REACT_APP_开头，否则React不会把它注入到HTML和客户端代码中
• 不要在环境变量里存敏感信息，因为这些变量会被打包到客户端代码里，所有人都能看到
• 如果是用create-react-app搭建的项目，不需要额外配置webpack，React已经帮我们处理好了环境变量的注入

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