16

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

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

4

3 回答 3

17

更新：

对于 Angular 8+，请阅读这篇AngularInDepth 文章。

对于 Angular 6 和 7：

完整的文章可以在这里找到。

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

执行：

  1. 在项目的根目录中为您的自定义构建器（例如custom-builders）创建一个目录（或者将其安装为本地 npm 模块）
  2. 在目录中创建一个名为builders.json、index.ts和package.json的文件，其中包含builders指向builders.json的入口
  3. 在custom-builders中为您要实现的构建器创建一个目录（例如custom-builders/my-cool-builder
  4. 将index.ts、schema.json和schema.d.ts添加到my-cool-builder目录
  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;
}

    并且是您在schema.d.tsOptionsT中为构建器选项定义的接口

    您可以使用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

于 2018-07-02T08:00:00.920 回答
1

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

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

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

于 2020-02-05T18:30:52.890 回答
0

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

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

于 2018-06-28T20:06:15.177 回答