学习关于 Angular 8 中 Angular CLI Builders 的内容

2 年 ago

新, 韵

1 minute

这篇文章是Angular Advent Calendar 2019的第17天的文章。

由于我平时使用 AngularJS 并维护自己的 webpack 配置，但听说 Angular 有一个很棒的构建工具叫 @angular/cli，可以帮我们自动完成许多工作。对我来说，这简直像天堂一样。

一方，如果试图迁移当前的项目，很可能无法满足默认行为。尽管完全正确的做法是利用Angular为我们提供的机制进行修复，但为了确保，我打算学习Angular提供的扩展功能，即Angular CLI builders。如果您了解/使用过builders，请原谅我。

立即开始，按照指南进行操作。以下代码中包含了来自 https://angular.jp/guide/cli-builder 的摘录。

Angular CLI Builders 是什么？

提供了用于自定义 Angular CLI 的功能。需要注意的是，schematics 是用于提供 ng generate 命令中的脚手架功能，两者是不同的。我们应该正确使用它们。

Angular CLI Builders 的主体是一个函数，它接受 JsonObject 和 BuilderContext 作为参数，并返回结果。

主要部分

import { BuilderOutput, createBuilder } from '@angular-devkit/architect';

export default createBuilder(_commandBuilder);

function _commandBuilder(
  options: JsonObject,
  context: BuilderContext,
  ): Promise {
  ...
}

由于 JsonObject 是一个 JsonObject，因此很明显，我们对于 BuilderContext 是谁感到好奇。

BuilderContext是什么东西？

定义在这里。

提供了便利的功能，如reportStatus（status: string）或reportProgress（current: number，total？: number，status？: string）函数，用于将文件路径，目标（例如development或production）和进度输出到控制台中。还提供了访问日志记录器等功能。从这些功能中获取和交互各种信息，同时进行处理并返回结果似乎是一个好主意。

如果需要同步处理，返回结果本身；如果需要异步处理，返回Promise；如果需要监听变化并持续处理，返回Observable。

请参考指南中在函数内使用 childProcess 进行异步处理的代码，可以尝试使用spawn。

以下是一个选项：「可以传递什么／如何进行传递」。

我从 BuilderContext 中可以访问到 target 和 project，所以我开始想知道 options 是用来做什么的。我会继续阅读 Builder input 的指南。

你可以自己定义选项的模式。可以为所欲为。这是通过传递指南上的任意命令的示例构建器的模式。

{
  "$schema": "http://json-schema.org/schema",
  "type": "object",
  "properties": {
    "command": {
      "type": "string"
    },
    "args": {
      "type": "array",
      "items": {
        "type": "string"
      }
    }
  }
}

要传递根据定义的选项给定的值，可以使用 angular.json。
在 angular.json 中定义使用自定义 builder 的任务，并传递包含的库的引用。

{
  "projects": {
    "builder-test": {
      "architect": {
        "touch": {
          "builder": "@example/command-runner:command",
          "options": {
            "command": "touch",
            "args": [
              "src/main.ts"
            ]
          }
        },

突然出现了一个叫做“库”的东西，库是用来扩展Angular的便利机制。我们在学习会上听说，通过将可重用的代码迅速迁移到库中，可以提高代码的可读性，减少构建时间，非常方便。所以，让我们毫不犹豫地开始使用吧。如何使用可以在这里找到。我不再赘述，以免岔了题目。

由于库将成为npm包，因此请安装它。在Github Packages中，私有的npm包注册表门槛降低了，这让人很高兴。

如何执行？

你可以使用 ng run project-name:command-name 命令来执行。在这个示例中，命令为 ng run builder-test:touch。
你也可以通过命令行覆盖选项。

还提供了测试构建器的机制。一应俱全。

補充内容1：关于观看模式

有关实现监视模式的构建器实施，其中监视文件更改并执行任务的说明。据指出，在指南中解释此功能可能要求较高水平的内容，并且只是简单地提到。提醒要注意的是，@angular/client 扩展了 webpack，但使用方式略有不同。

補充2：关于builder的链式方法

为了更容易地解释，我跳过了一部分，但是使用BuilderContext的scheduleBuilder()函数可以从一个构建器调用另一个构建器。

我阅读到这里了，但是。。。

我本来想要扩展ng build命令，但似乎这个指南的目标是创建另一个命令。
顺便提一下，Angular In Depth中也介绍了如何使用Angular CLI创建自定义构建器的步骤，请阅读一下。

那么如何扩展 ng build 和 ng serve 呢？

重新查看angular.json文件，可以看到各个任务被委托给了@angular-devkit/build-angular:browser和@angular-devkit/build-angular:dev-server这两个构建工具。事实上，当在webpack配置中完成自定义时，可以通过替换为@angular-builders/custom-webpack来合并自己的webpack配置。以前的方式是使用ng eject和修改，但现在被这种机制所取代了。

如果想要做更多的事情，是否只能选择走一条艰难的道，即fork @angular-devkit/build-angular？由于Readme还在进行中，我感到有些担忧。之前，我对于build-angular生成的webpack配置非常感兴趣，想要知道注释中定义的css和template是如何被转译的，于是偷看了一眼。结果发现情况非常复杂。我想这里可能会有所有这些信息的记录。

順帶一提，我正在使用的構建腳本中使用 gulp 進行預處理，因此，對於 webpack 無法處理的預處理，仍然打算使用 gulp 進行處理，然後再從 gulp 腳本中調用使用了 custom-webpack 擴展的 ng 命令。如果這種方法行不通，我會再考慮其他方案。

总结

我知道有些人可能会对不是尝试或创造新东西的文章不太满意。很抱歉我没有想到好的主题。

个人觉得，这次仔细阅读指南对我来说非常有益。即使有点麻烦，还是应该读指南。我已经读到最后了，而且好像有一个日语翻译项目，我想试试挑战一下。（其实我原本想和这篇文章一起投稿，但时间不够。）

结束

2019年也只剩下2周了，时间过得真快。

在IoT通信平台开发的同时，我和同事一起进行将使用AngularJS编写的应用迁移到Angular的工作。今年我们将继续进行大量的Angular迁移工作！由于这种积极的心态，我参加了Angular日本用户组的活动和ng-japan，今年我收获了很多刺激和启发。我还在研讨会上做了演讲，如果您有兴趣，请查看当时的资料 1 和资料 2。

作为一直使用 AngularJS 的人，我非常后悔没有更早参与进来。所以，对于那些打算开始接触 Angular 或已经开始接触但尚未参与的人来说，我强烈建议你们参加一下，可能会有不错的收获。

我不知道仍然在使用AngularJS的人有多少，但是对于那些决心进行迁移的人们，请务必在学习会议等场合分享你们的困惑。希望2020年能够见证Angular的进步，并且我也希望能在某种程度上提供帮助。