使用 ESBuild 构建 Angular答案

【问题标题】：Getting Angular to build with ESBuild使用 ESBuild 构建 Angular
【发布时间】：2023-02-07 00:47:41
【问题描述】：

我正在运行 Angular 15.0.2 并更新了 angular.json 以使用 ESBuild 构建。

"serve": {
  "builder": "@angular-devkit/build-angular:browser-esbuild",

然后在尝试提供应用程序时：

警告：开发服务器目前不支持实验性的基于 esbuild 的构建器。将改用稳定的基于 Webpack 的构建器。

如何让 ESbuild 进入 Angular 应用程序？

【问题讨论】：

【解决方案1】：

正如doc中提到的：

在 Angular v15 中仅支持 esbuild

 ng build and ng build --watch

【讨论】：

【解决方案2】：

esbuild 在开发服务器中不受支持，即当您运行ng serve 时，但在构建中受支持，即当您运行ng build 时

要在开发中使用 esbuild，只需正常构建应用程序，然后使用您自己的服务器为应用程序提供服务

你可以使用 http-server 或任何其他开发服务器（对我来说我使用 Vite）

这是完整的例子：

包.json

  "scripts": {
    "start:dev": "npm run build && npm run serve",
    "build": "ng build",
    "serve": "vite serve ./dist --port=4200",
  },

请注意，我将 ng serve 替换为 vite serve 或 http-server ./dist 在浏览器中查看构建结果运行npm run start:dev

在这两种情况下，您都需要安装 vite 或 http-server 作为 devDependencies

【讨论】：