Угловой CLI Custom Builder - PullRequest
Новая
       56

Угловой CLI Custom Builder

0 голосов
/ 27 июня 2018

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

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

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

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

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

Реализация:

  1. Создайте каталог для ваших пользовательских сборщиков (например, custom-builders ) в корневом каталоге вашего проекта (или, альтернативно, установите его как локальный модуль npm )
  2. Внутри каталога создайте файл с именем builders.json , index.ts и package.json , содержащий запись builders, указывающую на builders.json
  3. Внутри пользовательских сборщиков создайте каталог для создателя, который вы хотите реализовать (скажем, пользовательских сборщиков / 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
                  }

Пример * * 1 097 Для полного примера посмотрите эту библиотеку: https://github.com/meltedspark/angular-builders

0 голосов
/ 28 июня 2018

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

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

...