使用 ESBuild 构建 Angular

Question

我正在运行 Angular15.0.2并更新了 angular.json 以使用 ESBuild 进行构建。

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

然后当尝试为应用程序提供服务时：

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

如何在 Angular 应用程序中配置 ESbuild ？

Answer 1

“现代”角度：自角度 16.1 起

\n

要启用 Esbuild，您需要将以下选项添加到 angular.json 文件的 \xe2\x80\x9cserve\xe2\x80\x9d 部分下：

\n

"forceEsbuild":true

\n

然后，您可以像往常一样运行\xe2\x80\x9cngserve\xe2\x80\x9d并享受 Esbuild 的好处。\n它将使用 Esbuild 而不是 Webpack 来加快应用程序中的开发过程。

\n

\n

Answer 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/YOUR_PROJECT_NAME --port=4200",
  },

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

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

Answer 3

正如文档中提到的：

仅在 Angular v15 中支持 esbuild

 ng build and ng build --watch