Als Programmierer mit dem MEAN-Stapel arbeiten: Yeoman

Durch Ted Neward | Oktober 2016

Ted Neward Willkommen Sie bei MEANers.

Wie in einem vorherigen Kolumne bereits erwähnt, ist es Zeit eine Komikbuch Verschiebung und Teilnahme an etwas "rückwirkend Continuity" – Allgemeine verschieben, wenn die Story auf seine Vergangenheit um die Zukunft bessere Unterstützung ändern muss. In diesem Fall ist die Ret-Con, Sie sich in müssen, verwenden einige der Tools, die Sie sollte am Anfang verwendet haben, aber nicht der Fall, da ich dies erforderlich, einige Teile schrittweise durchlaufen vor dem effektiv hinter den Tools ausblenden angesehen.

Eine Sache, die ich einige der E-mails, gehört haben ist z. B. die MITTLERE Entwicklungsoberfläche wie viel von der herkömmlichen .NET Erfahrung unterscheidet. Eine eingeblendet wurde bisher, zeigen Sie darauf hin, dass mit Visual Studio, stehen Ihnen alle Projektvorlagen, mit denen ein Großteil der Last, die Quelle von Ihnen weg organisieren können. ASP.NET MVC entschieden z. B. vor langer Zeit was Directory Domänencontrollern Leben würden, damit jeder ASP.NET MVC-Entwickler durchlaufen, bis zu ASP.NET MVC-Projekt erfahren alles genau sich befindet.

Beachten Sie dass, beginnen ich meine Besprechung auf Yeoman, das ECMAScript-Gerüst-Tool, das dient demselben Zweck wie die Funktion des Projekt-Vorlage in Visual Studio. (Für diejenigen, die nicht die haben des Begriffs "Yeoman" bewusst sind, definiert eine solche Wörterbuchdefinition als "eine Zeiten in einem Haushalt royal oder noble, zwischen einer Sergeant und eine bereinigen oder eine Squire und eine Seite Rangfolge." Aus diesem Grund die Yeoman Tools, Dokumentation und Website selbst als ein Cockney englische Bloke übergeben tendenziell.)

Abrufen der Yeoman auf "yo"

Fast alles in der JavaScript-Universum ähnelt Yeoman ein Befehlszeilentool, das über Npm installiert ist. Die Dokumentation für Yeoman finden Sie unter yeoman.io, aber es wird bereits offensichtlich der erste Schritt: "Npm install – g" yo"." Sobald Sie abgeschlossen ist, wird hiermit die "yo"-Befehlszeilentool für den PFAD und eine einfache Möglichkeit zum Überprüfen, ob es installiert ist, führen Sie es einfach ist. Die üblichen Liste der Optionen wird ausgeführt "yo--help" ist ausführen "yo" allein jedoch tatsächlich interessanter: Daraufhin wird ein interaktives Befehlszeilen Menü Optionen, die in Ihrem Auftrag Yeoman ausführen können, siehe Abbildung 1.

Yeoman mit Optionen für die Ausführung
Abbildung 1 Yeoman mit Ausführungsoptionen

Wenn neu installiert, Yeoman keine Generatoren bereits installiert haben (im Gegensatz zu meiner Liste in Abbildung 1 mit ein paar geschehen), jedoch einen Bildlauf nach oben oder unten (mit den Pfeiltasten) zeigt auch einigen andere Optionen, z. B. einen Generator "installieren" "einige Hilfe" oder "Get me hier!" Yeoman ist nichts, wenn nicht offensichtlich.

Der Begriff "Generator" ist ein Begriff apt und angemessen. wie Visual Studio weiß Yeoman nicht tatsächlich selbst nichts zu generieren. Stattdessen verwendet "Generatoren," Community beigetragen haben Pakete bestehen aus Skripts und Vorlagen, die den Benutzer Weitere Informationen zu generieren abgefragt werden können. Damit Yeoman diese Generatoren verwenden muss jedoch sie auf dem lokalen System installiert werden. Damit Sie installiert werden kann, müssen Sie außerdem, welche der fast 4.000 Generatoren (zum Zeitpunkt dieses Artikels) verfügbaren Abbildung, die Sie verwenden möchten.

Suchen von Generatoren Yo

Es ist zwar sicherlich möglich Yeoman können Npm suchen für Generatoren (eine der Optionen von der Befehlszeile aus ausgeführt wird), es ist in der Regel einfacher, ermöglichen Suchmaschinen verwalten, die für Sie oder Durchsuchen einfach auf die Yeoman für die Erstellung der Website (yeoman.io/generators). Daher z. B. Wenn Sie Yeoman verwenden, eine neue Anwendung für die MITTLERE Gerüst für möchten, müssen Sie zu suchen, die Angular (jetzt v1) und MongoDB. Wie sich zum Zeitpunkt der Erstellung dieses Dokuments ist die herausstellt, die bei weitem am häufigsten genutzt wird, ist die "angular-Fullstack," am oberen Rand der Liste rechts. Allerdings war es nicht, oder war es etwas andere gewünschte (z. B. einen Generator, der reagiert, oder für eine Chrome-Erweiterung oder sogar einen ASP.NET Core-Generator), können Sie die Yeoman Generatoren Seite, um ihn zu suchen. Sie möchten z. B. den Code in zwei Projekte, die Back-End-Web-API und der Front-End-Angular Client aufgeteilt. Die nahe legen würde, dass ein Express und MongoDB-Projekt (manchmal als ein Projekt MEN), über eine Reihe von Generatoren verfügbar, einschließlich "Express-api" oder "Knoten-Express-Mongo"), sowie einen anderen Generator, der eine Angular Front-End erstellen kann.

Der Generator gewünschte ist, da es sowohl Client- und serverseitigen Gerüst zu generieren, wird der Generator "angular-Fullstack". Wenn Sie der Generator ermittelt haben, Sie möchten, müssen Sie daher mit dem Npm-Tool installieren. (Yeoman nicht verwenden "yo" Generator-Installationen verwalten, beruht auf Npm, um behandelt.) Daher besteht der nächste Schritt auf "Npm install – g-Generator-angular-Fullstack." Beachten Sie das Präfix "Generator-". Dies ist die Konvention für alle Yeoman Generator Pakete.

Nach der Installation Yeoman können durch Verweisen auf diese (ohne das "Generator"-Präfix) einfach als Parameter an die "yo" Befehl: "yo angular Fullstack." An diesem Punkt Yeoman übergibt die Steuerung des Ablaufs neben den Generator selbst, und im Fall des Generators angular Fullstack es beginnen, welche Art von Anwendung Fragen zum Gerüstbau, Sie möchten:

ob Sie Babel oder TypeScript verwenden
Verwendung von HTML oder Jade (eine beliebte JavaScript-HTML-Vorlagen-Bibliothek) für markup
Welche CSS-Tools (unformatierte CSS, Sass, Tablettstift oder weniger)
Welche Angular Router (NgRoute oder UiRouter)
angibt, ob Bootstrap eingeschlossen.
ob UI-Bootstrap (eine Erweiterung Angular für Bootstrap-Funktionen) enthalten
ob Mongoose (die Sie noch nicht gesehen) oder Sequelize (Modellierung für RDBMSes) für die Modelle in der Anwendung verwenden
ob Gerüst für die Passport-Authentifizierung-Code und wenn Ja, für welche Dienste (Google, Twitter oder Facebook auswählen)
build-Tool, ob Grunt oder Gulp (das nächste Mal untersuchte) wie das Projekt
schließlich die Testtools verwenden (Jasmine oder eine Auflistung von mehreren Bibliotheken zusammen)

Nach Abschluss der Fragen und Antworten generieren Yeoman eine Fülle von Dateien (die meisten der in entweder die generierte "Client" oder "Server" Verzeichnisse erstellt wird, fallen wird). Es wird eine "Npm Install" ausgeführt, ziehen Sie alle Abhängigkeiten für den Server, und führen "Bower Install" (Dies erfordert Installation von Bower, "Npm Install – g Bower") auch für den Client verwenden. Beachten Sie, dass, da die verschiedenen Abhängigkeiten, die durch diese Schritte, in abgerufen werden je nach die genaue Version der Generator (und die verschiedenen Bibliotheken, die durch den generierten Code verwiesen wird variieren) möglich ist (wahrscheinlich selbst), dass diese Schritte Warnungen generiert.

Sobald, jedoch müssen eine vollständig fleshed, erstellte Anwendung Sie. Es geschieht nicht viel, aber wenn Sie es mit "schlucken Serve" als starten Sie die generierte Readme-DATEI gibt an (mit schlucken installiert benötigt werden – "Npm install – g Gulp-Cli" – Wenn es nicht bereits vorhanden ist), und wenn MongoDB auf Ihrem lokalen Rechner ausgeführt wird, es wird eine Seite ähnlich wie die ASP.NET MVC-Projektvorlage generiert wird, siehe Abbildung 2.

Die erstellte Anwendung Front-End
Abbildung 2 erstellten Anwendung Front-End

Beachten Sie, dass sie die vollständige Benutzer-Management-Unterstützung, einschließlich der Möglichkeit für die Authentifizierung mithilfe von Google, Facebook, hat oder Twitter (jedoch mit den einzelnen davon benötigen, erhalten die entsprechenden Anmeldeinformationen Token oder Schlüssel von jedem dieser Dienste, und sie in das Verzeichnis "Configuration" im Servercode angeben) oder über e-Mail und Kennwörter.

Hinzufügen von Lautsprechern "yo"

Da die Anwendung Sie soeben erstellt haben (der) wurde eine Speaker-Bewertungssystem, eines der ersten Dinge, die Sie in diesem neuen Codebasis Modell müssen ist der Redner. Sie bekommen Sie herausfinden, in denen Modelle usw. deklariert werden die generierten Dateien gestartet werden konnte, ist viel einfacher, Yeoman dabei unterstützen können: "yo angular-Fullstack:endpoint Referent." Sie werden gefragt, was für die API-Endpunkt-URL verwenden, und navigieren dann führe. Dies ist das Befehlszeilenäquivalent der Verwendung von Yeoman, um die ASP.NET MVC right-click-/ Add-Controller zu tun und generiert einige "emptyish" Dateien in Server/api/Lautsprecher zu ändern.

Es stellt sich heraus, die die angular-Fullstack Yeoman Generator dazu für eine Reihe von verschiedenen Elementen der clientseitigen und serverseitigen-Anwendung. Sie können die vollständige Liste der "untergeordnete Generatoren" anzeigen, indem Sie den Generator selbst eine Liste mit Fragen "yo angular-Fullstack--Help".

Layout "yo"

Da ich wirklich auf die Clientseite der Dinge untersucht noch nicht, ich lasse, die jetzt sein. Aber ich habe die Serverseite ist erkunden für einige Zeit ohne weitere Umstände also, Rückstellen.

Erstens der Servercode – nicht überraschend, befindet sich im Verzeichnis "Server". Dieses Verzeichnis enthält die Hauptanwendungsdatei, app.js, die Liste der Express-Routen in routes.js und mehrere Unterverzeichnisse, die den Rest des serverseitigen Codes enthalten. Dies umfasst das "api" (, in dem der Modell und domänenbezogenen Code befindet), "Authentifizierung" (die sich der Authentifizierungscode befindet), "Komponenten" (die nicht-API-bezogene Komponenten enthalten), "Config" (Konfiguration) und "Views" (mit nur einer 404. HTML-Datei, wenn Sie unbekannte URLs anfordern).

Das Verzeichnis für die Authentifizierung erfolgt weitgehend unverändert; Es wird selten sein, wenn überhaupt, erforderlich, um hier inf. Wie der Name schon sagt, enthält Config die Konfigurationswerte, die von der Rest der Anwendung im Wesentlichen die gleiche Weise, die ich in meinen vorherigen Artikeln wird die Datei "config.js" erstellt verwendet. Die meisten Entwickler Aufgaben werden in das Unterverzeichnis api ausgeführt.

In-api finden Sie drei Unterverzeichnisse: die Sie gerade erstellt haben ("Lautsprecher"), eine speziell für die Modellierung, Benutzer ("") und eines, das automatisch vom Generator ("Thing") als Vorlage oder Beispiel folgen generiert wird. In jedem dieser API Unterverzeichnisse, finden Sie ein Muster – eine Sammlung von "Double-Erweiterung"-Dateien: thing.controller.js, thing.events.js, thing.model.js und So weiter. Außerdem wird eine Datei index.js, die als eine Art "Single-Einstiegspunkt" für das gesamte Unterverzeichnis dient (es vereint die anderen Dateien zusammen zur einfachen Referenz vom Rest des Verzeichnisses) und eine index.spec.js-Datei, die speziell zum Testen des Codes in diesem Verzeichnis gefunden verwendet wird.

Also z. B. Wenn Sie angeben möchten, dass Lautsprecher haben einen Vornamen, Nachnamen und Liste der Themen, die sie in sprechen möchten, Sie können öffnen Sie die Datei speaker.model.js und modellieren mithilfe der Standardfunktionen Mongoose (ich dies in einem früheren Artikel erörtert, finden Sie unter msdn.com/magazine/mt683801) Siehe Abbildung 3.

Abbildung 3: Lautsprecher Mongoose Schema

'use strict';
import mongoose from 'mongoose';
var SpeakerSchema = new mongoose.Schema({
  firstName: {
    type: String,
    required: true
  },
  lastName: {
    type: String,
    required: true
  },
  topics: [String],
  active: Boolean,
  created: {
    type: Date,
    default: Date.now
  },
  updated: Date
});
SpeakerSchema
  .pre('save', function(next) {
    this.updated = new Date();
    next();
  });
export default mongoose.model('Speaker', SpeakerSchema);

(Beachten Sie, dass das "Export"; Dies ist eine neue Funktion für ECMAScript-2015, wie beschrieben in meinem Artikel im September 2015 auf msdn.com/magazine/mt422588.) Jedoch nun, dass Sie das Modell für Redner geändert haben, müssen Sie die Tests (in speaker.integration.js) aktualisieren, da Tests fehl, wenn Sie sie ausführen. Ich werde, die als Übung für Sie als eine Möglichkeit zum Untersuchen des Codes lassen. Führen Sie die Tests mit "schlucken Test: Server" die clientseitige Tests zu vermeiden. Natürlich können Sie immer Erkunden der API mithilfe von Curl ("Curl Localhost:3000/api/Speakers," die leer sein wird, es sei denn, Sie wenige über senden an diesen Endpunkt oder direkt in MongoDB einfügen. Beachten Sie, dass die Generatoren fortlaufende Entwicklung durchgeführt werden, damit zukünftige Versionen des Generators eine andere Standard-Port oder eine URL festgelegt werden).

Zusammenfassung

Dies eine besonders Code Heavy-Spalte wurde nicht, aber Sie gerade neu gestartet wurde die gesamte Anwendung, eine ganze Menge Funktionalität erzielt und im Wesentlichen die Anwendung bis zu der gleichen Ebene (und darüber hinaus) aus, was Sie für die vergangenen Jahr entwickelt hatte geschaltet. Ich muss los Gerüstbau begeistert sein! Noch wichtiger ist, erstellt alle die Teile Stück--für Stück manuell vor dem Ausführen der Gerüstbau, ist es einfacher zu verstehen den Code als Ganzes und was geschieht, wo. Z. B. routes.js Öffnung sieht in der Routingtabelle, die Sie zuvor von hand erstellten vertraut, und der Datei (im Stammverzeichnis des Projektverzeichnisses) wird größer, obwohl er im Grunde gleich bleiben, wie Sie verwendet haben, werden.

Der nur Neuerung in der Tat über Yeoman selbst verwendet werden, ist die Einführung von "Buildtool" zum Erfassen aller wichtigen Teile an die richtige Position und, was beim nächsten besprochen werden. Bis dahin jedoch... viel Spaß beim Programmieren!

Ted Neward Polytechnology Seattle basierende Berater, Referent und Mentor. Er hat hat mehr als 100 Artikel geschrieben, ist ein F#-MVP und verfasst und Mitautor ein Dutzend Bücher. Sie können ihn erreichen unter ted@tedneward.com wenn sie möchten, dass er in Ihrem Team arbeitet, oder sein Blog lesen unter blogs.tedneward.com.

Unser Dank gilt der folgenden technischen Expertin für die Durchsicht dieses Artikels: Shawn Wildermuth

Freigeben über