🤞 🧑🏼 🤘🏾 Mettez à niveau votre CLI 🆑 🚵🏼 🤹

Maintenant, de nombreux frameworks ont CLI (Command Line Interface) dans leur arsenal, et angular ne fait pas exception. J'ai rencontré pour la première fois les utilitaires CLI lorsque j'ai essayé EmberJS, puis cela m'a semblé un outil très pratique qui m'a beaucoup fait gagner du temps. Mais, malheureusement, les utilitaires CLI prêts à l'emploi ne conviennent que pour les projets domestiques simples.

Les utiliser dans de grands projets de production sans terminer avec un fichier est presque impossible. Par conséquent, au début de notre projet, nous avons été contraints d'abandonner son utilisation en raison des particularités de notre architecture. Pendant près d'un an, j'ai périodiquement regardé vers la CLI angulaire en termes de développement et j'étais contrarié que nous ne puissions pas l'utiliser, car cela faciliterait beaucoup l'entrée dans le projet. Mais à un moment donné, l'équipe Angular a publié @ angular-devkit, qui contient un ensemble de packages utilisés par l'utilitaire cli, ce qui nous a donné l'opportunité de personnaliser la CLI Angular pour nos besoins. Le référentiel contient actuellement une douzaine de packages, mais dans cet article, nous ne considérerons que ceux liés aux schémas.

Schematics CLI , . , ‘ng new’, , ‘ng generate’ - , schematics. Angular , schematics. nrwl.io, , ngrx, redux- . schematics CLI , ? , :

, Angular CLI. schematics .
(breaking changes) .
IDE schematics. , schematics, , , .
, , , .

, , shematics. , , schematics.

schematics?

Schematics – @angular-devkit, : , , , .

, , , schematics : (). schematics-, , in-memory , , . git – (staging area), , (commit). :

- , schematics (Action List), . , Sink, .

, , schematics . schematics , schematics-cli:

npm install -g @angular-devkit/schematics-cli

schematics Angular CLI, npm . schematics. schematics:

schematics blank --name=sample

, CLI . , :

, npm , src — collection.json, index.ts index_spec.ts.

collection.json schematics . . :

schematics :

, schematics, . :

schema – json , , .
factory — , .
description — , , angular-CLI.
hidden — CLI- .
aliases — .
extends — schematic , . , , .

factory description , .

package.json, , schematics, . , CLI- , .

index.ts, :

, . options, , CLI, schematics . Rule. , , . Tree, . Tree :

base –
staging area – , base

, base , staging area. , git. Rule. Rule – , (Tree), . Rule – schematic , , . Rule, , , .

. , , . , .. schematics , console.log . Rule , . , , , Observable, . , , npm, package.json.

, :

npm run build
schematics .:sample --name=test

CLI , . , ‘.’.

, . , options, , any. , , , CLI , , . . – schema.json schema.ts. angular-CLI, , . . scheme.ts:

schema.json:

. , :

, . , . quiet , . , - , . . CLI , , . , , . x-promt , . , , .

, :

, , , , schematics.

schematics

schematics , . , , – , , . Tree, Rule, :

create(path: string, content: Buffer | string): void;
delete(path: string): void;
rename(from: string, to: string): void;
overwrite(path: string, content: Buffer | string): void;
read(path: string): Buffer | null;
exists(path: string): boolean;

, . , schematics – , , . schematics . , , ‘–dry-run=false’:

schematics .:sample --name=test –dry-run=false

, , , , , , , — . , . schematics :

contentTemplate<T>(options: T)
pathTemplate<T>(options: T)
template<T>(options: T)

contentTemplate , pathTemplate , template . ? (Action) . :

template null, DeleteAction
, RenameAction
, OverwriteAction

template – . , , . :

, files . , – . files . , :

__name@dasherize__.service.ts

template , . , ‘_’. , . name. name – @dasherize. , name .

. dasherize – , template . , :

__name@dasherize__.service.ts

__name@dasherize__.service.spec.ts

, template , . if for:

<% if (a) { %>b<% } %>
<% for (let i = 0; i < value; i++) { %>1<% } %>

, template:

, . , template , apply. Source Rule, .

Source , Tree, base. Source , url, . Rule filter, , . spec , noop, Tree, spec . template, , , , strings, , dasherize classify. angular, . move, .

apply Source , . – chain, mergeWith, branchAndMerge. chain Rule Rule, rule. mergeWith Tree , apply. , rebase git-. . branchAndMerge Tree . , dry-run=false, – , .

schematics , . , , , . API , schematics – externalSchematic schematic. , – .

. , .

, , , component Angular. , . Angular . :