Angular 17用esbuild替代webpack后，如何配置polyfills与define？

一、实现 Webpack 式的核心功能 #

esbuild 完全可以替代 Webpack 实现你提到的两个功能，具体配置如下：

1. 为 process、path 提供浏览器 Polyfills #

esbuild 本身不内置 Node.js 核心模块的浏览器兼容层，需要手动引入对应 polyfill 包并配置：

• 先安装依赖：

  npm install process-es6 path-browserify --save-dev
  

• 全局注入方式：在 src/polyfills.ts 中添加以下代码，将模块挂载到全局：

  import 'process-es6';
  import 'path-browserify';
  
  // 若需要全局暴露 process 对象（部分依赖可能直接访问 window.process）
  window.process = require('process-es6');
  

• Angular 构建器配置方式：通过 angular.json 的 polyfills 配置项注册（需 CLI 17.1+，对应 PR 优化后的能力），示例：

  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "polyfills": [
        "zone.js",
        "./src/polyfills.ts",
        {
          "provide": "process",
          "useFactory": () => require('process-es6')
        },
        {
          "provide": "path",
          "useFactory": () => require('path-browserify')
        }
      ]
    }
  }
  

2. 构建时环境变量定义（对应 Webpack 的 define） #

Angular 的 esbuild 构建器支持通过 angular.json 直接配置 define 项，无需使用命令行参数：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    // 其他配置...
    "define": {
      "process.env.NODE_ENV": "\"production\"",
      "APP_VERSION": "\"1.0.0\""
    }
  }
}

注意：配置值需要是JSON 字符串格式（外层加转义引号），因为 esbuild 会直接替换代码中的标识符，确保语法合法。

二、落地 PR angular-cli#26011 方案 #

该 PR 针对 issue angular-cli#24163，主要优化了 esbuild 构建器的 polyfill 配置能力，落地步骤如下：

1. 升级 Angular CLI 到 17.1.0 及以上版本：

   npm install @angular/cli@^17.1.0 --save-dev
   

2. 利用新增的 polyfill 配置能力：
   如前文所述，在 angular.json 的 build.options.polyfills 中，除了指定文件路径，还可通过对象形式注册依赖注入式的 polyfill，更灵活地管理 Node.js 模块的浏览器兼容层，替代之前手动全局挂载的繁琐操作，更符合 Angular 的依赖注入规范。

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