Angular Benutzerdefinierter Builder für CLI 6

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