[MUSIC]
Jetzt, da Sie Node.js auf Ihrem Computer haben,
möchten Sie offensichtlich sofort mit der Verwendung beginnen.
Also, in dieser Übung werden wir anfangen, Node zu verwenden.
Wir werden eine verpackte oder benachbarte Datei für
unseren Git-Testordner einrichten, mit dem wir bisher gearbeitet haben.
Dann werden wir ein Knotenmodul als Lite-Server genannt einrichten, die
den Inhalt unseres get-Test-Ordners dienen wird.
Und dann können wir diese index.html Datei und
andere Dateien in einem Browser durchsuchen.
Und wir werden auch sehen, wie der Lite-Server es uns ermöglicht,
automatisch Updates in unserem Browserfenster zu sehen
, während wir Änderungen an unserer index.html Datei oder anderen Dateien in unserem get test Ordner vornehmen.
Der Lite-Server ist etwas, das wir in diesen und
zukünftigen Kursen ausgiebig verwenden werden, um die Änderungen in Echtzeit
in einem Browserfenster sehen zu können, während Sie die Dateien Ihres Projekts bearbeiten.
Wie ich bereits erwähnt habe, möchten wir die package.json-Datei einrichten.
Also, was genau ist diese package.json-Datei, die wir einrichten werden?
Also hier habe ich einige Informationen von
der npmjs.org-Site
, die angibt, was genau die Rolle der package.json-Datei ist.
Die package.json-Datei dient also als Dokumentation darüber, wovon alle
anderen Pakete Ihr Projekt abhängig ist.
Wenn Sie beispielsweise den Lite-Server Ihres Projekts einrichten,
wird dieser in der Datei package.json aufgezeichnet.
Und damit Sie dieses Paket später auch in Zukunft nutzen können.
Außerdem können Sie angeben, von welcher spezifischen Version eines Pakets
Ihr Projekt abhängig ist.
Selbst wenn das Paket, das Sie von Änderungen in der Zukunft abhängen,
können Sie darauf bestehen, dass Sie möchten, dass der Benutzer nur eine bestimmte
Version des Pakets für die Verwendung in Ihrer Knotenanwendung installieren.
Und es macht Ihre Builds reproduzierbar,
was bedeutet, dass, wenn Sie Ihren Code mit anderen teilen,
sie auch die Installation aller Knotenmodule durchführen können,
wie wir später in dieser Übung sehen werden, auf ihrem eigenen Computer.
Also offensichtlich wird Ihre nächste Frage sein, wie erstellen wir diese package.json-Datei?
Wenn Sie ein neues Projekt starten, in dem Sie die
Datei package.json initialisieren möchten, geben Sie einfach npm init an der Eingabeaufforderung im Projektordner ein.
Und dann führt Sie das durch eine Reihe von Schritten, mit denen Sie
Ihre package.json-Datei konfigurieren können.
Also lassen Sie uns damit für unser Git-Testprojekt fortfahren.
Also hier bin ich im Git-Test-Ordner in meinem Terminal-Fenster.
Stellen Sie sicher, dass Sie auch ein Terminalfenster oder ein Befehlsfenster öffnen und
dann zum Ordner git-test gehen. Geben
Sie an der Eingabeaufforderung npm init ein.
Und dann folgen Sie den Fragen, die gestellt werden.
Für den Namen des Projekts belassen wir es einfach als Standard, git-Test.
Für Version lassen wir es einfach als 1.0.0. Das
können wir später bearbeiten.
Zur Beschreibung
ist dies ein Testverzeichnis,
um Git und Node zu lernen.
Es spielt keine Rolle, geben Sie dort eine Beschreibung ein.
Und dann der Einstiegspunkt, würde ich nur sagen index.html.
Normalerweise ist der Einstiegspunkt index.js, wenn es sich um ein Knotenpaket handelt.
Jetzt ist dieser Ordner, den wir eingerichtet haben
, ein index.html basierter Ordner, also habe ich gerade index.html eingegeben.
Testbefehl, nichts.
Git-Repository, wenn wir bereits das Git-Repository in der vorherigen
Übung eingerichtet haben, wird es automatisch aufgefordert, dass für Sie, wenn nicht,
dies wäre leer und Ihnen eine Option geben, die Git-Repository-URL einzugeben,
falls Sie ein Online-Git-Repository verwenden.
Einige Schlüsselwörter für Ihr Projekt, die ich leer lassen werde.
Autor, geben Sie Ihren Namen ein.
Lass uns narzisstisch sein.
Und die Lizenz.
Und dann zeigt es Ihnen die Konfiguration der package.json-Datei im JSON-Format an.
Also, wenn Ihre Familie ein JSON hat, sieht es Ihnen sehr, sehr vertraut aus.
Wenn das also alles gut aussieht, sagen wir einfach OK und
dann führt das zur Erstellung der package.json-Datei.
Wenn Sie also jetzt den Ordnerinhalt auflisten,
würden Sie die Datei package.json im Ordnerinhalt sehen.
Öffnen Sie diesen Git-Testordner in Ihrem bevorzugten Editor,
und werfen Sie einen Blick auf den Inhalt der package.json-Datei in Ihrem Editor.
Im nächsten Schritt werden wir lernen, wie wir ein Knotenmodul
mit NPM, dem Node Package Manager, installieren können.
Also, wir werden dieses Knotenmodul als Light-Server zu installieren.
Der Light-Server stellt den Inhalt dieses Git-Test-Ordners in
einem Server bereit, den er startet, damit Sie den Inhalt in einem Browser anzeigen können.
Angesichts der Tatsache, dass wir eine index.html Datei haben,
wenn wir diesen Ordner aufstellen, dann wird es eine Website sein.
Und Sie können die index.html in einem Browser anzeigen.
Also, lassen Sie uns den Light-Server einrichten und dann werden wir sehen, wie wir
den Light-Server nutzen können, um den Inhalt dieses Ordners zu servieren.
Dies ist sehr, sehr nützlich, denn wenn Sie an einem
Web-Entwicklungsprojekt arbeiten, Sie möchten sehen, wo Live-Version Ihres Web-Entwicklungsprojekts.
So
können Sie, wenn Sie Änderungen an Ihrem Projekt vornehmen, die Änderungen sofort im Browser widergespiegelt werden.
Dies ist also ein sehr gutes Knotenpaket, das für diesen Zweck sehr nützlich ist.
Also lassen Sie uns diesen Light-Server einrichten. Fügen
Sie dazu die Eingabeaufforderung hinzu.
Geben Sie NPM-Installation ein.
Beachten Sie also, wenn Sie möchten, dass NPM ein Knotenpaket installiert,
so werden Sie es aufrufen und dann sagen Sie lite-server.
Und dann wollen wir auch die Tatsache speichern, dass unser Projekt den Lite-Server verwendet.
Also werden wir diese Informationen in der package.json-Datei speichern.
Also, um das zu tun, werden Sie eingeben - save-dev.
Nun gibt die Option save-dev an, dass dieser Lite-Server für die
Entwicklungsabhängigkeit für unser Projekt verwendet wird.
Wenn Sie ein Knotenmodul installieren, von dem Ihr Projekt direkt
abhängig ist, dann würden Sie es installieren, indem Sie einfach die Option —save sagen.
Also, lassen Sie uns voran und installieren es.
Und Sie warten geduldig auf die Installation.
Es wird alle ein paar Minuten dauern, bis die Installation abgeschlossen ist.
Sobald das installiert ist, werden Sie sofort
bemerken, wenn Sie sich den Inhalt Ihres Ordners ansehen,
werden Sie sofort feststellen, dass dort ein Ordner namens node_modules erstellt wurde.
Wenn Sie nun in das node_module gehen, sehen Sie
dort eine ganze Reihe anderer Unterordner, die Knotenmodule enthalten,
die für Ähnlichkeiten wie unser Knotenmodul usw. notwendig sind.
Lassen Sie uns also einen kurzen Rundgang durch den Ordner „Knotenmodule“ machen, um zu sehen,
was der Inhalt dieser sind.
Wenn Sie in meinen Git-Test-Ordner gehen,
würden Sie, wie gesagt, eine ganze Reihe von Unterordnern sehen.
Normalerweise müssen Sie sich nicht in den Ordner „Knotenmodule“ wagen.
Sie existieren nur dort, weil sie für die [UNHÖRBLICH] benötigt werden.
Wenn Sie also durchblättern, sollten Sie hier einen Ordner mit dem Namen lite-server bemerken.
Wenn Sie in den lite-server Ordner gehen,
beachten Sie insbesondere das Vorhandensein der Datei index.js und
dann Ihre package.json Datei und einige andere Dinge.
Dieser Inhalt des Ordners umfasst also das Lite-Server-Knotenmodul.
Dieses Lite-Server-Knotenmodul ist jedoch von anderen Knotenmodulen abhängig
, um ihm zusätzliche Funktionen zur Verfügung zu stellen.
Das ist also der Grund, wenn Sie das Light-Server-Knotenmodul
installieren, wird es wiederum viele andere Knotenmodule installieren, von denen der Light-Server selbst abhängig ist.
Das ist der Grund, warum Sie diese Explosion
dieser Ordner in den Knotenmodulen sehen.
Seien Sie nicht allzu besorgt darüber, die Summe der Ordner wird nicht
mehr als ein paar Dutzend Megabyte sein.
Also wird es Ihr Verzeichnis nicht mit Müll füllen.
Dies ist alles unerlässlich, damit der Knoten Ihnen helfen kann.
Falls Sie neugierig auf den Lite-Server sind und wie er funktioniert und so weiter,
können Sie immer zu dieser GitHub-Site gehen, auf der der Lite-Server gehostet wird.
Und dann suchen Sie die Dokumentation für Lite-Server.
Ich werde Ihnen vorstellen, was Sie über lite-server wissen müssen, während wir
diesen Kurs und die restlichen Kurse durchlaufen.
Sie müssen sich also nicht zu sehr darum kümmern, aber nur für den Fall, dass Sie neugierig sind,
können Sie immer auf die Website gehen, um mehr Details über lite-server zu erfahren.
Der Link befindet sich in Ihren Übungsanweisungen und
zusätzliche Ressourcen sind Teil dieser Lektion.
Sobald Sie das abgeschlossen haben, dann gehen Sie über zum.
Editor, in dem Sie den Ordner Git-Test Ordner geöffnet haben und
dann den Inhalt der Datei package.json anzeigen.
Sie würden also sehen, dass die package.json-Datei genau die Informationen enthält, die
Sie mit Ihrem NPM konfiguriert haben.
Sie würden also die Namensversion und den Repository-Autor sehen und
insbesondere diese Informationen hier beachten.
Es sagt DevDependencies, also gibt es den lite-sever an
und bemerkt auch, dass er hat 2.2.2 sagt.
Das bedeutet, dass dieses bestimmte Projekt von
Lite-Server abhängt, der mindestens Version 2.2.2 oder höher ist.
Das ist also sehr nützlich für uns.
Warum brauchen wir diese Informationen hier?
Später, wenn Sie zu den anderen Übungen gehen,
werden Sie feststellen, dass Sie, wenn Sie dies in einem Online-Repository speichern,
nicht alles in Ihrem Knotenmodulordner speichern möchten.
Sie speichern nur Informationen über alle Dateien, die wir erstellt haben.
Der Ordner „Knotenmodule“ kann immer neu erstellt werden,
indem Sie NPM install an unserer Eingabeaufforderung eingeben.
Und dann basierend auf den Entwicklungsabhängigkeiten und
Abhängigkeiten, die in der Packager-Datei aufgeführt sind,
werden alle Knotenmodule, von denen Ihr Projekt abhängt, automatisch installiert.
Wir werden das später sehen, wie Sie
NPM installieren in diesem Kurs verwenden.
Jetzt, da wir bei package.json Datei sind, machen wir ein paar Änderungen
, so dass wir in der Lage sein werden, den lite-server zu nutzen, um diesen Inhalt zu servieren.
Also genau hier, in dieser Option namens Skripte,
lassen Sie uns hier ein weiteres hinzufügen.
Also werden wir sagen „Start“.
So start ist ein Befehl, den NPM unterstützt, mit
dem Sie eine Reihe von Dingen angeben können, die gestartet werden.
Später werden wir sehen, wie wir das nutzen.
Also hier werde ich sagen „npm run lite“.
Und nach diesem Test werde ich
einen weiteren Eintrag namens „lite“ hinzufügen
, den ich als „lite-server“ konfigurieren werde, okay?
Mit diesen Änderungen speichern wir die Datei package.json.
Und dann, jetzt ist unser Projekt konfiguriert, so dass jetzt, wenn Sie den Lite-Server starten,
der Inhalt Ihres Ordners jetzt in Ihrem bevorzugten Browser bereitgestellt wird. Gehen
Sie zurück zu unserer Eingabeaufforderung und fügen Sie die Eingabeaufforderung hinzu.
Wenn ich tippe, npm start, jetzt sehen Sie, warum ich diesen
Einstiegskartenstart in meine package.json-Datei lege.
Wenn ich npm start sage, was auch immer der Start wie in der Package.json-Datei konfiguriert ist,
geben wir an, dass npm run light, und die lite wurde als lite server angegeben.
Im Wesentlichen sagen wir, Starten Sie den Lite-Server.
Also, sobald ich npm start tippe, startet es den lite-server, und
es wird den Inhalt dieses Ordners bereitstellen.
Wie greifen Sie nun auf den Inhalt dieses Ordners zu?
Wenn Sie lokal darauf
zugreifen möchten, greifen Sie darauf zu, indem Sie die Sie als localhost sind: 3000 angeben.
Dies sind die Standardeinstellungen für den Lite-Server.
Darüber hinaus sollte dies automatisch
das Browserfenster Ihres Standardbrowsers öffnen und
den Inhalt von Index oder HTML im Browserfenster anzeigen.
Hier können Sie sehen, dass ich meinen Editor und
mein Browserfenster, das auf localhost gerichtet ist,
gleichzeitig nebeneinander geöffnet habe, so dass wir sehen können,
wie das Browserfenster sofort
alle Änderungen widerspiegelt, die wir an unserem Git-Testordner vornehmen.
Also lassen Sie mich zu index.html gehen.
Und dann, um des Weltraums willen, werde ich das umdrehen.
Und dann, so hier, können Sie sehen, dass dies der Inhalt davon ist.
Und dann, jetzt, lassen Sie mich noch einen weiteren Absatz hinzufügen.
Und speichern Sie die Änderungen, und dann werden Sie sofort bemerken, dass
die Änderung, die ich an meiner Datei index.html vorgenommen habe, in meinem Browser widergespiegelt wird.
Dies bietet eine sehr schöne Möglichkeit, die
Änderungen, die Sie an Ihrem Code vornehmen, in Echtzeit zu beobachten, die in Ihrem Browser widergespiegelt werden.
Wenn Sie also an einem Projekt arbeiten, ist es sehr angemessen,
dass Sie die Änderungen sofort sehen können.
Wenn Sie also eine Änderung vornehmen und dann die Datei speichern,
wird der geänderte Code sofort in Ihren Browser geladen.
So können Sie sofort sehen, wie sich die Änderung in Ihrem Browserfenster widerspiegelt.
Dies ist ein sehr nützliches Werkzeug, während Sie die Entwicklung Ihres Projekts durchführen.
Das ist der Grund, warum ich Ihnen diesen Lite-Server vorgestellt und
eingerichtet habe, damit wir ihn nutzen können, während wir die Website in diesem Kurs entwickeln.
Wenn Sie sich erinnern, hatten wir unseren Git-Test-Ordner bereits als Git-Repository eingerichtet.
So überprüfen Sie erneut, Wir
werden sehen, dass wir bereits drei Commits in unserem Git-Repository haben.
Und dieses Git-Repository ist bereits in unser Online-Git-Repository gespiegelt
, das wir in der vorherigen Übung entweder bei Bitbucket oder GitHub eingerichtet haben.
Mein Git-Test-Ordner wird
in dieser speziellen Übung mit meinem Bitbucket-Repository synchronisiert.
Was ich jetzt tun werde, ist Ihnen zu zeigen, wie Sie einige
Ordner aus Ihrem Projektordner ausschließen können,
und stellen Sie dann sicher, dass sie nicht mit Ihrem Online-Repository synchronisiert sind.
Wie gesagt, kann der Ordner node_modules immer neu erstellt werden,
indem Sie an der Eingabeaufforderung npm install eingeben.
Wenn Sie also
den Inhalt Ihres Ordners in ein Online-Git-Repository hochladen
oder wenn Sie einen Commit des Ordners in Ihr Git-Repository durchführen,
möchten Sie nicht, dass der Ordner node_modules oder alle Unterordner darunter
in das Commit aufgenommen werden.
Wie schließen wir also einige Ordner oder
Dateien aus unserem Ordner aus, die in unser Git-Repository eingecheckt werden?
Um dies zu tun, werden wir eine Datei namens .gitignore einrichten.
Das ist also der Name der Datei, .gitignore.
Also, um diese .gitignore Datei zu erstellen, gehen wir zu unserem Editor.
Also im Editor, im Git-Test-Ordner,
werde ich eine neue Datei erstellen und ich werde sie benennen. gitignore.
Beachten Sie, dass der Name mit einem Punkt beginnt und
dann, der Rest des Namens ist g-i-t-i-g-n-o-r-e.
Das ist also sehr wichtig, dass Sie die Datei mit genau diesem Namen,
.gitignore, einrichten.
Also lassen Sie uns diese Datei namens .gitignore erstellen, und
die erste Zeile dieser Datei werden wir als node_modules eingeben.
Das bedeutet also, dass der Ordner node_modules
von unserem git Commit ausgeschlossen wird.
Sobald ich also diese .gitignore Datei erstellt und
dann node_modules in die Datei .gitignore hinzugefügt habe, speichern wir die Änderungen.
Und dann werden wir jetzt einen Commit des aktuellen Status unseres Projekts
in unser Git-Repository machen.
Ich hoffe, du erinnerst dich an deine Git-Befehle.
Lassen Sie uns einen Git-Status machen, und wenn Sie das tun,
werden Sie sofort bemerken, dass Sie die
Datei index.html als geändert markiert haben, und dann die beiden neuen Dateien, .gitignore und package.json.
Also, wir machen ein git add. und dann einen Git-Status machen.
Und dann sehen Sie, dass alle diese neuen Dateien in Ihr Commit eingecheckt wurden.
Lassen Sie uns einen Git-Commit machen. git commit -m „viertes Commit“.
Und die Dateien sind festgeschrieben.
Lassen Sie uns das neue Commit in unser Online-Repository schieben.
Also, um diesen git zu tun, schieben Sie -u
origin master und warten Sie
, bis es auf unseren Server geschoben wird.
Wenn Sie nun zu Ihrem Online-Git-Repository gehen,
werden Sie sehen, dass die package.json-Datei und
.gitignore in Ihr Git-Repository eingecheckt worden wären. Wenn Sie
aus dem Git-Test zu meinem Bitbucket-Repository gehen, werden Sie sehen, dass,
wenn ich die Quelle betrachte, Sie sehen werden, dass die package.json-Datei hinzugefügt wurde.
Die Datei .gitignore wurde hinzugefügt und die neue Datei index.html wurde eingecheckt.
Damit ist diese Übung abgeschlossen.
In dieser Übung
haben wir gelernt, wie man eine package.json-Datei mit npm init einrichtet.
Wir haben gelernt, wie man ein npm-Modul installiert.
Und wir haben gelernt, wie man das lite-server npm Modul verwendet, um
den Inhalt unseres Projektordners so zu bedienen, dass er in einem Browser angezeigt werden kann.
Dies ist also eine nette Möglichkeit, Ihre Webinhalte, Ihre
Webanwendung oder Ihre Website bereitzustellen, so
dass Sie Änderungen in Echtzeit sehen können, die in Ihrem Browserfenster widergespiegelt werden.
Und dann haben wir auch gesehen, wie wir den .gitignore so einrichten können, dass einige
Ordner davon ausgeschlossen werden können, in unser Git-Repository eingecheckt zu werden.
Damit ist diese Übung abgeschlossen.
Damit bin ich sicher, dass Sie einen guten Griff bei
der Verwendung von Git und dann auch von Knoten- und Knotenmodulen bekommen haben.
Keine Sorge, wir werden Knoten ausgiebig verwenden, auf verschiedene Arten,
während Sie durch die Kurse dieser Spezialisierung gehen.
Das ist nur ein Anfang.
( MUSIK)