Угловой CLI 6 Custom Builder

Question

Angular CLI 6 представил новую концепцию разработчиков (aka Architect Targets).
Есть несколько готовых строителей, которые идут с @angular-devkit/build_angular, но, к сожалению, нет документации, объясняющей, как создать свой собственный конструктор.

Как мне создать свой собственный конструктор (например, чтобы изменить базовую конфигурацию веб-пакета)?

Answer 1

Полный текст статьи можно найти здесь.

Для простоты я предполагаю, что новый компоновщик реализован в Typescript, но также может быть реализован и на чистом JavaScript.

Реализация:

1. Создайте каталог для ваших пользовательских сборщиков (например, пользовательских сборщиков) в корне вашего проекта (или альтернативно установите его как локальный модуль 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.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

Answer 2

Для тех, кто использует Angular 8 и выше, API Builder теперь официально поддерживается и документирован: https://angular.io/guide/cli-builder

В нем много изменений по сравнению с предыдущей версией, поэтому переход с Angular 7 на 8 может усложниться, если вы используете недокументированный API Architect.

Вот хорошая статья для начала: https://blog.angular.io/introducing-cli-builders-d012d4489f1b

Answer 3

Я не проверял это, и я не совсем уверен, но эта концепция может быть решением.

architect.build.builder использует некоторые угловые схемы для выполнения процесса сборки. Вы можете создавать свои собственные схемы, которые используют / наследуют обычные схемы сборки с дополнительной логикой, которую вы хотите реализовать.