Angular 15：配置browserslist要求ES6支持时Webpack报错

问题背景 #

我的browserslist初始配置如下：

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

执行ng build时收到Angular CLI不支持ES5输出的警告，按照某Stack Overflow回答添加supports es6-module配置项后，Webpack抛出错误，提示Invalid version: "tp.0"，完整错误日志（中文翻译）如下：

[error] HookWebpackError: 转换过程中出现1个错误:
error: 无效版本: "tp.0"
    at makeWebpackError (C:\Users\manna\Desktop\AngularProjects\angular-config\node_modules\webpack\lib\HookWebpackError.js:48:9)
    at C:\Users\manna\Desktop\AngularProjects\angular-config\node_modules\webpack\lib\Compilation.js:3060:12
    at eval (eval at create (C:\Users\manna\Desktop\AngularProjects\angular-config\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:115:1)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
-- 内部错误 --
Error: 转换过程中出现1个错误:
error: 无效版本: "tp.0"
    at failureErrorWithLog (C:\Users\manna\Desktop\AngularProjects\angular-config\node_modules\esbuild\lib\main.js:1604:15)
    at C:\Users\manna\Desktop\AngularProjects\angular-config\node_modules\esbuild\lib\main.js:837:29
    at responseCallbacks.<computed> (C:\Users\manna\Desktop\AngularProjects\angular-config\node_modules\esbuild\lib\main.js:701:9)
    at handleIncomingPacket (C:\Users\manna\Desktop\AngularProjects\angular-config\node_modules\esbuild\lib\main.js:756:9)
    at Socket.readFromStdout (C:\Users\manna\Desktop\AngularProjects\angular-config\node_modules\esbuild\lib\main.js:677:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

错误原因 #

supports es6-module这个browserslist查询语法，当前Angular使用的esbuild构建工具无法正确解析，导致生成了无效的版本标识"tp.0"，触发构建失败。

解决方案 #

1. 恢复原始browserslist配置 #

移除supports es6-module，回到初始配置：

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11

2. 调整Angular构建配置解决ES5警告 #

打开angular.json，找到对应项目的build配置节点，在options中添加或修改以下配置：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "target": "es2015", // 或根据需求设置为es5
            "browserslist": "./.browserslistrc" // 指定你的browserslist配置文件路径
          }
        }
      }
    }
  }
}

3. 配套调整TypeScript配置（若需ES5输出） #

如果确实需要ES5输出，修改tsconfig.json中的target字段：

{
  "compilerOptions": {
    "target": "es5"
  }
}

注意：Angular 12及以上版本默认使用ES2015+作为目标，若强制ES5需确保@angular-devkit/build-angular版本兼容，避免出现其他兼容性问题。

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