如何从URL加载配置文件实现React多环境共用构建包？

你可以通过以下几种方式实现在React代码执行前同步加载配置文件，完全避开Promise异步加载带来的状态管理问题：

方案1：index.html中同步引入全局配置脚本 #

这是最简单直接的方式，把配置做成全局变量，让浏览器在加载React代码前就完成配置加载：

1. 在项目的public/index.html中，React入口脚本之前添加同步的配置脚本引用（不要加async或defer属性）：

<!-- 放在React的<script>标签之前 -->
<script src="/config/config.js"></script>
<script src="/static/js/main.xxxx.js"></script>

2. 每个环境的config.js文件直接挂载配置到全局window对象：

// prod环境的config.js
window.APP_CONFIG = {
  apiBaseUrl: "https://prod.example.com/api",
  env: "prod",
  featureFlags: {
    enablePayment: true
  }
};

3. React代码中直接使用全局配置，无需任何异步处理：

// 组件中直接调用
const apiUrl = window.APP_CONFIG.apiBaseUrl;

部署时只需给不同环境放置对应的config.js文件即可，构建包完全复用。

方案2：自定义Webpack入口，同步加载JSON配置 #

如果偏好JSON格式的配置文件，可以修改Webpack入口，先执行同步加载配置的脚本，再启动React：

1. 修改webpack.config.js的入口配置：

module.exports = {
  entry: ['./src/load-config.js', './src/index.js']
};

2. 在src/load-config.js中用同步XHR读取配置并挂载到全局：

try {
  const xhr = new XMLHttpRequest();
  // 第三个参数设为false表示同步请求
  xhr.open('GET', '/config/config.json', false);
  xhr.send();
  
  if (xhr.status === 200) {
    window.APP_CONFIG = JSON.parse(xhr.responseText);
  } else {
    throw new Error(`配置加载失败，状态码：${xhr.status}`);
  }
} catch (err) {
  // 配置加载失败时的降级处理
  console.error(err);
  window.APP_CONFIG = {
    apiBaseUrl: "https://fallback.example.com/api",
    env: "unknown"
  };
}

3. React代码中同样直接使用window.APP_CONFIG即可。

关键注意事项 #

• 同步加载会短暂阻塞页面渲染，所以配置文件要尽量精简，避免过大。
• 部署时要确保每个环境的配置文件路径正确，比如Nginx等服务器要正确映射/config/路径到对应的配置文件。
• 可以给配置加载添加错误处理，避免配置加载失败导致整个应用崩溃。

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