web-dev-qa-db-fra.com

Angular Constructeur personnalisé CLI 6

Angular CLI 6 a introduit un nouveau concept de constructeur (également appelé Architect Cibles).
Il y a quelques constructeurs pré-construits qui viennent avec @angular-devkit/build_angular , mais malheureusement, aucune documentation n’explique comment créer votre propre constructeur. 

Comment créer mon propre générateur (par exemple, pour modifier la configuration du pack Web sous-jacent)?

angularangular6angular-cli-v6anguar-devkitangular-builder
5
meltedspark

L'article complet peut être trouvé ici .

Par souci de simplicité, je suppose que le nouveau générateur est implémenté dans TypeScript, mais il peut également être implémenté en JavaScript pur.

La mise en oeuvre:

  1. Créez un répertoire pour vos générateurs personnalisés (par exemple, custom-builders) à la racine de votre projet (ou installez-le en tant que local n module )
  2. Dans le répertoire, créez un fichier nommé builders.json, index.ts et package.json contenant une entrée builders pointant vers builders.json.
  3. Dans custom-builders, créez un répertoire pour le générateur que vous souhaitez implémenter (par exemple, custom-builders/my-cool-builder
  4. Ajouter index.ts, schema.json et schema.d.ts au répertoire my-cool-builder
  5. Remplissez schema.json avec le schéma de vos options de générateur. Voir un exemple ici .
  6. Définissez votre schema.d.ts en fonction du schema.json que vous avez défini. Voir un exemple ici .

  7. Implémentez votre générateur dans my-cool-builder/index.ts. Le constructeur doit implémenter l'interface suivante: 

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

    Alors que BuildEvent est ceci: 

    export interface BuildEvent {
  success: boolean;
}

    BuilderConfiguration est ceci:

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

    Et OptionsT est l'interface que vous avez définie pour vos options de générateur dans schema.d.ts 

    Vous pouvez utiliser browser architect target comme référence.

  8. Une fois implémenté, ajoutez votre générateur à 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"
    }
  }
}

Usage:

Dans votre angular.json:

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

Exemple

Pour un exemple complet, consultez cette bibliothèque: https://github.com/meltedspark/angular-builders

10
meltedspark

Je ne l'ai pas testé et je ne suis pas tout à fait sûr, mais ce concept pourrait être une solution.

architect.build.builder utilise des schémas Angular pour effectuer le processus de construction. Vous pouvez créer vos propres schémas qui utilisent/héritent des schémas de construction standard avec une logique supplémentaire que vous souhaitez implémenter.

0
user3007799