React环境变量配置疑问：如何实现多环境配置文件？

我完全懂你想要的那种Angular式多环境配置的爽感——不用在不同环境间手动改变量，通过配置文件和脚本命令就能轻松切换对吧？我之前也折腾过React的环境配置，下面给你一套最贴近Angular思路的实现方案，亲测好用：

1. 创建环境配置文件 #

在你的项目src目录下新建一个environments文件夹，然后创建对应环境的配置文件：

src/environments/environment.dev.js（开发环境） #

export const environment = {
  production: false,
  apiBaseUrl: 'http://dev.your-api.com',
  enableDebugLogs: true,
  featureFlags: {
    newCheckout: true
  }
};

src/environments/environment.prod.js（生产环境） #

export const environment = {
  production: true,
  apiBaseUrl: 'https://prod.your-api.com',
  enableDebugLogs: false,
  featureFlags: {
    newCheckout: false
  }
};

你还可以根据需求加更多环境，比如environment.staging.js（预发布环境）。

2. 编写统一导入的入口文件 #

在environments文件夹下创建一个主文件environment.js，它会根据当前环境自动导入对应的配置：

let envConfig;

// 根据当前环境变量加载对应配置
switch (process.env.NODE_ENV) {
  case 'production':
    envConfig = require('./environment.prod').environment;
    break;
  case 'staging':
    envConfig = require('./environment.staging').environment;
    break;
  case 'development':
  default:
    envConfig = require('./environment.dev').environment;
}

export const environment = envConfig;

3. 配置脚本命令（跨平台兼容） #

为了在不同操作系统上都能正确设置环境变量，先安装cross-env依赖：

npm install cross-env --save-dev

然后修改package.json里的scripts，添加对应环境的启动/构建命令：

"scripts": {
  "start": "cross-env NODE_ENV=development react-scripts start",
  "build:prod": "cross-env NODE_ENV=production react-scripts build",
  "build:dev": "cross-env NODE_ENV=development react-scripts build",
  "build:staging": "cross-env NODE_ENV=staging react-scripts build"
}

4. 在项目中使用配置 #

现在你可以在任何组件/工具文件中统一导入这个主配置文件，不用关心当前是哪个环境：

import { environment } from '../environments/environment';

function App() {
  return (
    <div>
      {environment.enableDebugLogs && <p>Debug mode is ON</p>}
      <p>API URL: {environment.apiBaseUrl}</p>
    </div>
  );
}

• 和Angular一样，用独立的JS配置文件管理不同环境的变量，支持写逻辑（比如动态计算变量）
• 通过脚本命令切换环境，不用手动修改代码
• 项目中统一导入入口文件，保持代码的一致性

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