web-dev-qa-db-ja.com

Angular CLIカスタムビルダー

Angular CLI 6では、ビルダー（別名Architect Targets）の新しい概念が導入されました。
@angular-devkit/build_angular に付属するいくつかの ビルド済みビルダー がありますが、残念ながらありません独自のビルダーの作成方法を説明するドキュメント。

独自のビルダーを作成するにはどうすればよいですか（たとえば、基になるWebpack構成を変更するために）？

angularangular-cliangular-builderangular-devkit
13
JeB

完全な記事は here にあります。

簡単にするために、新しいビルダーはTypeScriptで実装されていると想定していますが、純粋なJavaScriptでも実装できます。

実装：

  1. プロジェクトのルートにカスタムビルダー用のディレクトリを作成します（例custom-builders）（または local npm module としてインストールします）。
  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.jsonに従ってschema.d.tsを定義します。例をご覧ください こちら 。

  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

15
JeB

私はそれをテストしなかったし、私はよくわかりませんが、この概念は解決策かもしれません。

architect.build.builderは、ビルドプロセスを実行するために、いくつかのAngular回路図を使用します。実装する追加のロジックを持つ通常のビルド回路図を使用/継承する独自の回路図を作成できます。

0
user3007799

Angular 8以降）を使用する人のために、ビルダーAPIが正式にサポートされ、文書化されました： https://angular.io/guide/cli-builder

以前のバージョンと比較して多くの変更があるため、文書化されていないArchitect APIを使用している場合、Angular 7から8への移行は複雑になる可能性があります。

ここに、始めるための素晴らしい記事があります： https://blog.angular.io/introducing-cli-builders-d012d4489f1b

0
Alexey Grinko