如何基于不同环境变量多次构建React应用，输出多客户专属构建包

这个需求完全可以实现，无需手动修改配置文件名称，可通过配置脚本实现一键构建全量客户版本，甚至可以扩展为自动发布到对应FTP服务器。

如果你使用的是Create React App（CRA）脚手架 #

这是最简便的实现方案，不需要修改任何底层构建配置，仅需3步即可完成：

1. 安装环境变量加载工具env-cmd，用于指定加载对应客户的环境配置文件：

# npm 安装
npm install env-cmd --save-dev
# yarn 安装
yarn add env-cmd -D

2. 在package.json的scripts字段中新增对应客户的构建命令，CRA原生支持BUILD_PATH环境变量自定义构建产物输出目录：

{
  "scripts": {
    "build:blue": "env-cmd -f .env.blue BUILD_PATH=build_blue react-scripts build",
    "build:red": "env-cmd -f .env.red BUILD_PATH=build_red react-scripts build",
    "build:yellow": "env-cmd -f .env.yellow BUILD_PATH=build_yellow react-scripts build",
    // 新增一键构建所有客户版本的命令
    "build:all": "yarn build:blue && yarn build:red && yarn build:yellow"
  }
}

3. 执行对应命令即可完成构建：

• 仅构建Blue客户版本：执行yarn build:blue，产物自动输出到build_blue目录
• 一次性构建所有客户版本：执行yarn build:all，自动生成三个对应目录的产物

注意：CRA要求自定义环境变量必须以REACT_APP_为前缀，否则不会被注入到前端应用运行时中，你现有的配置已经符合这个规则，无需调整

如果你使用自定义webpack配置 #

需要调整两个配置点：

• 构建时通过传入客户标识参数，使用dotenv库动态加载对应的.env.xxx配置文件
• 修改webpack配置中output.path字段，动态赋值为build_${客户标识}即可

扩展优化（可选） #

如果需要免去手动上传FTP的步骤，可以编写简单的Node.js上传脚本（使用ftp-deploy等工具），串在对应构建命令末尾，即可实现构建+上传全自动化。

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