在Create React App中根据环境导入对应配置文件

下面提供几种在Create React App（CRA）项目中，根据环境自动导入对应配置文件的实现方式，满足你将配置独立维护在TS/JSON文件中的需求：

方法1：环境变量 + 动态导入 #

通过CRA支持的自定义环境变量REACT_APP_ENV指定当前环境，再用动态导入加载对应配置文件：

步骤1：配置环境启动脚本 #

修改package.json中的scripts，为不同环境设置对应的环境变量：

"scripts": {
  "start": "REACT_APP_ENV=dev react-scripts start",
  "build:staging": "REACT_APP_ENV=staging react-scripts build",
  "build:prod": "REACT_APP_ENV=prod react-scripts build"
}

步骤2：动态导入配置文件 #

在需要使用配置的文件中，根据环境变量加载对应配置：

let myConfig;

// 动态导入对应环境的配置
(async () => {
  const env = process.env.REACT_APP_ENV || 'dev';
  const configModule = await import(`../config/my-config-${env}.ts`);
  myConfig = configModule.myConfig;
})();

如果需要同步使用配置，也可以用条件导入（需确保环境变量在编译时确定）：

import { myConfig as devConfig } from '../config/my-config-dev';
import { myConfig as stagingConfig } from '../config/my-config-staging';
import { myConfig as prodConfig } from '../config/my-config-prod';

const myConfig = {
  dev: devConfig,
  staging: stagingConfig,
  prod: prodConfig
}[process.env.REACT_APP_ENV || 'dev'];

方法2：通过Webpack别名替换（需自定义CRA配置） #

使用craco或react-app-rewired修改Webpack的解析规则，让固定路径的导入自动映射到对应环境的配置文件，无需修改业务代码中的导入语句。

步骤1：安装依赖 #

npm install @craco/craco --save-dev

步骤2：配置Webpack别名 #

在项目根目录创建craco.config.js：

const path = require('path');

module.exports = {
  webpack: {
    resolve: {
      alias: {
        // 将固定导入路径映射到对应环境的配置文件
        '../config/my-config': path.resolve(
          __dirname,
          `src/config/my-config-${process.env.REACT_APP_ENV || 'dev'}.ts`
        )
      }
    }
  }
};

步骤3：修改启动脚本 #

更新package.json的scripts，替换为craco命令：

"scripts": {
  "start": "REACT_APP_ENV=dev craco start",
  "build:staging": "REACT_APP_ENV=staging craco build",
  "build:prod": "REACT_APP_ENV=prod craco build"
}

之后你原来的import { myConfig } from "../config/my-config";语句会自动加载对应环境的配置文件。

方法3：添加TypeScript类型约束（可选） #

为了保证所有环境配置文件的结构一致，避免字段缺失或类型错误，可以定义统一的类型接口：

// src/config/config.types.ts
export interface MyConfig {
  apiUrl: string;
  timeout: number;
  // 根据你的需求添加其他配置字段
}

然后每个环境配置文件都实现该接口：

// src/config/my-config-dev.ts
import { MyConfig } from './config.types';

export const myConfig: MyConfig = {
  apiUrl: 'http://localhost:3000/api',
  timeout: 5000
};

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