1
00:00:00,000 --> 00:00:05,564
[MUSIC]

2
00:00:05,564 --> 00:00:08,927
Jetzt, da Sie Node.js auf Ihrem Computer haben,

3
00:00:08,927 --> 00:00:13,870
möchten Sie offensichtlich sofort mit der Verwendung beginnen.

4
00:00:13,870 --> 00:00:16,844
Also in dieser Übung werden wir anfangen, Node zu verwenden.

5
00:00:16,844 --> 00:00:19,980
Wir werden eine package.json-Datei für

6
00:00:19,980 --> 00:00:24,880
unseren git-Test-Ordner

7
00:00:24,880 --> 00:00:29,780
einrichten, mit dem wir bisher gearbeitet haben, dann werden wir ein Node-Modul namens lite-server

8
00:00:29,780 --> 00:00:34,610
einrichten, das den Inhalt unseres Git-Test-Ordners bereitstellt.

9
00:00:34,610 --> 00:00:39,860
Und dann können wir diese index.html Datei und

10
00:00:39,860 --> 00:00:43,320
andere Dateien in einem Browser durchsuchen.

11
00:00:43,320 --> 00:00:48,499
Und wir werden auch sehen, wie der Lite-Server es

12
00:00:48,499 --> 00:00:53,089
uns ermöglicht, automatisch Updates in unserem

13
00:00:53,089 --> 00:00:58,149
Browserfenster zu sehen, wenn wir Änderungen an unserer Datei index.html oder

14
00:00:58,149 --> 00:01:02,283
anderen Dateien in unserem Git-Test-Ordner vornehmen.

15
00:01:02,283 --> 00:01:08,685
Der Lite-Server ist etwas, das wir in diesen und

16
00:01:08,685 --> 00:01:13,805
zukünftigen Kursen ausgiebig verwenden werden, um die Änderungen in Echtzeit in

17
00:01:13,805 --> 00:01:18,730
einem Browserfenster sehen zu können, während Sie die Dateien Ihres Projekts bearbeiten.

18
00:01:22,310 --> 00:01:25,650
Wie ich bereits erwähnt habe, möchten wir die package.json-Datei einrichten.

19
00:01:25,650 --> 00:01:29,030
Also, was genau ist diese package.json-Datei, die wir einrichten werden?

20
00:01:29,030 --> 00:01:33,254
Also hier habe ich einige Informationen von

21
00:01:33,254 --> 00:01:37,874
der npmjs.org-Site, die angibt, was

22
00:01:37,874 --> 00:01:43,184
genau die Rolle der package.json-Datei ist.

23
00:01:43,184 --> 00:01:47,210
Die package.json-Datei dient also als Dokumentation

24
00:01:47,210 --> 00:01:51,670
darüber, wovon alle anderen Pakete Ihr Projekt abhängig ist.

25
00:01:51,670 --> 00:01:55,130
Wenn Sie zum Beispiel den lite-server für

26
00:01:55,130 --> 00:01:59,210
Ihr Projekt einrichten, wird dieser in der package.json-Datei aufgezeichnet.

27
00:01:59,210 --> 00:02:07,200
Damit Sie später auch dieses Paket in Zukunft nutzen können.

28
00:02:07,200 --> 00:02:12,460
Außerdem können Sie angeben, von welcher spezifischen Version eines Pakets

29
00:02:12,460 --> 00:02:14,710
Ihr Projekt abhängig ist.

30
00:02:14,710 --> 00:02:19,784
Selbst wenn das Paket, das Sie von Änderungen in der Zukunft abhängen,

31
00:02:19,784 --> 00:02:24,762
können Sie darauf bestehen, dass Sie möchten, dass der Benutzer nur eine bestimmte

32
00:02:24,762 --> 00:02:30,650
Version des Pakets für die Verwendung in Ihrer Node-Anwendung installieren.

33
00:02:30,650 --> 00:02:33,938
Und es macht Ihre Builds reproduzierbar,

34
00:02:33,938 --> 00:02:37,918
was bedeutet, dass, wenn Sie Ihren Code mit anderen teilen,

35
00:02:37,918 --> 00:02:42,243
sie auch die Installation aller Node-Module durchführen können,

36
00:02:42,243 --> 00:02:46,767
wie wir später in dieser Übung sehen werden, auf ihrem eigenen Computer.

37
00:02:50,728 --> 00:02:57,610
Ihre nächste Frage wäre also offensichtlich, wie erstellen wir diese package.json-Datei?

38
00:02:57,610 --> 00:03:02,800
Wenn Sie ein neues Projekt starten, in dem Sie die

39
00:03:02,800 --> 00:03:10,420
Datei package.json initialisieren möchten, geben Sie einfach npm init an der Eingabeaufforderung im Projektordner ein.

40
00:03:10,420 --> 00:03:13,300
Und dann führt Sie das durch eine Reihe von Schritten

41
00:03:13,300 --> 00:03:17,150
, mit denen Sie Ihre package.json-Datei konfigurieren können.

42
00:03:17,150 --> 00:03:20,910
Also lassen Sie uns damit für unser Git-Test-Projekt fortfahren.

43
00:03:22,290 --> 00:03:28,200
Also hier bin ich im Git-Test-Ordner in meinem Terminal-Fenster.

44
00:03:28,200 --> 00:03:31,900
Stellen Sie sicher, dass Sie auch ein Terminalfenster oder

45
00:03:31,900 --> 00:03:34,728
ein Befehlsfenster öffnen und dann zum Ordner git-test gehen. Geben Sie

46
00:03:34,728 --> 00:03:43,235
an der Eingabeaufforderung npm init ein und folgen Sie dann den Fragen, die gestellt werden.

47
00:03:43,235 --> 00:03:48,275
Für den Namen des Projekts belassen wir es einfach als Standard, git-Test.

48
00:03:48,275 --> 00:03:51,453
Für Version lassen wir es einfach als 1.0.0. Das

49
00:03:51,453 --> 00:03:53,135
können wir später bearbeiten.

50
00:03:53,135 --> 00:03:58,175
Zur Beschreibung,

51
00:03:58,175 --> 00:04:04,475
Dies ist ein Testverzeichnis

52
00:04:04,475 --> 00:04:10,462
Git und Knoten zu lernen.

53
00:04:10,462 --> 00:04:13,400
Es spielt keine Rolle, geben Sie dort eine Beschreibung ein.

54
00:04:13,400 --> 00:04:16,994
Und dann der Einstiegspunkt, werde ich einfach index.html sagen.

55
00:04:18,260 --> 00:04:24,508
Wenn es sich um ein Knotenpaket handelt, wäre der Einstiegspunkt normalerweise index.js.

56
00:04:24,508 --> 00:04:30,369
Nun, dieser Ordner, den wir eingerichtet haben, ist ein index.html basierter Ordner,

57
00:04:30,369 --> 00:04:34,018
deshalb tippe ich einfach index.html ein.

58
00:04:34,018 --> 00:04:35,801
Testbefehl, nichts.

59
00:04:35,801 --> 00:04:40,365
Git-Repository, Wenn wir das Git-Repository bereits in der vorherigen

60
00:04:40,365 --> 00:04:43,783
Übung eingerichtet hatten, wird dies automatisch für Sie auffordern.

61
00:04:43,783 --> 00:04:48,733
Wenn nicht, wäre dies leer und gibt Ihnen die Möglichkeit, die

62
00:04:48,733 --> 00:04:53,920
Git-Repository-URL einzugeben, falls Sie ein Online-Git-Repository verwenden.

63
00:04:53,920 --> 00:04:56,980
Einige Schlüsselwörter für Ihr Projekt, die ich leer lassen werde.

64
00:04:56,980 --> 00:04:58,501
Autor, geben Sie Ihren Namen ein.

65
00:04:58,501 --> 00:04:59,933
Lass uns narzisstisch sein.

66
00:05:04,337 --> 00:05:06,267
Und Lizenz.

67
00:05:06,267 --> 00:05:15,050
Und dann zeigt es Ihnen die Konfiguration der package.json-Datei im JSON-Format.

68
00:05:15,050 --> 00:05:18,566
Wenn Sie also mit JSON vertraut sind, wird Ihnen das sehr, sehr vertraut aussehen.

69
00:05:18,566 --> 00:05:21,756
Also, wenn das alles gut aussieht, sagen wir einfach okay.

70
00:05:21,756 --> 00:05:27,790
Und dann führt das zur Erstellung der package.json-Dateien.

71
00:05:27,790 --> 00:05:31,014
Wenn Sie also jetzt den Ordnerinhalt auflisten,

72
00:05:31,014 --> 00:05:36,109
würden Sie die Datei package.json im Ordnerinhalt sehen.

73
00:05:36,109 --> 00:05:40,932
Öffnen Sie den Ordner git-test in Ihrem bevorzugten Editor und

74
00:05:40,932 --> 00:05:47,270
werfen Sie einen Blick auf den Inhalt der package.json-Datei in Ihrem Editor.

75
00:05:48,950 --> 00:05:53,161
Im nächsten Schritt werden wir lernen, wie wir

76
00:05:53,161 --> 00:05:57,702
ein Node-Modul mit NPM, dem Node Package Manager, installieren können.

77
00:05:57,702 --> 00:06:02,434
Also werden wir dieses Knoten-Modul als Lite-Server genannt installieren.

78
00:06:02,434 --> 00:06:07,432
Der lite-server stellt den Inhalt dieses Git-Test-Ordners auf

79
00:06:07,432 --> 00:06:13,150
einem Server bereit, den er startet, damit Sie den Inhalt in einem Browser anzeigen können.

80
00:06:13,150 --> 00:06:18,404
Angesichts der Tatsache, dass wir eine index.html Datei haben, wenn wir diesen Ordner aufstellen,

81
00:06:18,404 --> 00:06:24,130
dann wird es eine Website sein und Sie können die index.html in einem Browser anzeigen.

82
00:06:24,130 --> 00:06:28,460
Also lassen Sie uns den Lite-Server einrichten und dann werden wir sehen, wie wir

83
00:06:28,460 --> 00:06:31,820
den Lite-Server nutzen können, um den Inhalt dieses Ordners zu servieren.

84
00:06:31,820 --> 00:06:37,310
Dies ist sehr, sehr nützlich, denn wenn Sie an einem Webentwicklungsprojekt arbeiten,

85
00:06:37,310 --> 00:06:42,380
möchten Sie die Live-Version Ihres Webentwicklungsprojekts sehen

86
00:06:42,380 --> 00:06:45,060
, damit Sie beim Vornehmen von Änderungen an Ihrem Projekt

87
00:06:45,060 --> 00:06:49,400
die Änderungen sofort im Browser wiedergeben können.

88
00:06:49,400 --> 00:06:53,840
Dies ist also ein sehr gutes Knotenpaket, das für diesen Zweck sehr nützlich ist.

89
00:06:53,840 --> 00:06:55,980
Also lassen Sie uns den Lite-Server einrichten.

90
00:06:55,980 --> 00:07:01,120
Um dies an der Eingabeaufforderung zu tun, geben Sie npm install ein.

91
00:07:01,120 --> 00:07:04,273
Beachten Sie also, wenn Sie möchten, dass npm ein Node-Paket installiert,

92
00:07:04,273 --> 00:07:06,594
so werden Sie es aufrufen.

93
00:07:06,594 --> 00:07:10,674
Und dann würdest du Lite-Server sagen.

94
00:07:10,674 --> 00:07:16,685
Und dann wollen wir auch die Tatsache speichern, dass unser Projekt den Lite-Server verwendet.

95
00:07:16,685 --> 00:07:20,670
Also werden wir diese Informationen in der package.json-Datei speichern.

96
00:07:20,670 --> 00:07:27,918
Um das zu tun, werden wir —save-dev eingeben.

97
00:07:27,918 --> 00:07:33,641
Nun gibt die Option save-dev an, dass dieser Lite-Server für die

98
00:07:33,641 --> 00:07:37,820
Entwicklungsabhängigkeit für unser Projekt verwendet wird.

99
00:07:37,820 --> 00:07:43,230
Wenn Sie ein Node-Modul installieren, von dem Ihr Projekt direkt

100
00:07:43,230 --> 00:07:49,680
abhängig ist, dann würden Sie es installieren, indem Sie einfach die Option —save sagen.

101
00:07:49,680 --> 00:07:52,110
Also lasst uns weitermachen und es installieren.

102
00:07:52,110 --> 00:07:56,990
Und Sie warten geduldig auf die Installation.

103
00:08:00,197 --> 00:08:07,029
Es wird alle ein paar Minuten dauern, bis die Installation abgeschlossen ist.

104
00:08:07,029 --> 00:08:11,991
Sobald das installiert ist, werden Sie sofort

105
00:08:11,991 --> 00:08:16,953
bemerken, wenn Sie sich den Inhalt Ihres Ordners ansehen,

106
00:08:16,953 --> 00:08:25,333
werden Sie sofort feststellen, dass dort ein Ordner namens node_modules erstellt wurde.

107
00:08:25,333 --> 00:08:30,459
Nun, wenn Sie in die node_modules gehen, werden Sie eine ganze Reihe

108
00:08:30,459 --> 00:08:35,492
von anderen Unterordnern sehen, die Knotenmodule enthalten, die

109
00:08:35,492 --> 00:08:40,170
für das lite-sever-Knoten-Modul notwendig sind und so weiter.

110
00:08:40,170 --> 00:08:44,925
Lassen Sie uns also einen kurzen Überblick über den Ordner node_modules machen, um zu sehen,

111
00:08:44,925 --> 00:08:47,363
was der Inhalt dieser ist.

112
00:08:50,810 --> 00:08:55,893
Wenn Sie in meinen git-Test-Ordner gehen,

113
00:08:55,893 --> 00:09:00,130
würden Sie, wie gesagt, eine ganze Reihe von Unterordnern sehen.

114
00:09:00,130 --> 00:09:04,904
Normalerweise müssen Sie nicht in den Ordner node_modules rendern,

115
00:09:04,904 --> 00:09:09,384
sie existieren nur dort, weil sie für den lite-server benötigt werden.

116
00:09:09,384 --> 00:09:16,470
Also, wie Sie durch Sie blättern, sollte ein Notizordner namens lite-server hier.

117
00:09:16,470 --> 00:09:21,400
Wenn Sie in den lite-server Ordner gehen, beachten Sie insbesondere das Vorhandensein

118
00:09:21,400 --> 00:09:27,690
der Datei index.js und dann eine package.json Datei und einige andere Dinge.

119
00:09:27,690 --> 00:09:33,928
Dieser Inhalt des Ordners umfasst also das Lite-Server-Knotenmodul.

120
00:09:33,928 --> 00:09:38,010
Dieses Lite-Server-Knotenmodul ist jedoch von anderen Knotenmodulen abhängig

121
00:09:38,010 --> 00:09:41,120
, um ihm zusätzliche Funktionen zur Verfügung zu stellen.

122
00:09:41,120 --> 00:09:46,456
Das ist der Grund, wenn Sie das Lite-Server-Knotenmodul installieren, wird es wiederum

123
00:09:46,456 --> 00:09:51,590
viele andere Knotenmodule installieren, von denen der Lite-Server selbst abhängig ist.

124
00:09:51,590 --> 00:09:56,810
Das ist der Grund, warum Sie diese Explosion

125
00:09:56,810 --> 00:10:00,800
dieser Ordner im Ordner node_modules sehen.

126
00:10:00,800 --> 00:10:06,090
Seien Sie nicht allzu besorgt darüber, die Summe von all dem wird nicht mehr als

127
00:10:06,090 --> 00:10:08,620
ein paar Dutzend Megabyte sein.

128
00:10:08,620 --> 00:10:12,310
Also, es wird Ihr Verzeichnis nicht mit diesem Müll füllen.

129
00:10:13,400 --> 00:10:17,680
Dies ist alles unerlässlich, damit der Knoten Ihnen helfen kann.

130
00:10:19,420 --> 00:10:24,280
Falls Sie neugierig auf den Lite-Server sind und wie er funktioniert und so weiter.

131
00:10:24,280 --> 00:10:30,010
Sie können immer zu dieser GitHub-Site gehen, auf der der Lite-Server gepostet wird, und

132
00:10:30,010 --> 00:10:33,855
dann die Dokumentation für lite-server nachschlagen.

133
00:10:35,260 --> 00:10:40,040
Ich werde Ihnen vorstellen, was Sie über lite-server wissen müssen, während wir

134
00:10:40,040 --> 00:10:42,830
diesen Kurs und die restlichen Kurse durchlaufen.

135
00:10:42,830 --> 00:10:44,560
Sie müssen sich also nicht zu sehr darum kümmern.

136
00:10:44,560 --> 00:10:46,890
Aber nur für den Fall, dass Sie neugierig sind,

137
00:10:46,890 --> 00:10:51,590
können Sie immer auf diese Seite gehen, um mehr Details über lite-server zu erfahren.

138
00:10:51,590 --> 00:10:55,710
Der Link finden Sie in Ihren Übungsanweisungen und

139
00:10:55,710 --> 00:11:01,220
zusätzlichen Ressourcen in dieser Lektion.

140
00:11:04,040 --> 00:11:09,357
Sobald Sie das abgeschlossen haben, gehen Sie zum Editor,

141
00:11:09,357 --> 00:11:14,258
wo Sie den Ordner, git-Test-Ordner haben, öffnen und

142
00:11:14,258 --> 00:11:18,753
dann den Inhalt der package.json-Datei anzeigen.

143
00:11:18,753 --> 00:11:23,604
Sie würden also sehen, dass die package.json-Datei genau die Informationen enthält, die

144
00:11:23,604 --> 00:11:25,691
Sie mit Ihrem npm darin konfiguriert haben.

145
00:11:25,691 --> 00:11:31,414
Sie würden also den Namen, die Version und den Repository-Autor sehen,

146
00:11:31,414 --> 00:11:38,142
und insbesondere beachten Sie, dass diese Informationen hier DevDependencies steht.

147
00:11:38,142 --> 00:11:45,034
Und dann gibt es lite-server an und beachte auch, dass es ^2.2.2 sagt.

148
00:11:45,034 --> 00:11:50,086
Das bedeutet, dass dieses bestimmte Projekt von

149
00:11:50,086 --> 00:11:54,858
Lite-Server abhängt, der mindestens Version 2.2.2 ist.

150
00:11:54,858 --> 00:11:56,078
Alles auf hohem Niveau.

151
00:11:57,308 --> 00:12:00,488
Das ist also sehr nützlich für uns.

152
00:12:00,488 --> 00:12:05,942
Warum brauchen wir diese Informationen hier, später, wenn Sie zu den anderen

153
00:12:05,942 --> 00:12:11,669
Übungen gehen, werden Sie feststellen, dass, wenn Sie diese in einem Online-Repository speichern.

154
00:12:11,669 --> 00:12:16,738
Sie möchten nicht alles in Ihrem Ordner node_modules speichern.

155
00:12:16,738 --> 00:12:23,902
Wir werden nur Informationen über alle Dateien speichern, die wir erstellt haben.

156
00:12:23,902 --> 00:12:28,896
Der Ordner node_modules kann immer neu erstellt werden,

157
00:12:28,896 --> 00:12:33,270
indem Sie nmp install an der Eingabeaufforderung eingeben.

158
00:12:33,270 --> 00:12:36,260
Und dann basierend auf den DevDependencies und

159
00:12:36,260 --> 00:12:40,235
Abhängigkeiten, die in der package.json-Datei aufgeführt sind.

160
00:12:40,235 --> 00:12:44,542
Alle Knotenmodule, von denen Ihr Projekt abhängt, werden automatisch

161
00:12:44,542 --> 00:12:45,338
installiert.

162
00:12:45,338 --> 00:12:48,868
Wir werden das später sehen,

163
00:12:48,868 --> 00:12:54,330
wie man npm install in diesem Kurs verwendet.

164
00:12:56,150 --> 00:13:02,020
Jetzt, da wir uns in der package.json-Datei befinden, lassen Sie uns ein paar Änderungen

165
00:13:02,020 --> 00:13:08,630
vornehmen, damit wir den lite-server nutzen können, um diesen Inhalt zu servieren.

166
00:13:08,630 --> 00:13:14,694
Also, genau hier in dieser Option genannt Skripte,

167
00:13:14,694 --> 00:13:18,430
lassen Sie uns in einem weiteren hier hinzufügen.

168
00:13:18,430 --> 00:13:20,618
Also werden wir sagen, fangen Sie an.

169
00:13:20,618 --> 00:13:26,540
So start ist ein Befehl, der npm

170
00:13:26,540 --> 00:13:32,890
unterstützt, mit dem Sie eine Reihe von Dingen angeben können, die gestartet werden.

171
00:13:32,890 --> 00:13:35,312
Später werden wir sehen, wie wir das nutzen werden.

172
00:13:35,312 --> 00:13:39,668
Also hier, ich werde sagen, npm run lite.

173
00:13:43,407 --> 00:13:48,009
Und nach dem Test werde ich

174
00:13:48,009 --> 00:13:52,788
einen weiteren Eintrag namens

175
00:13:52,788 --> 00:13:59,725
Lite hinzufügen, den ich als Lite-Server konfigurieren werde.

176
00:13:59,725 --> 00:14:04,798
Okay, mit diesen Änderungen speichern wir die package.json-Datei und

177
00:14:04,798 --> 00:14:07,740
dann ist unser Projekt konfiguriert.

178
00:14:07,740 --> 00:14:11,046
Damit jetzt, wenn Sie den Lite-Server starten,

179
00:14:11,046 --> 00:14:16,530
wird der Inhalt Ihres Ordners jetzt in Ihrem bevorzugten Browser bereitgestellt. Gehen

180
00:14:21,690 --> 00:14:25,050
Sie zurück zu unserer Eingabeaufforderung und zur Eingabeaufforderung.

181
00:14:25,050 --> 00:14:29,470
Wenn ich npm start tippe, sehen Sie jetzt, warum

182
00:14:29,470 --> 00:14:34,320
ich diesen Eintrag namens start in meine package.json-Datei eingefügt habe.

183
00:14:34,320 --> 00:14:39,480
Also, wenn ich npm start sage, was auch immer dieser Start als konfiguriert ist,

184
00:14:39,480 --> 00:14:42,310
in der package.json-Datei.

185
00:14:42,310 --> 00:14:47,640
Wir geben an, dass als npm lite laufen, und dann lite wurde als lite-server angegeben.

186
00:14:47,640 --> 00:14:50,420
Im Wesentlichen sagen wir, starten Sie den Lite-Server.

187
00:14:50,420 --> 00:14:54,751
Sobald ich also tippe, npm start, startet es den lite-server und

188
00:14:54,751 --> 00:14:57,928
es wird den Inhalt dieses Ordners bereitstellen.

189
00:14:57,928 --> 00:15:00,921
Wie greifen Sie nun auf den Inhalt dieses Ordners zu?

190
00:15:00,921 --> 00:15:06,912
Wenn Sie lokal darauf zugreifen möchten, greifen Sie darauf zu,

191
00:15:06,912 --> 00:15:12,120
indem Sie die URL als localhost:3000 angeben.

192
00:15:12,120 --> 00:15:15,550
Dies sind die Standardeinstellungen für den Lite-Server.

193
00:15:15,550 --> 00:15:19,838
Darüber hinaus sollte dies automatisch

194
00:15:19,838 --> 00:15:24,016
das Browserfenster Ihres Standardbrowsers öffnen und

195
00:15:24,016 --> 00:15:29,707
dann den Inhalt von index.html in diesem Browserfenster anzeigen.

196
00:15:29,707 --> 00:15:34,244
Hier können Sie sehen, dass ich meinen Editor und

197
00:15:34,244 --> 00:15:39,115
mein Browserfenster, das auf localhost gerichtet ist,

198
00:15:39,115 --> 00:15:42,446
gleichzeitig nebeneinander geöffnet habe.

199
00:15:42,446 --> 00:15:47,906
Damit wir sehen können, wie das Browserfenster sofort

200
00:15:47,906 --> 00:15:54,760
alle Änderungen widerspiegelt, die wir an unseren Dateien im Git-Test-Ordner vornehmen.

201
00:15:54,760 --> 00:15:57,780
Also lassen Sie mich zu index.html gehen.

202
00:15:57,780 --> 00:16:03,989
Und dann, um des Weltraums willen, werde ich das umdrehen.

203
00:16:03,989 --> 00:16:07,372
Und dann können Sie hier sehen, dass dies der Inhalt davon ist.

204
00:16:07,372 --> 00:16:12,392
Und dann lassen Sie mich jetzt

205
00:16:12,392 --> 00:16:16,918
noch einen Absatz hinzufügen

206
00:16:21,492 --> 00:16:24,150
und die Änderungen speichern.

207
00:16:24,150 --> 00:16:29,220
Und dann werden Sie sofort bemerken, dass die Änderung, die

208
00:16:29,220 --> 00:16:34,980
ich an meiner Datei index.html vorgenommen habe, in meinem Browser widergespiegelt wird.

209
00:16:34,980 --> 00:16:41,380
Dies bietet eine sehr schöne Möglichkeit, in Echtzeit beobachten zu können,

210
00:16:41,380 --> 00:16:45,890
dass die Änderungen, die Sie an Ihrem Code vornehmen, in Ihrem Browser reflektiert werden.

211
00:16:45,890 --> 00:16:49,920
Wenn Sie also an einem Projekt arbeiten, wäre es sehr angemessen,

212
00:16:49,920 --> 00:16:52,175
dass Sie die Änderungen sofort sehen können.

213
00:16:52,175 --> 00:16:54,895
Wenn Sie also eine Änderung vornehmen und die Datei speichern,

214
00:16:54,895 --> 00:16:59,345
wird der geänderte Code sofort in Ihren Browser geladen, so dass

215
00:16:59,345 --> 00:17:04,420
Sie sofort sehen können, dass die Änderung in Ihrem Browserfenster widergespiegelt wird.

216
00:17:04,420 --> 00:17:12,400
Dies ist ein sehr nützliches Werkzeug, während Sie die Entwicklung Ihres Projekts durchführen.

217
00:17:12,400 --> 00:17:17,400
Das ist der Grund, warum ich Ihnen den Lite Server vorgestellt und

218
00:17:17,400 --> 00:17:25,250
so eingerichtet habe, dass wir ihn bei der Entwicklung der Website in diesem Kurs nutzen können.

219
00:17:27,280 --> 00:17:32,830
Wenn Sie sich erinnern, hatten wir unseren Git-Test-Ordner bereits als Git-Repository eingerichtet,

220
00:17:32,830 --> 00:17:37,515
so dass wir erneut überprüfen,

221
00:17:37,515 --> 00:17:40,805
werden wir sehen, dass wir bereits drei Commits in unserem Git-Repository haben.

222
00:17:40,805 --> 00:17:45,885
Und dieses Git-Repository ist bereits in unserem Online-Git-Repository,

223
00:17:45,885 --> 00:17:51,015
das wir in der vorherigen Übung eingerichtet haben, entweder bei Bitbucket oder GitHub.

224
00:17:51,015 --> 00:17:56,849
Mein Git-Test-Ordner wird

225
00:17:56,849 --> 00:18:02,386
in dieser speziellen Übung mit meinem Bitbucket-Repository synchronisiert.

226
00:18:02,386 --> 00:18:08,220
Was ich jetzt tun werde, ist Ihnen zu zeigen, wie Sie einige

227
00:18:08,220 --> 00:18:13,980
Ordner aus Ihrem Projektordner ausschließen können und

228
00:18:13,980 --> 00:18:19,760
dann sicherstellen, dass sie nicht mit Ihrem Online-Repository synchronisiert sind.

229
00:18:19,760 --> 00:18:24,714
Jetzt, wie gesagt, kann der Ordner „Knotenmodule“ immer neu erstellt werden,

230
00:18:24,714 --> 00:18:27,679
indem Sie an der Eingabeaufforderung npminstall eingeben.

231
00:18:27,679 --> 00:18:32,089
Deshalb, wenn Sie den Inhalt

232
00:18:32,089 --> 00:18:35,948
Ihres Ordners in ein Online-Git-Repository hochladen oder

233
00:18:35,948 --> 00:18:41,240
wenn Sie einen Commit des Ordners in Ihr Git-Repository durchführen,

234
00:18:41,240 --> 00:18:46,865
möchten Sie nicht, dass der Note-Modulordner oder alle Unterordner

235
00:18:46,865 --> 00:18:52,280
darunter in Commit enthalten sind.

236
00:18:52,280 --> 00:18:55,950
Wie schließen wir also einige Ordner oder

237
00:18:55,950 --> 00:19:02,380
einige Dateien aus unserem Ordner davon aus, in unser Git-Repository eingecheckt zu werden?

238
00:19:02,380 --> 00:19:08,680
Um dies zu tun, werden wir eine Datei namens .gitignore einrichten.

239
00:19:08,680 --> 00:19:11,860
Das ist also der Name der Datei, .gitignore.

240
00:19:11,860 --> 00:19:17,220
Also, um diese .gitignore Datei zu erstellen, werden wir zu unserem Editor gehen.

241
00:19:18,550 --> 00:19:24,929
Also im Editor im Git-Test-Ordner werde ich eine neue Datei erstellen.

242
00:19:24,929 --> 00:19:31,300
Und ich werde es nennen. gitignore.

243
00:19:31,300 --> 00:19:34,650
Beachten Sie, dass der Name mit einem Punkt beginnt und

244
00:19:34,650 --> 00:19:39,840
dann der Rest des Namens G-I-T-I-G-N-O-R-E ist.

245
00:19:39,840 --> 00:19:40,580
Das ist also sehr,

246
00:19:40,580 --> 00:19:45,320
sehr wichtig, dass Sie die Füllung genau mit dem Namen „.gitignore“ einrichten.

247
00:19:46,500 --> 00:19:51,070
Also lassen Sie uns diese Datei namens erstellen, .gitignore, und

248
00:19:51,070 --> 00:19:57,360
die erste Zeile dieser Datei, werden wir als node_modules eingeben.

249
00:19:57,360 --> 00:19:59,550
Das bedeutet also, dass

250
00:19:59,550 --> 00:20:04,410
der Knotenmodulordner von unserem Git-Commit ausgeschlossen wird.

251
00:20:05,850 --> 00:20:09,440
Sobald ich also diese .gitignore Datei erstellt und

252
00:20:09,440 --> 00:20:14,900
dann Knotenmodule in die Datei .gitignore hinzugefügt habe, speichern wir die Änderungen.

253
00:20:14,900 --> 00:20:20,260
Und dann werden wir jetzt einen Commit des aktuellen Status unseres Projekts

254
00:20:20,260 --> 00:20:22,860
in unser Git-Repository machen.

255
00:20:24,700 --> 00:20:27,220
Ich hoffe, du erinnerst dich an deine Git-Befehle.

256
00:20:27,220 --> 00:20:31,310
Lassen Sie uns einen Git-Status machen, und wenn Sie das tun,

257
00:20:31,310 --> 00:20:36,900
werden Sie sofort bemerken, dass Sie die Datei index.html

258
00:20:36,900 --> 00:20:42,070
als modifiziert markiert haben und dann die beiden neuen Dateien, .gitignore und package.json.

259
00:20:42,070 --> 00:20:49,500
Also machen wir einen git add. und machen dann einen Git-Status.

260
00:20:49,500 --> 00:20:54,120
Und dann sehen Sie, dass alle diese neuen Dateien in Ihr Commit eingecheckt wurden.

261
00:20:54,120 --> 00:20:59,665
Lassen Sie uns ein Git-Commit machen, git commit -m „viertes

262
00:20:59,665 --> 00:21:05,440
Commit“. Und die Dateien sind festgeschrieben.

263
00:21:05,440 --> 00:21:10,300
Lassen Sie uns das neue Commit in unser Online-Repository schieben.

264
00:21:10,300 --> 00:21:15,632
Also, um das zu tun, git push

265
00:21:15,632 --> 00:21:20,442
-u origin master.

266
00:21:20,442 --> 00:21:24,370
Und warten Sie, bis es auf unseren Server geschoben wird.

267
00:21:24,370 --> 00:21:29,320
Wenn Sie nun zu Ihrem Online-Git-Repository gehen,

268
00:21:29,320 --> 00:21:31,909
werden Sie sehen, dass die package.json-Datei und

269
00:21:31,909 --> 00:21:35,660
.gitignore in Ihr Git-Repository eingecheckt worden wären.

270
00:21:37,250 --> 00:21:42,130
Gehe zu meinem Bitbucket-Repository für den Git-Test.

271
00:21:42,130 --> 00:21:45,050
Sie werden sehen, dass, wenn ich die Quelle betrachte,

272
00:21:45,050 --> 00:21:47,440
Sie sehen werden, dass die Datei package.json hinzugefügt wurde,

273
00:21:48,780 --> 00:21:54,600
die .gitignore hinzugefügt wurde und die neue Datei index.html eingecheckt wurde.

274
00:21:54,600 --> 00:21:57,630
Damit ist diese Übung abgeschlossen.

275
00:21:57,630 --> 00:21:58,962
In dieser Übung

276
00:21:58,962 --> 00:22:03,760
haben wir gelernt, wie man eine package.json-Datei mit npm minute einrichtet.

277
00:22:03,760 --> 00:22:07,034
Wir haben gelernt, wie man ein npm-Modul installiert.

278
00:22:07,034 --> 00:22:12,220
Und wir haben gelernt, wie man das Lite Server npm Modul verwendet, um

279
00:22:12,220 --> 00:22:18,100
den Inhalt unseres Projektordners so zu servieren, dass er in einem Browser angezeigt werden kann.

280
00:22:18,100 --> 00:22:21,874
Dies ist also eine nette Möglichkeit, Ihre Inhalte, Ihre

281
00:22:21,874 --> 00:22:24,912
Webanwendung oder Ihre Website bereitzustellen, so

282
00:22:24,912 --> 00:22:31,680
dass Sie Änderungen in Echtzeit sehen können, die in Ihrem Browserfenster widergespiegelt werden.

283
00:22:31,680 --> 00:22:37,280
Und dann haben wir auch gesehen, wie sie den .gitignore so einrichten können, dass einige

284
00:22:37,280 --> 00:22:42,790
Ordner davon ausgeschlossen werden können, in unser Git-Repository eingecheckt zu werden.

285
00:22:42,790 --> 00:22:45,450
Damit ist diese Übung abgeschlossen.

286
00:22:45,450 --> 00:22:50,450
Also, ich bin mir sicher, dass Sie einen guten Griff bei

287
00:22:50,450 --> 00:22:56,280
der Verwendung von Git und dann auch von Knoten- und Knotenmodulen bekommen hätten.

288
00:22:56,280 --> 00:22:57,060
Mach dir keine Sorgen.

289
00:22:57,060 --> 00:23:02,020
Wir werden Knoten ausführlich auf verschiedene Arten verwenden,

290
00:23:02,020 --> 00:23:05,610
wie Sie durch die Kurse dieser Spezialisierung gehen.

291
00:23:05,610 --> 00:23:10,238
Das ist nur ein Anfang.

292
00:23:10,238 --> 00:23:13,270
( MUSIK)