如何为React应用构建多环境版本？Webpack多环境API URL配置咨询

嘿，这个问题我太熟了！在React+Webpack的项目里搞定多环境配置和构建，其实有一套非常成熟的标准方案，我给你拆成两部分详细说：

这里有几种最常用且靠谱的实现方式，你可以根据项目复杂度选：

1. 环境变量文件（最推荐，适配Create React App） #

这是React生态里最通用的做法，步骤很清晰：

• 在项目根目录创建对应环境的.env文件，比如.env.test、.env.beta、.env.prod，每个文件里定义API URL（注意变量必须以REACT_APP_开头，不然Webpack不会打包进去）：

  # .env.test
  REACT_APP_API_URL=https://test-api.example.com
  

• 代码里直接通过process.env.REACT_APP_API_URL调用，比如：

  import axios from 'axios';
  
  const apiClient = axios.create({
    baseURL: process.env.REACT_APP_API_URL,
  });
  

• 安装env-cmd包来加载指定环境的配置：npm install env-cmd --save-dev，然后在package.json的scripts里添加命令：

  "scripts": {
    "start:test": "env-cmd -f .env.test react-scripts start",
    "start:beta": "env-cmd -f .env.beta react-scripts start"
  }
  

2. Webpack DefinePlugin注入（自定义Webpack配置） #

如果你的项目是自己配置Webpack（不是用Create React App的默认模板），可以直接用Webpack内置的DefinePlugin全局注入变量：

• 在webpack.config.js里添加配置：

  const webpack = require('webpack');
  const targetEnv = process.env.NODE_ENV || 'development';
  
  // 定义各环境的API地址映射
  const apiConfig = {
    test: 'https://test-api.example.com',
    beta: 'https://beta-api.example.com',
    prod: 'https://api.example.com'
  };
  
  module.exports = {
    // ...其他Webpack配置
    plugins: [
      new webpack.DefinePlugin({
        // 注意要转成JSON字符串，不然会被当成变量解析
        'process.env.REACT_APP_API_URL': JSON.stringify(apiConfig[targetEnv])
      })
    ]
  };
  

• 启动或构建时指定环境变量：NODE_ENV=test npm start，或者在package.json里封装成脚本：

  "scripts": {
    "build:test": "NODE_ENV=test webpack --mode production"
  }
  

3. 动态导入配置文件（适合复杂配置场景） #

如果你的环境配置不止API URL，还有很多其他参数，可以把配置拆成单独的文件：

• 在src/config目录下创建config.test.js、config.beta.js、config.prod.js，每个文件导出对应配置：

  // src/config/config.prod.js
  export default {
    apiUrl: 'https://api.example.com',
    timeout: 10000,
    enableLog: false
  };
  

• 在代码里根据环境动态导入：

  let appConfig;
  switch(process.env.NODE_ENV) {
    case 'test':
      appConfig = require('./config/config.test').default;
      break;
    case 'beta':
      appConfig = require('./config/config.beta').default;
      break;
    default:
      appConfig = require('./config/config.prod').default;
  }
  
  // 使用配置
  const apiClient = axios.create({
    baseURL: appConfig.apiUrl,
    timeout: appConfig.timeout
  });
  

其实和上面的配置是联动的，核心就是通过脚本指定环境，让Webpack打包对应版本：

1. Create React App项目 #

借助env-cmd，在package.json里添加不同环境的构建命令：

"scripts": {
  "build:test": "env-cmd -f .env.test react-scripts build",
  "build:beta": "env-cmd -f .env.beta react-scripts build",
  "build:prod": "react-scripts build" // 生产环境可以直接用默认配置
}

运行npm run build:test就会生成测试环境的打包产物，默认输出到build目录。

2. 自定义Webpack项目 #

直接通过NODE_ENV指定环境，配合Webpack的构建命令：

"scripts": {
  "build:test": "NODE_ENV=test webpack --mode production",
  "build:beta": "NODE_ENV=beta webpack --mode production",
  "build:prod": "NODE_ENV=prod webpack --mode production"
}

如果需要把不同环境的打包产物分开，可以在Webpack配置里根据NODE_ENV修改输出目录：

module.exports = {
  output: {
    path: path.resolve(__dirname, `dist/${targetEnv}`),
    filename: 'bundle.[contenthash].js'
  }
};

• 千万别把敏感信息（比如API密钥）写到.env文件里！记得把.env添加到.gitignore，只提交.env.example作为模板，让其他开发者自己复制填充。
• Create React App项目尽量别eject，用env-cmd就能搞定多环境，eject会让Webpack配置变得难以维护。
• 如果用TypeScript，记得在src/react-app-env.d.ts里声明环境变量类型，避免TS报错：

  declare namespace NodeJS {
    interface ProcessEnv {
      REACT_APP_API_URL: string;
    }
  }
  

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