قم بترقية CLI الخاص بك

الآن العديد من الأطر لديها CLI (واجهة سطر الأوامر) في ترسانتها والزاوية ليست استثناء. لقد واجهت أدوات CLI لأول مرة عندما جربت EmberJS ثم بدا لي أنها أداة مريحة للغاية وفرت وقتي كثيرًا. ولكن ، لسوء الحظ ، فإن أدوات CLI خارج الصندوق مناسبة فقط للمشروعات المنزلية البسيطة.

يكاد يكون من المستحيل استخدامها في مشاريع الإنتاج الكبيرة دون الانتهاء من ملف. لذلك ، في بداية مشروعنا ، اضطررنا للتخلي عن استخدامه بسبب خصائص الهندسة المعمارية لدينا. لمدة عام تقريبًا ، كنت أتطلع بشكل دوري إلى Angular CLI من حيث تطوره وكنت مستاءًا لأننا لم نتمكن من استخدامه ، لأنه سيجعل الدخول إلى المشروع أسهل بكثير. ولكن في مرحلة ما ، أصدر فريق Angular @ angular-devkit ، والذي يحتوي على مجموعة من الحزم التي تستخدمها الأداة المساعدة cli ، وهذا أعطانا الفرصة لتخصيص Angular CLI لاحتياجاتنا. يحتوي المستودع حاليًا على حوالي اثنتي عشرة حزمة ، ولكن في هذه المقالة سننظر فقط في تلك المتعلقة بالمخططات.

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