So erstellen Sie mühelos Ihr erstes benutzerdefiniertes Winkelschema

Es kann einfach sein - ein Kinderspiel, wenn man so will (von Gianna Ciaramello️)

BEARBEITEN: 13. 10. 2018 - Sehen Sie unter @ angle-extensions / model package & repository nach, wie Angular Schematics gemäß der neuesten Version von Angular CLI und Angular Devkit implementiert wird!

  • ng add -able library, damit wir @ angular-extension / model hinzufügen können
  • Generieren Sie Modellservices mit Tests unter Verwendung von ng g @ angular-schematics / model: model path / my-service

Testen Sie die Implementierung und den Erstellungsprozess von Schaltplänen.

Ich war sehr aufgeregt, als das Angular & CLI-Team bekannt gab, dass sie an Schaltplänen arbeiten.

Das automatische Generieren und Aktualisieren einer Codebasis in übersichtlicher Form klingt für die Entwickler viel weniger mühsam

Mit Hilfe von Schaltplänen ist vieles möglich. Von offiziellen Initiativen wie der Möglichkeit, Projektabhängigkeiten zu aktualisieren und Dinge wie Komponenten oder Pipes zu generieren, über semi-offizielle (ex Angular Team) Dinge wie nx mit Schaltplänen zum Generieren von Diensten für die beliebte ngrx-Zustandsverwaltungsbibliothek bis hin zu kleinen benutzerdefinierten Schaltplänen die ab npm auftauchen.

Mögliche Anwendungsfälle und Vorteile von Winkelschemata

Schematische Darstellungen haben einen großen Vorteil im Vergleich zu herkömmlichen Herangehensweisen bei der Bearbeitung schwerer Aufgaben wie der Verwendung von IDE-Vorlagen oder Makros, da sie einfach verteilt und semantisch versioniert werden können.

Mit Hilfe von Schaltplänen können auch projektweite Konventionen einfach eingeführt und durchgesetzt werden. Dies kann wiederum die Anlaufzeit für neue Entwickler, die an laufenden Projekten teilnehmen, erheblich verkürzen.

Anstatt zu versuchen, veraltete Dokumentationen zu entschlüsseln, könnten sie einfach projektspezifische Informationen wie ganze App-Skelette mit umgebungsspezifischen Konfigurationen oder ganze Feature-Skelette mit Backend-Integrationen und Dummy-Bildschirmen generieren.

Dann können sie sich auf das Wesentliche konzentrieren - die Implementierung von echten Funktionen für die Endbenutzer!

Was wir lernen werden

  • Was sind Schaltpläne und Sammlungen
  • Wie erstelle ich eine neue Schaltplansammlung?
  • einfachste Möglichkeit, ein neues benutzerdefiniertes Schema zu implementieren
  • So testen Sie unseren neuen Schaltplan mit einem echten lokalen Angular CLI-Projekt
  • So veröffentlichen Sie unsere neue benutzerdefinierte Schaltplansammlung in npm
  • wie Sie unsere neue Sammlung von Zollschemata in anderen Projekten verwenden
Lass uns das machen!

Was bedeutet es, wenn wir über Sammlungen und Schemata sprechen?

In diesem Artikel werden wir oft über Schaltpläne, Sammlungen und Schemasammlung sprechen. Schauen wir uns die Bedeutung dieser Begriffe genauer an, bevor wir näher darauf eingehen ...

  • Schema-Sammlung - (oder einfach Sammlung wie in diesem Artikel verwendet) ist ein Projekt (npm-Paket), das mindestens ein Schema enthält
  • schema - ist ein „Rezept“, das ausgeführt werden kann, indem mit ng generate Projektdateien generiert und angepasst werden

Wenn wir Angular CLI verwenden, können wir standardmäßig viele Diagramme ausführen, da sie in @ schematics / angular collection enthalten sind. Dies ermöglicht uns die sofortige Generierung von Komponenten, Diensten oder Rohren.

Wir können auch eine zusätzliche Sammlung von npm installieren und ihre Schemata ausführen, indem wir das zusätzliche Flag --collection an ng generate übergeben, wie im folgenden Beispiel. Ng generate --collection .

So erstellen Sie eine neue Schaltplansammlung

Um unsere eigene benutzerdefinierte Sammlung zu erstellen, müssen zuerst einige Abhängigkeiten installiert werden. Vielen Dank an Martin Hochel für den Hinweis, dass sich die Abhängigkeiten seit der Veröffentlichung des Originalartikels geändert haben und für das tolle Codebeispielbild!

  • @ angular-devkit / schematics, @ angular-devkit / schematics-cli und @ angular-devkit / core, um Schaltpläne über die Befehlszeile ausführen zu können
  • @ schematics / schematics Dies ist eine Sammlung, die Schaltpläne enthält, mit denen neue Sammlungsprojekte erstellt werden
  • rxjs ist eine Peer-Abhängigkeit

Wir können sie global installieren (npm i -g), um überall verfügbare Befehle ausführen zu können. Alles schön zusammenzufassen ...

npm i -g @ eckiges-devkit / {schematics, schematics-cli, core} @ schematics / schematics

Dann können wir unsere neue benutzerdefinierte Sammlung mit schematics @ schematics / schematics erstellen: scheme --name sammlungsname.

Ich stimme zu, das sieht aus wie ein ziemlich flippiger Befehl command

Lassen Sie uns ein bisschen Licht ins Dunkel bringen ... Der Befehl schematics akzeptiert den Parameter @ schematics / schematics: schematics, der aus zwei Teilen besteht: dem Namen der Sammlung (npm package) @ schematics / schematics und dem Namen der ausgeführten schematics which heißt in unserem Fall komischerweise schematics. Der zweite Parameter --name wird verwendet, um den Namen unserer neuen Kollektion anzugeben.

Durch Ausführen dieses Befehls wird ein neuer Ordner mit einem Projektskelett für die Entwicklung unserer neuen Sammlung mit einigen Dummy-Schaltplanbeispielen und nützlichen Build- und Testskripten erstellt.

Einfachste Möglichkeit, ein neues benutzerdefiniertes Schema zu erstellen

Schaltpläne sind sehr leistungsfähig und können neben der Generierung neuer Dateien viele weitere Funktionen ausführen. In offiziellen Begriffen wenden Schemata Regeln auf den Baum an, der alle vorhandenen Projektdateien und den Staging-Bereich darstellt. Dabei handelt es sich um eine Liste der Änderungen, die auf diese Dateien angewendet werden.

Dies mag sich nach einer Menge zu lernender Dinge anhören, bevor wir die Schaltpläne in unserem Projekt nutzen können. Zum Glück gibt es einen einfacheren Weg ...

Wir können einfach Standard-Winkelschemata kopieren und anpassen, um sofort nützliche Ergebnisse zu erzielen und später bei Bedarf erweiterte APIs zu erlernen

Im vorherigen Schritt haben wir das Grundgerüst eines neuen Sammlungsprojekts generiert, das einige Beispielschemata enthält, um uns den Einstieg zu erleichtern. Das erste, was wir tun müssen, ist einen Blick in die Datei collection.json zu werfen, die die Definition aller implementierten Schaltpläne enthält, und einige Anpassungen vorzunehmen.

Entfernen Sie alle standardmäßig generierten Schaltpläne und ersetzen Sie sie durch unsere neuen benutzerdefinierten Service-Schaltpläne

Anschließend können wir den Inhalt der ursprünglichen Angular-Serviceschemata in node_modules / @ schematics / angular / service in unseren src / my-custom-service kopieren.

Relative Importe in index.ts werden unterbrochen, daher müssen sie durch absolute ersetzt werden, indem ../ durch @ schematics / angular / ersetzt wird. Der Typoskript-Compiler sollte aufhören, sich zu beschweren, und es sollte möglich sein, Tests mit npm t erfolgreich auszuführen.

Schauen wir uns den Inhalt des Dateiverzeichnisses an. Es enthält einige komisch aussehende Verzeichnisse und Dateien mit Namen wie __name@dasherize__.service.ts, die verwendet werden, um Funktionen zum Schablonieren von Schemata zu aktivieren.

In unserem Beispiel stellt __name__ ein Token dar, das durch den in ng generate my-custom-service angegebenen Dienstnamen ersetzt wird, und dasherize ist eine der bereitgestellten Hilfsfunktionen, die standardisierte Dateinamen ausgibt und camelCase in strichgetrennte Dateinamen konvertiert .

Ebenso enthält die Datei selbst eine Vorlage für eine Servicedatei, die von Angular CLIÉ generiert wird.

Nehmen wir an, wir haben in unserem Projekt die Konvention, dass unsere Geschäftsdienste niemals Datenabruflogik enthalten, die wiederum von dedizierten Ressourcendiensten verwaltet wird. In diesem Fall erhalten wir viele Dienste, die so aussehen ...

Ein solcher Service kann mit einer Vorlage wie dieser generiert werden ...

Beachten Sie, wie wir zwei verschiedene Hilfsfunktionen zum Klassifizieren und Dasherisieren verwendet haben, um den übergebenen Dienstnamen in geeignete Formulare für die Verwendung umzuwandeln (Klassenname vs. Dateiimportpfad).
Dort haben wir gerade unseren ersten nützlichen benutzerdefinierten Schaltplan erstellt!

Das Kopieren des Standard-Angular-Serviceschemas bietet einen weiteren Vorteil, da alle ursprünglichen Parameter und Flags sofort unterstützt werden. Wie bei der Vorlage können wir die Liste der unterstützten Flags einfach erweitern, um die gewünschte neue Funktionalität zu implementieren.

Nehmen wir an, wir möchten flag - interface einführen, um anzugeben, ob unser Service Schnittstellen-Stub für eine entsprechende Entität enthalten soll. Wenn das Flag übergeben wird (Variable ist auf true gesetzt), soll unser Service so aussehen ...

Um dies zu erreichen, müssen wir neue Interface-Eigenschaften in die Dateien schema.json und schema.d.ts einfügen.

schema.jsonschema.d.ts
Ein skalierbarer Ansatz besteht darin, die Datei schema.d.ts mit Hilfe einer Hilfsprogrammbibliothek zu generieren. In unserem Fall scheint die Handbearbeitung jedoch einfach und unkompliziert zu sein

Gut, wir können jetzt --interface-Flag ohne Beschwerden von Angular CLI verwenden, aber der generierte Service endet in beiden Fällen gleich. Im letzten Schritt müssen wir die Service-Vorlage anpassen, um unsere neue Flagge nutzen zu können…

Wie wir sehen können, unterstützt das Template die Auswertung von bedingten Anweisungen mit <% = if (variableName)%> Inhalt <% =}%> und verschachtelten Anweisungen. Diese Funktionen sind sehr leistungsfähig und ermöglichen es uns, beliebige komplexe Vorlagen zu erstellen.

Cool! Unser Schaltplan generiert einen nützlichen Service. Jetzt ist es an der Zeit, es in einem echten Projekt einzusetzen ...

Testen von Schaltplänen mit echten Angular CLI-Projekten

Sobald wir unsere benutzerdefinierte Sammlung erstellt haben, sollten wir entsprechende Komponententests schreiben, um sicherzustellen, dass alles wie erwartet funktioniert.

Der nächste logische Schritt besteht darin, unsere Kollektion in der Praxis zu testen. Dies kann in jedem lokalen Angular CLI-Projekt durchgeführt werden. Zuerst müssen wir npm build ausführen, um Typescript-Quellen unserer Sammlung zu kompilieren, und dann npm link ausführen, um sie für die Verknüpfung mit anderen lokalen Projekten verfügbar zu machen.

Dann können wir zu unserem Zielprojekt navigieren und npm link our-collection-name ausführen. Nach erfolgreicher Verknüpfung können wir ng g schematics-name -c our-collection-name ausführen, um festzustellen, ob Dateien mit erwartetem Inhalt im erwarteten Pfad generiert werden.

Folgen Sie mir auf Twitter, um über die neuesten Blog-Beiträge und interessante Frontend-Inhalte informiert zu werden

Veröffentlichen einer benutzerdefinierten Schemasammlung in npm

Benutzerdefiniertes Sammlungsprojekt, das mit bereitgestellten Schaltplänen erstellt wurde, ist per se nicht veröffentlichungsfreundlich.

Es enthält ein Build-Npm-Skript, das nur die vorhandenen Typescript-Quellen kompiliert. Kombinieren Sie das mit der Standard-.gitignore-Datei, die kompilierte Javascript-Dateien ausschließt, und wir erhalten einen netten "Modul nicht gefunden" -Fehler, wenn wir eine Sammlung installieren und verwenden, die nur mit npm publish ohne Optimierung veröffentlicht wurde.

Die einfachste Möglichkeit, dies zu erreichen, besteht darin, die Regel zu entfernen, die die generierte .js-Datei aus .gitignore ignoriert, damit sie zusammen mit den Typescript-Quellen veröffentlicht werden.

Beachten Sie, dass es elegantere Lösungen gibt, wenn Sie Typescript-Quellen in einen dist-Ordner kompilieren und nur das veröffentlichen, aber hey, dies ist nur ein Entwicklungswerkzeug und es funktioniert großartig, das ist gut genug!

Verwendung der neuen benutzerdefinierten Schaltplansammlung in anderen Projekten

Dies ist ganz einfach, wir installieren nur die neu veröffentlichte Sammlung, wie wir es für jedes andere npm-Paket mit npm i -D our-collection-name tun würden.

Dann können wir ng erzeugen schematics-name --collection-our-collection-name ausführen. Dies kann zu ng g schematics-name -c our-collection-name verkürzt werden, was die Eingabe erheblich vereinfacht.

Denken Sie daran, dass eine Sammlung möglicherweise mehr als ein nützliches Schema enthalten kann.

Beispiel für eine benutzerdefinierte Schemasammlung

Einer der Gründe, warum ich mich sehr für Angular Schematics interessierte, war, dass ich eine kleine State-Management-Bibliothek für Angular namens ngx-model geschrieben habe.

Das Erstellen neuer Modellservices erfordert ein wenig sich wiederholendes Boilerplate, da immer ModelFactory injiziert und die Modellinstanz instanziiert werden muss. Darüber hinaus ist es sehr hilfreich, einen Typ für unser Modell an mehreren Stellen bereitzustellen, um eine gute Code-Vervollständigung und Unterstützung für die Typprüfung zu erhalten.

All dies kann mit Editor-Vorlagen (IDE) erledigt werden, aber nicht jeder verwendet denselben Editor, und es wäre eine nicht einfache Aufgabe, alle diese Vorlagen für jeden gängigen Editor zu verteilen.

Schaltpläne passen viel besser in dieses Szenario, da sie den Paket-Manager nutzen, der von jedem Frontend-Entwickler verwendet wird, an dem wir interessiert sind / Schaltpläne sind genug, um den Ball ins Rollen zu bringen.

Ideen, was Sie mit unseren Schaltplänen generieren können

Die Schemata des ngx-Modells generieren sowohl Service- als auch entsprechende Testdateien. Sie enthalten das notwendige Boilerplate und eine zusätzliche Beispielmethode mit einem entsprechenden Test.

Die Entwickler müssen lediglich ihre eigenen Methoden hinzufügen, die dem angegebenen Beispiel folgen.

Schemata, die Kesselplatinen und Anwendungsbeispiele generieren, haben ein enormes Potenzial, die Lernkurve für neue Entwickler zu verkürzen, die sich einem bestehenden Projekt anschließen

Das Generieren von Anwendungsbeispielen kann auch eine gute Möglichkeit sein, das Know-how über die projektspezifischen Konventionen und bewährten Verfahren zu verbreiten. Immer auf dem neuesten Stand in einer kontrollierten semantisch versionierten Weise. Das klingt nach einer ziemlich großartigen Lösung, wenn Sie mich fragen

Das ist alles für jetzt!

Wie Sie vielleicht bemerkt haben, bin ich ein großer Fan von Entwicklerproduktivität und daher Schaltplänen. Ich sehe ein großes Potenzial in ihrer Verwendung und hoffe, dass Sie diese Tipps verwenden können, um die Entwicklererfahrung auch in Ihren Projekten zu verbessern!

Bitte helfen Sie, diese Tipps mit Ihrem GitHub einem breiteren Publikum zugänglich zu machen, und bewerben Sie @ angle-extensions / schematics mit GitHub. Wenn Sie ein Benutzer mit NGX-Modell sind, vergessen Sie nicht, Ihr eigenes Schema zu erstellen und haben Sie Spaß !

Sie können sich auch einige andere interessante Angular-Posts ansehen…

Und vergiss nie, die Zukunft ist hell
Offensichtlich die glänzende Zukunft ( von SpaceX)