[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 package.json-Datei für
unseren git-Test-Ordner
einrichten, mit dem wir bisher gearbeitet haben, dann werden wir ein Node-Modul namens lite-server
einrichten, das den Inhalt unseres Git-Test-Ordners bereitstellt.
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, wenn wir Änderungen an unserer Datei index.html oder
anderen Dateien in unserem Git-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 zum Beispiel den lite-server für
Ihr Projekt einrichten, wird dieser in der package.json-Datei aufgezeichnet.
Damit Sie später auch dieses Paket 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 Node-Anwendung installieren.
Und es macht Ihre Builds reproduzierbar,
was bedeutet, dass, wenn Sie Ihren Code mit anderen teilen,
sie auch die Installation aller Node-Module durchführen können,
wie wir später in dieser Übung sehen werden, auf ihrem eigenen Computer.
Ihre nächste Frage wäre also offensichtlich, 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-Test-Projekt 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 folgen Sie dann 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,
Dies ist ein Testverzeichnis
Git und Knoten zu lernen.
Es spielt keine Rolle, geben Sie dort eine Beschreibung ein.
Und dann der Einstiegspunkt, werde ich einfach index.html sagen.
Wenn es sich um ein Knotenpaket handelt, wäre der Einstiegspunkt normalerweise index.js.
Nun, dieser Ordner, den wir eingerichtet haben, ist ein index.html basierter Ordner,
deshalb tippe ich einfach index.html ein.
Testbefehl, nichts.
Git-Repository, Wenn wir das Git-Repository bereits in der vorherigen
Übung eingerichtet hatten, wird dies automatisch für Sie auffordern.
Wenn nicht, wäre dies leer und gibt Ihnen die Möglichkeit, 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 Lizenz.
Und dann zeigt es Ihnen die Konfiguration der package.json-Datei im JSON-Format.
Wenn Sie also mit JSON vertraut sind, wird Ihnen das sehr, sehr vertraut aussehen.
Also, wenn das alles gut aussieht, sagen wir einfach okay.
Und dann führt das zur Erstellung der package.json-Dateien.
Wenn Sie also jetzt den Ordnerinhalt auflisten,
würden Sie die Datei package.json im Ordnerinhalt sehen.
Öffnen Sie den Ordner git-test 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 Node-Modul mit NPM, dem Node Package Manager, installieren können.
Also werden wir dieses Knoten-Modul als Lite-Server genannt installieren.
Der lite-server stellt den Inhalt dieses Git-Test-Ordners auf
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 Lite-Server einrichten und dann werden wir sehen, wie wir
den Lite-Server nutzen können, um den Inhalt dieses Ordners zu servieren.
Dies ist sehr, sehr nützlich, denn wenn Sie an einem Webentwicklungsprojekt arbeiten,
möchten Sie die Live-Version Ihres Webentwicklungsprojekts sehen
, damit Sie beim Vornehmen von Änderungen an Ihrem Projekt
die Änderungen sofort im Browser wiedergeben können.
Dies ist also ein sehr gutes Knotenpaket, das für diesen Zweck sehr nützlich ist.
Also lassen Sie uns den Lite-Server einrichten.
Um dies an der Eingabeaufforderung zu tun, geben Sie npm install ein.
Beachten Sie also, wenn Sie möchten, dass npm ein Node-Paket installiert,
so werden Sie es aufrufen.
Und dann würdest du Lite-Server sagen.
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.
Um das zu tun, werden wir —save-dev eingeben.
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 Node-Modul installieren, von dem Ihr Projekt direkt
abhängig ist, dann würden Sie es installieren, indem Sie einfach die Option —save sagen.
Also lasst uns weitermachen und es installieren.
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.
Nun, wenn Sie in die node_modules gehen, werden Sie eine ganze Reihe
von anderen Unterordnern sehen, die Knotenmodule enthalten, die
für das lite-sever-Knoten-Modul notwendig sind und so weiter.
Lassen Sie uns also einen kurzen Überblick über den Ordner node_modules machen, um zu sehen,
was der Inhalt dieser ist.
Wenn Sie in meinen git-Test-Ordner gehen,
würden Sie, wie gesagt, eine ganze Reihe von Unterordnern sehen.
Normalerweise müssen Sie nicht in den Ordner node_modules rendern,
sie existieren nur dort, weil sie für den lite-server benötigt werden.
Also, wie Sie durch Sie blättern, sollte ein Notizordner namens lite-server hier.
Wenn Sie in den lite-server Ordner gehen, beachten Sie insbesondere das Vorhandensein
der Datei index.js und dann eine 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 der Grund, wenn Sie das Lite-Server-Knotenmodul installieren, wird es wiederum
viele andere Knotenmodule installieren, von denen der Lite-Server selbst abhängig ist.
Das ist der Grund, warum Sie diese Explosion
dieser Ordner im Ordner node_modules sehen.
Seien Sie nicht allzu besorgt darüber, die Summe von all dem wird nicht mehr als
ein paar Dutzend Megabyte sein.
Also, es wird Ihr Verzeichnis nicht mit diesem 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.
Sie können immer zu dieser GitHub-Site gehen, auf der der Lite-Server gepostet wird, und
dann die Dokumentation für lite-server nachschlagen.
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 diese Seite gehen, um mehr Details über lite-server zu erfahren.
Der Link finden Sie in Ihren Übungsanweisungen und
zusätzlichen Ressourcen in dieser Lektion.
Sobald Sie das abgeschlossen haben, gehen Sie zum Editor,
wo Sie den Ordner, git-Test-Ordner haben, öffnen und
dann den Inhalt der package.json-Datei anzeigen.
Sie würden also sehen, dass die package.json-Datei genau die Informationen enthält, die
Sie mit Ihrem npm darin konfiguriert haben.
Sie würden also den Namen, die Version und den Repository-Autor sehen,
und insbesondere beachten Sie, dass diese Informationen hier DevDependencies steht.
Und dann gibt es lite-server an und beachte auch, dass es ^2.2.2 sagt.
Das bedeutet, dass dieses bestimmte Projekt von
Lite-Server abhängt, der mindestens Version 2.2.2 ist.
Alles auf hohem Niveau.
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, wenn Sie diese in einem Online-Repository speichern.
Sie möchten nicht alles in Ihrem Ordner node_modules speichern.
Wir werden nur Informationen über alle Dateien speichern, die wir erstellt haben.
Der Ordner node_modules kann immer neu erstellt werden,
indem Sie nmp install an der Eingabeaufforderung eingeben.
Und dann basierend auf den DevDependencies und
Abhängigkeiten, die in der package.json-Datei aufgeführt sind.
Alle Knotenmodule, von denen Ihr Projekt abhängt, werden automatisch
installiert.
Wir werden das später sehen,
wie man npm install in diesem Kurs verwendet.
Jetzt, da wir uns in der package.json-Datei befinden, lassen Sie uns ein paar Änderungen
vornehmen, damit wir den lite-server nutzen können, um diesen Inhalt zu servieren.
Also, genau hier in dieser Option genannt Skripte,
lassen Sie uns in einem weiteren hier hinzufügen.
Also werden wir sagen, fangen Sie an.
So start ist ein Befehl, der 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 werden.
Also hier, ich werde sagen, npm run lite.
Und nach dem Test werde ich
einen weiteren Eintrag namens
Lite hinzufügen, den ich als Lite-Server konfigurieren werde.
Okay, mit diesen Änderungen speichern wir die package.json-Datei und
dann ist unser Projekt konfiguriert.
Damit jetzt, wenn Sie den Lite-Server starten,
wird der Inhalt Ihres Ordners jetzt in Ihrem bevorzugten Browser bereitgestellt. Gehen
Sie zurück zu unserer Eingabeaufforderung und zur Eingabeaufforderung.
Wenn ich npm start tippe, sehen Sie jetzt, warum
ich diesen Eintrag namens start in meine package.json-Datei eingefügt habe.
Also, wenn ich npm start sage, was auch immer dieser Start als konfiguriert ist,
in der package.json-Datei.
Wir geben an, dass als npm lite laufen, und dann lite wurde als lite-server angegeben.
Im Wesentlichen sagen wir, starten Sie den Lite-Server.
Sobald ich also tippe, npm start, 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 URL als localhost:3000 angeben.
Dies sind die Standardeinstellungen für den Lite-Server.
Darüber hinaus sollte dies automatisch
das Browserfenster Ihres Standardbrowsers öffnen und
dann den Inhalt von index.html in diesem Browserfenster anzeigen.
Hier können Sie sehen, dass ich meinen Editor und
mein Browserfenster, das auf localhost gerichtet ist,
gleichzeitig nebeneinander geöffnet habe.
Damit wir sehen können, wie das Browserfenster sofort
alle Änderungen widerspiegelt, die wir an unseren Dateien im Git-Test-Ordner vornehmen.
Also lassen Sie mich zu index.html gehen.
Und dann, um des Weltraums willen, werde ich das umdrehen.
Und dann können Sie hier sehen, dass dies der Inhalt davon ist.
Und dann lassen Sie mich jetzt
noch einen Absatz hinzufügen
und die Änderungen speichern.
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, in Echtzeit beobachten zu können,
dass die Änderungen, die Sie an Ihrem Code vornehmen, in Ihrem Browser reflektiert werden.
Wenn Sie also an einem Projekt arbeiten, wäre es sehr angemessen,
dass Sie die Änderungen sofort sehen können.
Wenn Sie also eine Änderung vornehmen und die Datei speichern,
wird der geänderte Code sofort in Ihren Browser geladen, so dass
Sie sofort sehen können, dass die Änderung in Ihrem Browserfenster widergespiegelt wird.
Dies ist ein sehr nützliches Werkzeug, während Sie die Entwicklung Ihres Projekts durchführen.
Das ist der Grund, warum ich Ihnen den Lite Server vorgestellt und
so eingerichtet habe, dass wir ihn bei der Entwicklung der Website in diesem Kurs nutzen können.
Wenn Sie sich erinnern, hatten wir unseren Git-Test-Ordner bereits als Git-Repository eingerichtet,
so dass wir erneut überprüfen,
werden wir sehen, dass wir bereits drei Commits in unserem Git-Repository haben.
Und dieses Git-Repository ist bereits in unserem Online-Git-Repository,
das wir in der vorherigen Übung eingerichtet haben, entweder bei Bitbucket oder GitHub.
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
dann sicherstellen, dass sie nicht mit Ihrem Online-Repository synchronisiert sind.
Jetzt, wie gesagt, kann der Ordner „Knotenmodule“ immer neu erstellt werden,
indem Sie an der Eingabeaufforderung npminstall eingeben.
Deshalb, wenn Sie 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 Note-Modulordner oder alle Unterordner
darunter in Commit enthalten sind.
Wie schließen wir also einige Ordner oder
einige Dateien aus unserem Ordner davon aus, in unser Git-Repository eingecheckt zu 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, werden wir zu unserem Editor gehen.
Also im Editor im Git-Test-Ordner werde ich eine neue Datei erstellen.
Und ich werde es nennen. gitignore.
Beachten Sie, dass der Name mit einem Punkt beginnt und
dann der Rest des Namens G-I-T-I-G-N-O-R-E ist.
Das ist also sehr,
sehr wichtig, dass Sie die Füllung genau mit dem Namen „.gitignore“ einrichten.
Also lassen Sie uns diese Datei namens erstellen, .gitignore, und
die erste Zeile dieser Datei, werden wir als node_modules eingeben.
Das bedeutet also, dass
der Knotenmodulordner von unserem Git-Commit ausgeschlossen wird.
Sobald ich also diese .gitignore Datei erstellt und
dann Knotenmodule 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 modifiziert markiert haben und dann die beiden neuen Dateien, .gitignore und package.json.
Also machen wir einen git add. und machen dann einen Git-Status.
Und dann sehen Sie, dass alle diese neuen Dateien in Ihr Commit eingecheckt wurden.
Lassen Sie uns ein 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 das zu tun, git push
-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.
Gehe zu meinem Bitbucket-Repository für den Git-Test.
Sie werden sehen, dass, wenn ich die Quelle betrachte,
Sie sehen werden, dass die Datei package.json hinzugefügt wurde,
die .gitignore hinzugefügt wurde und die neue Datei index.html eingecheckt wurde.
Damit ist diese Übung abgeschlossen.
In dieser Übung
haben wir gelernt, wie man eine package.json-Datei mit npm minute 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 servieren, dass er in einem Browser angezeigt werden kann.
Dies ist also eine nette Möglichkeit, Ihre Inhalte, 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 sie 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.
Also, ich bin mir sicher, dass Sie einen guten Griff bei
der Verwendung von Git und dann auch von Knoten- und Knotenmodulen bekommen hätten.
Mach dir keine Sorgen.
Wir werden Knoten ausführlich auf verschiedene Arten verwenden,
wie Sie durch die Kurse dieser Spezialisierung gehen.
Das ist nur ein Anfang.
( MUSIK)