Angular CLI 自定义生成器

Question

Angular CLI 6 引入了构建器的新概念（又名 Architect Targets）。
有几个 prebuilt builders that come with @angular-devkit/build_angular，但不幸的是，没有说明如何创建自己的构建器的文档。

如何创建自己的构建器（例如修改底层 webpack 配置）？

Answer 1

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

architect.build.builder 使用一些 Angular 原理图来执行构建过程。您可以创建自己的原理图，uses/inherits 定期构建原理图，其中包含您要实现的附加逻辑。

Answer 2

更新：

对于 Angular 8+ 阅读 this AngularInDepth 文章。

对于 Angular 6 和 7：

可以找到完整的文章 here。

为了简单起见，我假设新构建器是在 Typescript 中实现的，但它也可以在纯 JavaScript 中实现。

实施：

在项目的根目录中为您的自定义构建器（例如 custom-builders）创建一个目录（或者将其安装为 local npm module）
在目录中创建一个名为 builders.json、index.ts 和 [ 的文件=117=] 包含指向 builders.json

builders

在 custom-builders 中为您要实现的构建器创建一个目录（例如，custom-builders/my-cool-builder
添加index.ts、schema.json和schema.d.ts 到 my-cool-builder 目录
使用构建器选项的架构填充 schema.json。请参阅示例 here。
根据您定义的schema.json定义您的schema.d.ts。请参阅示例 here。

在 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 架构师目标作为参考。

实施后，将构建器添加到 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

Answer 3

对于使用 Angular 8 及更高版本的用户，构建器 API 现在得到官方支持并记录在案：https://angular.io/guide/cli-builder

它与以前的版本相比有很多变化，因此如果您使用的是未注册的 Architect API.

，从 Angular 7 到 8 的迁移可能会变得复杂

这里有一篇不错的入门文章：https://blog.angular.io/introducing-cli-builders-d012d4489f1b

Angular CLI 自定义生成器

Angular CLI custom builder

angular-cli

angular

angular-builder

angular-devkit

更新：

对于 Angular 6 和 7：

实施：

用法：

例子