Angular CLI 自定义构建器

Posted 2023-03-15

【中文标题】Angular CLI 自定义构建器

【英文标题】：Angular CLI custom builder

【发布时间】：2018-12-06 17:36:27

【问题描述】：

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

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

【参考方案1】：

更新：

对于 Angular 8+，请阅读 thisAngularInDepth 文章。

对于 Angular 6 和 7：

全文可以在here找到。

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

实施：

在项目的根目录中为您的自定义构建器（例如 custom-builders）创建一个目录（或者将其安装为 local npm module） 在目录中创建一个名为 builders.json、index.ts 和 package.json 的文件，其中包含指向的 builders 条目builders.json 在 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

【讨论】：

我很难使用本地定义的构建器来实现它，所以我创建了一个 repo 来演示它：github.com/Roaders/angular-electron-chrome/tree/…。不幸的是，我无法让它与打字稿生成器一起工作（没有额外的编译步骤）

你到底在挣扎什么？

@Roaders 是的，我想 CLI 工具没有设置为自动编译如果类生成器是打字稿文件？

【参考方案2】：

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

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

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

【参考方案3】：

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

architect.build.builder 使用一些 Angular 原理图来执行构建过程。您可以创建自己的原理图，使用/继承常规构建原理图以及您想要实现的附加逻辑。