Atualize seu CLI

Agora, muitos frameworks têm CLI (Command Line Interface) em seu arsenal e angular não é exceção. Eu encontrei os utilitários CLI pela primeira vez quando experimentei o EmberJS, e então ele me pareceu uma ferramenta muito conveniente que economizou muito meu tempo. Infelizmente, os utilitários CLI prontos para uso são adequados apenas para projetos domésticos simples.

Usá-los em grandes projetos de produção sem terminar com um arquivo é quase impossível. Portanto, no início do nosso projeto, fomos obrigados a abandonar o seu uso devido às peculiaridades da nossa arquitetura. Por quase um ano, olhei periodicamente para o Angular CLI em termos de desenvolvimento e fiquei chateado por não podermos usá-lo, pois tornaria a entrada no projeto muito mais fácil. Mas a certa altura, a equipe do Angular lançou o @ angular-devkit, que contém um conjunto de pacotes usados ​​pelo utilitário cli, e isso nos deu a oportunidade de personalizar o Angular CLI para nossas necessidades. O repositório atualmente contém cerca de uma dúzia de pacotes, mas neste artigo consideraremos apenas aqueles relacionados a esquemas.

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 . :

, externalSchematic, Angular. Angular, , schematics . Angular, staging area ‘ts’ . kind ‘c’.

, , Invalid source: undefined. , angular-CLI. , .

CLI

schematics Angular CLI, :

ng new my-project

:

npm link $PATH_TO_SCHEMATIC_PROJECT

schematics , , , npm . , CLI:

, , , , . , .

, , . , , , . , ?

, . , , typescript json , , , ast . , ast typescript, Angular. Angular schematics CLI, . , , , . , . :

• ,
• providers

schematics Angular:

findModuleFromOptions – Angular, .

buildRelativePath – .

addProviderToModule – providers . Angular addExportToModule, addImportToModule, addDeclarationToModule, addBootstrapToModule, etc.

, . , , ast :

:

, buildRelativePath addProviderToModule . addProviderToModule , InsertChange. API schematics – beginUpdate, insertLeft commitUpdate. , , .

, , :

, Angular, , , .

, schematics – , . , , Angular , . , @angular-devkit.

, github — https://github.com/KyKyPy3/schematics.

: KyKyPy3uK