Angular CLI 6自定义构建器

Question

Angular CLI 6引入了一个新的构建器概念(又名Architect Targets).
有一对夫妇的预建的建设者随之而来@angular-devkit/build_angular,但遗憾的是没有文件说明如何创建自己的构建.

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

Answer 1

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

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

执行:

1. 在项目的根目录中为自定义构建器(例如自定义构建器)创建目录(或者将其安装为本地npm模块)
2. 在目录中创建一个名为builders.json,index.ts和package.json的文件,其中包含builders指向builders.json的条目.
3. 内部自定义构建器为要实现的构建器创建目录(例如,custom-builders/my-cool-builder
4. 将index.ts,schema.json和schema.d.ts添加到my-cool-builder目录
5. 使用构建器选项的架构填充schema.json.在这里查看示例.
6. 定义你的schema.d.ts根据schema.json你定义.在这里查看示例.

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;
   }
   

   并OptionsT在接口您对您的建设者选项定义schema.d.ts

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