Angular CLI 自定义构建器 [英] Angular CLI custom builder

问题描述

Angular CLI 6 引入了新的构建器概念(又名 Architect Targets).
有几个预建构建器使用 @angular-devkit/build_angular，但遗憾的是没有文档解释如何创建自己的构建器.

Angular CLI 6 introduced a new concept of builders (aka Architect Targets).
There are a couple of prebuilt builders that come with @angular-devkit/build_angular, but unfortunately there is no documentation that explains how to create your own builder.

如何创建自己的构建器(例如修改底层 webpack 配置)?

How do I create my own builder (for example to modify the underlying webpack configuration)?

推荐答案

更新:

对于 Angular 8+ 阅读 这篇 AngularInDepth 文章.

Update:

For Angular 8+ read this AngularInDepth article.

可以在此处找到全文.

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

For the sake of simplicity I assume that the new builder is implemented in Typescript, but it can be implemented in pure JavaScript as well.

1. 在项目的根目录中为您的自定义构建器(例如 custom-builders)创建一个目录(或者将其安装为 本地 npm 模块)
2. 在目录中创建一个名为 builders.json、index.ts 和 package.json 的文件，其中包含 builderscode> 条目指向 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 中实现您的构建器.构建器必须实现以下接口:

1. Create a directory for your custom builders (for example custom-builders) in the root of your project (or alternatively install it as a local npm module)
2. Inside the directory create a file called builders.json, index.ts and package.json that contains builders entry pointing to builders.json
3. Inside custom-builders create a directory for the builder you want to implement (say, custom-builders/my-cool-builder
4. Add index.ts, schema.json and schema.d.ts to my-cool-builder directory
5. Populate schema.json with the schema of your builder options. See an example here.
6. Define your schema.d.ts according to the schema.json you defined. See an example here.

7. Implement your builder in my-cool-builder/index.ts. The builder has to implement the following interface:

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 中为构建器选项定义的接口

And OptionsT is the interface you defined for your builder options in schema.d.ts

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

You can use browser architect target as a reference.

实施后，将您的构建器添加到 builders.json:

Once implemented, add your builder to 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-建设者

这篇关于Angular CLI 自定义构建器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！