webentwicklung-frage-antwort-db.com.de

Angular Benutzerdefinierter Builder für CLI 6

Angular CLI 6 führte ein neues Konzept für Builder (aka Architect Targets) ein.
Es gibt eine Reihe von vorgefertigten Buildern , die mit @angular-devkit/build_angular geliefert werden, aber leider gibt es keine Dokumentation, in der erklärt wird, wie Sie einen eigenen Builder erstellen. 

Wie erstelle ich einen eigenen Builder (um beispielsweise die zugrunde liegende Webpack-Konfiguration zu ändern)?

5
meltedspark

Den vollständigen Artikel finden Sie hier .

Der Einfachheit halber gehe ich davon aus, dass der neue Builder in TypeScript implementiert ist, er kann jedoch auch in reinem JavaScript implementiert werden.

Implementierung:

  1. Erstellen Sie ein Verzeichnis für Ihre benutzerdefinierten Builder (z. B. custom-builders) im Stammverzeichnis Ihres Projekts (oder installieren Sie es alternativ als local npm module ).
  2. Erstellen Sie im Verzeichnis eine Datei namens builders.json, index.ts und package.json, die den Eintrag builders enthält, der auf builders.json verweist.
  3. Erstellen Sie in custom-builders ein Verzeichnis für den Builder, den Sie implementieren möchten (z. B. custom-builders/my-cool-builder).
  4. Fügen Sie index.ts, schema.json und schema.d.ts zum Verzeichnis my-cool-builder hinzu
  5. Füllen Sie schema.json mit dem Schema Ihrer Builder-Optionen. Siehe ein Beispiel hier .
  6. Definieren Sie Ihr schema.d.ts gemäß dem von Ihnen definierten schema.json. Siehe ein Beispiel hier .
  7. Implementieren Sie Ihren Builder in my-cool-builder/index.ts. Der Builder muss die folgende Schnittstelle implementieren: 

    export interface Builder<OptionsT> {
      run(builderConfig: BuilderConfiguration<Partial<OptionsT>>):  Observable<BuildEvent>;
    }
    

    Während BuildEvent ist dies: 

    export interface BuildEvent {
      success: boolean;
    }
    

    BuilderConfiguration ist das:

    export interface BuilderConfiguration<OptionsT = {}> {
      root: Path;
      sourceRoot?: Path;
      projectType: string;
      builder: string;
      options: OptionsT;
    }
    

    Und OptionsT ist die Schnittstelle, die Sie für Ihre Builderoptionen in schema.d.ts definiert haben. 

    Sie können browser architect als Referenz verwenden.

  8. Fügen Sie nach der Implementierung Ihren Builder zu builders.json hinzu: 

    {
      "$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"
        }
      }
    }
    

Verwendungszweck:

In Ihrem angle.json:

    "architect": {
        ...
        "build": {
                  "builder": "./custom-builders:cool-builder"
                  "options": {
                         your options here
                  }

Beispiel

Das vollständige Beispiel finden Sie in dieser Bibliothek: https://github.com/meltedspark/angular-builders

10
meltedspark

Ich habe es nicht getestet und bin nicht ganz sicher, aber dieses Konzept könnte eine Lösung sein.

architect.build.builder verwendet einige Angular - Schemata, um den Erstellungsprozess durchzuführen. Sie können eigene Schemata erstellen, die reguläre Build-Schemata mit zusätzlicher Logik verwenden/erben, die Sie implementieren möchten.

0
user3007799