如何避免在Angular中单独构建各个环境以提升效率？

因为你所有环境都设置了production: true，Angular生产构建的核心优化步骤（树摇、代码压缩、AOT编译等）完全通用，确实可以通过一次基础构建+批量替换环境配置的方式大幅缩短总构建时间，避免重复劳动。

具体实现步骤 #

1. 调整基础环境配置，加入占位符 #

修改environment.prod.ts，把需要动态切换的配置项改成占位符（选不会和代码内容冲突的格式，比如__XXX__）：

export const environment = {
  production: true,
  apiUrl: '__API_URL__',
  // 其他需要区分环境的配置同理
};

2. 执行一次通用生产构建 #

用这条命令生成基础构建产物，所有环境共享这部分核心代码：

ng build --configuration=production --output-path=dist/base

3. 准备各环境的配置映射文件 #

在项目根目录新建configs文件夹，为每个环境单独存放配置：

• configs/dev.json：

{
  "__API_URL__": "dev-api.example.com"
}

• configs/staging.json：

{
  "__API_URL__": "staging-api.example.com"
}

• configs/prod.json：

{
  "__API_URL__": "prod-api.example.com"
}

4. 编写配置替换脚本 #

新建replace-config.js脚本，批量替换基础构建中的占位符并输出到对应环境目录：

const fs = require('fs');
const path = require('path');

const baseDistPath = path.join(__dirname, 'dist/base');
const configsDir = path.join(__dirname, 'configs');
const envs = ['dev', 'staging', 'prod'];

// 定位构建后的main文件
const mainFile = fs.readdirSync(baseDistPath).find(file => file.startsWith('main') && file.endsWith('.js'));
const mainContent = fs.readFileSync(path.join(baseDistPath, mainFile), 'utf8');

envs.forEach(env => {
  // 读取当前环境的配置
  const config = JSON.parse(fs.readFileSync(path.join(configsDir, `${env}.json`), 'utf8'));
  let modifiedContent = mainContent;
  
  // 替换所有占位符
  Object.keys(config).forEach(key => {
    modifiedContent = modifiedContent.replace(new RegExp(key, 'g'), config[key]);
  });
  
  // 创建目标环境目录并复制文件
  const envDistPath = path.join(__dirname, 'dist', env);
  if (!fs.existsSync(envDistPath)) fs.mkdirSync(envDistPath, { recursive: true });
  
  fs.readdirSync(baseDistPath).forEach(file => {
    if (file === mainFile) {
      fs.writeFileSync(path.join(envDistPath, file), modifiedContent);
    } else {
      fs.copyFileSync(path.join(baseDistPath, file), path.join(envDistPath, file));
    }
  });
});

5. 整合到npm脚本 #

在package.json中添加整合后的命令，CI只需执行这一条即可：

{
  "scripts": {
    "build-base": "ng build --configuration=production --output-path=dist/base",
    "replace-configs": "node replace-config.js",
    "build-all": "npm run build-base && npm run replace-configs"
  }
}

CI执行命令改为：

npm run build-all

注意事项 #

• 占位符格式要独特，避免和业务代码中的字符串误匹配。
• 如果有多个包含环境配置的chunk文件，需要在脚本中对应处理这些文件。
• 测试时先构建一次基础产物，确认占位符在编译后的文件中正常保留，没有被Angular的优化逻辑处理掉。

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