Angular CLI 自定义构建器。

Question

Angular CLI 6引入了新的构建器（也称为Architect Targets）的概念。
有几个预先构建的构建器随@angular-devkit/build-angular一起提供，但不幸的是没有文档说明如何创建自己的构建器。

我该如何创建自己的构建器（例如修改基础webpack配置）？

- JeB

Answer 1

更新：

如需 Angular 8+ 的相关信息，请参阅 AngularInDepth 文章。

对于 Angular 6 和 7：

完整文章可在 此处找到。

为简单起见，我假设新的构建器是用 TypeScript 实现的，但也可以使用纯 JavaScript 实现。

实现：

1. 在项目根目录下创建一个自定义构建器的目录（例如 custom-builders），或将其作为本地 npm 模块安装。
2. 在该目录中创建一个名为 builders.json、index.ts 和 package.json 的文件，其中包含指向 builders.json 的 builders 条目。
3. 在 custom-builders 中创建一个要实现的构建器的目录（例如，custom-builders/my-cool-builder）。
4. 向 my-cool-builder 目录中添加 index.ts、schema.json 和 schema.d.ts。
5. 使用你的构建器选项的模式填充 schema.json。请参见此处的示例。
6. 根据你定义的 schema.json，定义你的 schema.d.ts。请参见此处的示例。

7. 在 my-cool-builder/index.ts 中实现你的构建器。构建器必须实现以下接口：

   export interface Builder<OptionsT> {
     run(builderConfig: BuilderConfiguration<Partial<OptionsT>>):  Observable<BuildEvent>;
   }
   

   当BuildEvent是这样的：

   export interface BuildEvent {
     success: boolean;
   }
   

   BuilderConfiguration 是这样的：

   export interface BuilderConfiguration<OptionsT = {}> {
     root: Path;
     sourceRoot?: Path;
     projectType: string;
     builder: string;
     options: OptionsT;
   }
   

   而 OptionsT 是您在 schema.d.ts 中为构建器选项定义的接口。

   您可以使用 browser 架构目标作为参考。

8. 实现后，将您的构建器添加到 builders.json 中：

{
  "$schema": "@angular-devkit/architect/src/builders-schema.json",
  "builders": {
    "cool-builder": {
      "class": "./my-cool-builder",
      "schema": "./my-cool-builder/schema.json",
      "description": "My cool builder that builds things up"
    }
  }
}

用法：

在您的 angular.json 文件中：

    "architect": {
        ...
        "build": {
                  "builder": "./custom-builders:cool-builder"
                  "options": {
                         your options here
                  }

示例

查看完整示例，请访问此库：https://github.com/meltedspark/angular-builders

- JeB

---

我曾经尝试使用本地定义的构建器来实现这个功能，但最终还是创建了一个演示库：https://github.com/Roaders/angular-electron-chrome/tree/js-custom-builder。不幸的是，我无法使用 TypeScript 构建器（没有额外的编译步骤）来实现它。 - Roaders

你的困难是什么？ - JeB

@Roaders，我想命令行界面工具还没有设置自动编译的选项，如果类构建器是TypeScript文件，就无法编译了吧？ - Mike Haas

Answer 2

对于使用Angular 8及更高版本的用户，构建器API现已正式支持和文档化：https://angular.io/guide/cli-builder

与以前的版本相比，它有很多变化，因此如果您正在使用未记录的Architect API，则从Angular 7迁移到8可能会变得复杂。

这是一篇不错的文章，可以帮助您入门：https://blog.angular.io/introducing-cli-builders-d012d4489f1b

- Alexey Grinko

Answer 3

我没有测试过，也不太确定，但这个概念可能是解决方案。

architect.build.builder 使用一些 Angular schematics 来执行构建过程。您可以创建自己的 schematics，使用/继承常规构建 schematics，并添加您想要实现的其他逻辑。

- user3007799