Angular 17使用esbuild构建器时能否配置Pug模板编译？

开发者阿泽

2026-6-21

Angular 17 切换 esbuild 构建器并配置 Pug 模板支持

可以通过自定义 esbuild 插件实现 Pug 模板的编译支持，Angular 17 的 esbuild 构建器允许扩展自定义插件来处理非标准模板格式。具体步骤如下：

安装依赖：首先安装 Pug 编译器和对应的 esbuild 插件
```
npm install pug esbuild-plugin-pug --save-dev
```

创建自定义 esbuild 配置文件：在项目根目录新建 esbuild-pug-plugin.js，内容如下

const pugPlugin = require('esbuild-plugin-pug');

module.exports = {
  plugins: [
    pugPlugin({
      // 可根据需求配置 Pug 编译选项，比如格式化输出、基础目录等
      pugOptions: {
        pretty: true
      }
    })
  ]
};

修改 Angular 构建配置：打开 angular.json，将构建器切换为 esbuild 版本，并指定自定义插件配置文件

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser-esbuild",
    "options": {
      // 保留原有配置（如输出路径、assets等）
      "customEsbuildConfig": "./esbuild-pug-plugin.js"
    }
  }
}

调整组件模板引用：确保组件的 templateUrl 指向 .pug 文件，示例如下

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.pug',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'pug-esbuild-demo';
}