Diese Beitragsserie ist auf NgateSystems.com indiziert. Dort finden Sie auch eine äußerst nützliche Stichwortsuchfunktion.
Letzte Bewertung: 24. November
Dieser Beitrag soll Ihnen einen ersten Einblick in die Realität des Lebens als Webapp-Entwickler geben. Es endet mit einer einfachen funktionierenden Webanwendung, muss aber mit den kniffligen „Installations“-Aufgaben beginnen, die Sie bewältigen müssen, um an den Punkt zu gelangen, an dem Sie diese ausführen können.
Auch wenn dies ein Ärgernis ist, bleiben Sie dabei. Sobald Sie diese aus dem Weg geräumt haben, haben Sie die Möglichkeit, mit dem VSCode-Editor von Microsoft ein kleines Stück HTML zu erstellen. Abschließend verwenden Sie eine VSCode-Terminalsitzung, um dies im Browser über den lokalen Sveltekit-Server zu starten.
Hört sich das gut an? Dann lesen Sie weiter.
Absolute Anfänger finden diesen Abschnitt möglicherweise schwierig, da er einige Verfahren beinhaltet, die nicht besonders benutzerfreundlich sind. Aber es dauert nicht lange und Sie werden sich einige grundlegende Fähigkeiten aneignen, die Sie in Zukunft immer wieder anwenden werden. Folgendes werden Sie tun:
Ihr erster Schritt besteht darin, mit dem Windows-Datei-Explorer ein neues Projekt zu erstellen. Hierfür müssen Sie einen Namen wählen. Ich empfehle Ihnen, Kleinbuchstaben und Bindestriche zu verwenden und den Namen kurz zu halten. So etwas wie svelte-dev könnte eine gute Idee sein. Sie sollten Ihren Ordner auch nicht im versionierten Dropbox- oder OneDrive-Speicher ablegen. Webanwendungsprojekte neigen dazu, sehr umfangreich zu werden und neigen dazu, allgemeine Versionierungssysteme zu überfordern. In jedem Fall stellen VSCode und Git die gesamte Versionierung bereit, die Sie benötigen.
Befolgen Sie die Anweisungen unter „Erste Schritte mit Visual Studio Code“, um die Software auf Ihrem Gerät zu installieren. Starten Sie es über das Desktopsymbol und beachten Sie den Eintrag „Datei“ in der Menüleiste oben auf dem Bildschirm von VSCode. Klicken Sie darauf, wählen Sie „Ordner zum Arbeitsbereich hinzufügen“, navigieren Sie zum Speicherort Ihres Projektordners und wählen Sie ihn aus bzw. fügen Sie ihn hinzu.
Zu diesem Zeitpunkt werden auf dem VSCode-Bildschirm drei Informationsspalten unterhalb der Menüleiste angezeigt: eine Symbolleiste, ein „Explorer“-Panel mit Details zum „Arbeitsbereich“-Inhalt und ein großer leerer Bereich, der darauf wartet, dass Sie Arbeitsbereichsdateien bearbeiten.
Sie fragen sich vielleicht, warum VSCode Sie mit einem „Arbeitsbereich“-Konzept belastet, wenn Sie nur ein einziges Projekt haben. Dies liegt daran, dass Sie im Laufe der Zeit zahlreiche Projekte ansammeln und feststellen, dass Sie Code zwischen ihnen austauschen möchten. Der „Arbeitsbereich“ ermöglicht Ihnen die Bearbeitung einer Gruppe von Projekten. Sie können ein Projekt aus dem Arbeitsbereich entfernen, indem Sie mit der rechten Maustaste darauf klicken und „Ordner aus Arbeitsbereich entfernen“ auswählen. Wenn Sie VSCode schließen und neu starten, werden Sie feststellen, dass es sich Ihre vorherige Einstellung für den Arbeitsbereichsinhalt gemerkt hat und diese wiederherstellt.
Da Sie VSCode häufig verwenden, sollten Sie darüber nachdenken, VSCode an Ihre Desktop-Symbolleiste anzuheften. Beachten Sie, dass VSCode nach dem Hinzufügen eines Projekts zu einem Arbeitsbereich zwischen Neustarts daran festhält, bis Sie den Ordner explizit mit einem R-Klick-Befehl „Ordner aus Arbeitsbereich entfernen“ entfernen.
Sie können eine neue Terminalsitzung für Ihr Projekt öffnen, indem Sie im VSCode-Menü „Terminal –> Neues Terminal“ auswählen und dann in der angezeigten Liste auf den Eintrag Ihres Projekts klicken. Wenn die Option „Terminal“ in der Menüleiste nicht sichtbar ist, finden Sie sie im Overspill-Bereich „…“.
Das „Terminal“ sollte als Unterfenster unten im Bearbeitungsbereich auf der rechten Seite des VSCode-Bildschirms erscheinen. Seine Höhe und Breite können durch Klicken und Ziehen am oberen und linken Rand geändert werden. Sie werden feststellen, dass Sie es auch wieder mit der Strg-Tastenkombination ein- oder ausschalten können. Derzeit wartet es darauf, dass Sie „Terminalsitzungs“-Befehle in einer Zeile eingeben, der die vollständige Adresse Ihres Projektordners vorangestellt ist.
Wenn Ihre IT-Erfahrung bisher ausschließlich auf der Verwendung von „Klicken und Zeigen“ auf Windows- (Microsoft) und iOS-Bildschirmen (Mac) basiert, kann es sein, dass Sie sich in diesem Beitrag stark auf die Verwendung von „Terminal“-Sitzungen verlassen als unwillkommener Schock.
Das Wort „Terminal“ führt Sie hier zurück in die Anfänge der Informatik, lange vor dem Erscheinen der „grafischen Benutzeroberflächen“, die wir heute verwenden. Entwickler verwendeten dann „Terminal“-Geräte wie Fernschreiber oder „VDU“-Bildschirme, um Betriebssystemanweisungen durch die Eingabe von „Befehlen“ statt durch Klicken auf Schaltflächen auszugeben. Für Systemprogrammierer bieten diese „Command Shell“-Schnittstellen dennoch große Vorteile, da sie einfach einzurichten und sehr flexibel sind. Daher werden Terminalsitzungen weiterhin häufig im Entwicklungsprozess eingesetzt. Wenn Sie mit „Point-and-Click“-Schnittstellen aufgewachsen sind, werden Sie diese natürlich als einen Rückschritt betrachten. Aber Sie werden schnell feststellen, dass sie gut funktionieren und in jedem Fall einen weiteren nützlichen Baustein für Ihr wachsendes Spektrum an Entwicklungskompetenzen darstellen.
Man könnte ein Buch über Terminalbefehle schreiben, aber im Moment müssen Sie nur ein paar grundlegende Fakten kennen. Erstens werden Sie feststellen, dass Sie einen Terminalbefehl nicht mit der Maus bearbeiten können. Wenn Sie mitten in einem Befehl einen Fehler entdecken, müssen Sie den nachfolgenden Inhalt mit der „Rücktaste“ entfernen und erneut eingeben. Diese Unannehmlichkeit wird jedoch durch die Tatsache ausgeglichen, dass die in VSCode verwendete standardmäßige Powershell-Terminalsitzung einen Verlauf der von Ihnen verwendeten Befehle speichert und es Ihnen ermöglicht, auf einen vorherigen Befehl zu verweisen, indem Sie wiederholt die Aufwärtspfeiltaste drücken, bis der gewünschte Befehl angezeigt wird. Mit der Pfeil-nach-unten-Taste wird der Vorgang umgekehrt.
Du fühlst dich vielleicht schon etwas müde, aber bleib dabei. Sie sind fast an einem Punkt angelangt, an dem Sie mit der Verwendung von SvelteKit beginnen können.
Das „Problem“ ist, dass SvelteKit als „Paket“ über das Internet verbreitet wird. Für die Installation des SvelteKit-Pakets ist ein „Paketmanager“ erforderlich. Was ist ein Paket und was ist ein Paketmanager?
Ein „Paket“ ist eine ordentlich gebündelte Sammlung von Codedateien, die sorgfältig mit Versionsnummern versehen sind und von Details zu ihren Abhängigkeiten von anderen Paketen begleitet werden. Moderne Softwareentwicklungspraktiken nutzen Pakethierarchien, um nützliche Codekomponenten gemeinsam zu nutzen.
Ein „Paketmanager“ ist ein Tool, mit dem Sie ein Paket in einem Projekt „installieren“ können, indem Sie dessen Codeinhalt entpacken und in Projektordner kopieren. Der Paketmanager prüft die Kompatibilität mit eventuell anderen installierten Paketen.
Der Paketmanager, den Sie hier verwenden, heißt npm (Node Package Manager). Die Paketverwaltung ist anspruchsvoll, daher stehen für spezielle Situationen alternative Manager zur Verfügung. Aber der npm-Paketmanager ist die Standardauswahl und wird hier empfohlen. Sie werden npm während der Entwicklung eines Projekts wiederholt verwenden, wenn Sie feststellen, dass die Notwendigkeit besteht, zusätzliche Komponenten einzubinden.
Um einen kleinen Sprung nach vorn zu machen: Sobald der npm-Paketmanager und seine Laufzeitumgebung installiert sind, können Sie damit ein „my-package“-Paket in Ihrem Projekt installieren. Sie tun dies, indem Sie in einer VSCode-Terminalsitzung einen Befehl wie „npm create my-package“ starten. Dadurch werden die „my-package“-Bibliotheksdateien in den Node-Module-Ordner Ihres Projekts heruntergeladen.
Aber es gibt einen Haken: npm erfordert eine „Node.js-Laufzeitumgebung“. Daher muss dies auch installiert werden.
Die gute Nachricht ist, dass Node.js zumindest für Windows-Benutzer durch Herunterladen und Öffnen einer Standard-MSI-Datei (Microsoft Installation) installiert wird. Noch besser ist, dass Sie mit dem so gestarteten Installationsvorgang auch npm installieren können.
Allerdings ist die Durchführung des Verfahrens für einen Anfänger eine ziemliche Herausforderung. Die grundlegende Download-Anordnung ist unter https://nodejs.org/en unter „Run JavaScript Everywhere“ dokumentiert, enthält jedoch nur sehr wenige Bedienungsanleitungen. Es könnte hilfreich sein, die detaillierteren Anweisungen unter „So installieren Sie Node.js und NPM unter Windows“ zu lesen. Nehmen Sie sich Zeit dafür. Wenn etwas schief geht, müssen Sie Node.js nur deinstallieren und von vorne beginnen. Der beste Rat, den ich Ihnen geben kann, ist, die vom Verfahren angebotenen Standardeinstellungen zu verwenden – Überschreibungen sind ausschließlich Experten vorbehalten.
Endlich sind Sie in der Lage, Fortschritte zu machen! Wenn Sie diese Phase abschließen, werden Sie mit einer einfachen Demo-SvelteKit-Seite belohnt, die in Ihrem Browser ausgeführt wird.
npx sv create
*Nebenbei bemerkt ist npx ein „Package Runner“-Tool, das in npm eingebettet ist – es wird automatisch mit npm installiert
Ab November 2024 wird dadurch ein SvelteKit-Dialog gestartet, der Sie durch ein Verfahren zur Konfiguration Ihres Projekts mit Svelte 5 führt.
Abgesehen davon können Sie sicher sein, dass Sie, wenn bei diesem Vorgang etwas schief geht und Sie von vorne beginnen möchten, nur den gesamten Inhalt Ihres Projektordners löschen und es erneut versuchen müssen. Beachten Sie auch, dass bei npm-Installationen oft besorgniserregende Listen mit Warnmeldungen angezeigt werden, während sie nach möglichen Inkompatibilitäten in den Dateien suchen, die sie in Ihr Projekt einbauen. Es ist sehr unwahrscheinlich, dass diese für Sie als Anfänger relevant sind, daher empfehle ich Ihnen, sie einfach zu ignorieren.
Sveltes erste Frage lautet: „Wo sollen wir Ihr Projekt erstellen?“. Da Ihre Terminalsitzung bereits in Ihrem Projektordner geöffnet ist, können Sie hier einfach die Eingabetaste drücken.
Jetzt möchte Svelte wissen, welchen Projektstil es erstellen soll. Ich möchte, dass Sie hier „Minimal“ auswählen. Das Verfahren dazu ist in einer Terminalsitzung etwas umständlich, da Sie ein Kontrollkästchen nicht wie auf einer Webseite mit der Maus umschalten können. Hier geben Sie Ihre Präferenz an, indem Sie sich mit der Pfeil-nach-unten-Taste auf der „Minimal“-Zeile positionieren und dann die Eingabetaste drücken
Jetzt möchte Svelte wissen, ob Sie die TypeScript-Prüffunktionen verwenden möchten. Diese erweiterte Javascript-Erweiterung ist für Sie von entscheidender Bedeutung, wenn Sie an einer komplexen Webanwendung in Produktionsqualität arbeiten (sie überwacht Ihre Verwendung von Variablentypen in Javascript und sorgt für Konsistenz). Aber das brauchen Sie hier nicht und Ihre Lernkurve wird bereits exponentiell, daher empfehle ich Ihnen, „Nein“ auszuwählen, indem Sie zweimal den Abwärtspfeil drücken und dann die Eingabetaste drücken.
Dann fragt sich Svelte, ob Sie „zusätzliche Optionen“ hinzufügen möchten. Das ESLint-Syntaxprüfungstool, das oben in der Liste angezeigt wird, kann hilfreich sein. Dies kann manchmal ein „lautes“ Ärgernis sein und Sie vor Problemen warnen, die Sie nicht besonders interessieren. Insgesamt empfehle ich Ihnen jedoch, dies hier zu akzeptieren, indem Sie die Leertaste und die Eingabetaste drücken.
Abschließend fragt Svelte, welchen Paketmanager Sie verwenden möchten. Wählen Sie npm
Sie können wahrscheinlich alle anderen angebotenen Optionen getrost ignorieren.
Svelte ist jetzt bereit, Ihr Projekt umzusetzen. Auf Anfrage geben Sie grünes Licht, indem Sie den folgenden Befehl in Ihre Terminalsitzung eingeben:
npx sv create
Die seltsame Anzeige, die Sie jetzt auf Ihrem Bildschirm sehen, ist möglicherweise Ihr erster Blick darauf, wie npm Paketdateien in ein Projekt herunterlädt. Es könnte für Sie aufschlussreich sein, zu bemerken, dass der Ordner „svelte-dev“ in Ihrem Arbeitsbereichsfenster plötzlich mit einer beeindruckenden Anzeige des Unterordnerinhalts aufblüht. Dies ist der Code, der Ihr „minimales“ SvelteKit-Projekt darstellt.
Es ist nicht immer so, dass Paketsoftware in Ihrem Projekt landet. Wenn Sie ein Tool installieren, das für die gemeinsame Nutzung mit anderen Projekten nützlich sein könnte, können Sie eine „globale“ Installation anfordern. Dies erreichen Sie, indem Sie Ihrem npm-Befehl ein „Flag-Feld“ „-g“ hinzufügen. Sie werden Flag-Felder sehen, die häufig in Terminalbefehlen verwendet werden. Überlassen Sie es jedoch vorerst Ihrer Installationssoftware, Ihnen Anleitungen zu deren Verwendung zu geben. Bitten Sie chatGPT, Ihnen irgendwann ein Tutorial dazu zu geben.
Das Svelte-Installationsprogramm fordert Sie nun auf, npm run dev -- --open auszuführen. Probieren Sie es aus:
npm install
Dadurch wird der lokale SvelteKit-Server gestartet und Ihr Projekt darin ausgeführt. Der lokale Server hat die Aufgabe, „localhost“-Seiten auf Port 5173 in Ihrem Browser zu erstellen. Wenn dieser Satz für Sie keinen Sinn ergibt, werden Sie jetzt sehen, was er bedeutet, denn das „-- --open“-Bit des npm-Befehls übergibt die Kontrolle automatisch an Ihren Browser und gibt Ihnen eine Demonstration. Ihr Bildschirm sollte in etwa wie im Bild unten aussehen:
Dies ist eine Webanwendung, die mit genau der gleichen Art von HTML codiert ist, die Sie in Beitrag 1.1 gesehen haben. Der Unterschied besteht darin, dass sein Inhalt vom SVelteKit-Framework überwacht wird. Der Code befindet sich derzeit in Ihrem neuen VSCode svelte-dev-Projekt. Suchen wir das Bit, das das „Willkommen bei SvelteKit“-Banner auf Ihrem Browserbildschirm anzeigt, ändern Sie es und sehen Sie, was passiert.
Zurück in VSCode, während Ihr Projekt in seinem „Arbeitsbereich“ sichtbar ist, verwenden Sie seine Ordner-/Dateihierarchie, um durch seinen Inhalt genau so zu navigieren, wie Sie es im Windows Explorer tun würden. Sie werden feststellen, dass das Projekt eine ziemlich beeindruckende Codesammlung erworben hat! Beispielsweise gibt es jetzt einen Ordner „node_modules“, der mit winzigen Dateien gefüllt ist. Hierhin gingen alle Dateien, die Sie während Ihrer npm-Installationsarbeit heruntergeladen haben. Suchen Sie nun die Datei page.svelte im Ordner src/routes und klicken Sie darauf. (Die Bedeutung seines Namens und seiner Position im src-Ordner wird in zukünftigen Beiträgen geklärt – sagen wir einfach vorerst, dass der Name „page.svelte“ ziemlich wichtig ist). Sie sehen nun den Inhalt von src/routes/page.svelte im VSCode-Bearbeitungsfenster auf der rechten Seite des Bildschirms. Das
Da der SvelteKit-Server, den Sie mit npm run dev gestartet haben, Ihren Projektordner überwacht, überträgt der Server die Änderungen automatisch an die aktive Anwendung im Browser, wenn Sie eine Datei ändern.
Damit wird die Entwicklung so viel Spaß machen!
Wenn Sie diesen Beitrag überlebt haben, geben Sie sich einen goldenen Stern. Sie haben es geschafft, eine SvelteKit-Webanwendung im Entwicklungsmodus zum Laufen zu bringen, und, was ebenso wichtig ist, Sie haben das VSCode-, npm- und Node.js-„Gerüst“ erstellt, das jedem zukünftigen SvelteKit-Projekt einen fliegenden Start ermöglichen wird.
Der nächste Beitrag dieser Reihe zeigt Ihnen, wie Sie Javascript und die „Sprache“ Svelte verwenden, um Ihrer Webanwendung Intelligenz zu verleihen.
Es ist nicht schwer, mit diesem Zeug durcheinander zu kommen – die erfahrensten Entwickler vertippen sich manchmal beim Namen eines HTML-Tags und überfluten ihren Bildschirm mit furchteinflößenden Fehlermeldungen. Der Unterschied besteht darin, dass sie alles schon einmal gesehen haben und wissen, dass sie nicht in Panik geraten dürfen! Wenn Sie als Anfänger so etwas sehen, denken Sie wahrscheinlich, Sie hätten Ihren Computer völlig kaputt gemacht und müssten sich jetzt einen neuen kaufen. Beruhige dich. Sie können dies sortieren.
Fehler werden auf viele verschiedene Arten gemeldet. Syntaxfehler in einer in VSCode geöffneten .js-Datei (Javascript) werden im Bearbeitungsfenster gekennzeichnet. Im folgenden Beispiel habe ich den HTML-Code für die Header-Nachricht in einem „minimalen“ Projekt absichtlich lahmgelegt, indem ich das schließende > des anfänglichen
Beachten Sie Folgendes:
Das ist ein perfektes Beispiel dafür, warum man cool bleiben muss. Hinter all diesem Chaos steckt ein völlig trivialer Fehler
Erstens werden Sie sehen, dass das nicht alles zusammenpasst. Das System hebt das abschließende fälschlicherweise hervor. Tag als Fehlerquelle. Das eigentliche Problem liegt in der kaputten Öffnung
Meine allgemeine Vorgehensweise ist, dass ich, wenn etwas mit meinem Code schief geht, damit beginne, alle vom Editor hervorgehobenen Probleme zu beheben. Aber es wird Zeiten geben, in denen VSCode vollkommen zufrieden ist, Ihr Browser jedoch einen Fehler anzeigt. In diesem Fall müssen Sie sich die Fehlermeldungen ansehen, die in Ihrer Terminalsitzung angezeigt werden. Diese Fehler werden schwerwiegender sein und ich rate Ihnen, tief durchzuatmen, die Nachrichten genau zu lesen und zu überlegen, was sie Ihnen sagen wollen. Wenn Sie immer noch nicht weiterkommen, fügen Sie die Fehlermeldung in chatGPT ein und fragen Sie um Rat. Google-Suchanfragen, die Stackoverflow zitieren, sind ebenfalls eine gute Ressource.
Wenn Sie immer noch nicht weiterkommen, machen Sie eine Pause, gehen Sie spazieren und schnappen Sie sich etwas frische Luft. Das kann einen großen Unterschied machen. Das Tolle an der Informatik ist, dass es immer einen Grund gibt, wenn etwas schief geht. Noch besser: Wenn Sie den Grund finden und beheben, bleibt er behoben. Schätzen Sie sich glücklich – Sie könnten versuchen, ein Problem zu lösen, an dem Menschen beteiligt sind, bei dem genau das Gegenteil der Fall ist! Mut, mein Mutiger. Sie werden dieses Codierungsproblem mit Sicherheit finden und beheben. Nachtrag 2: Arbeiten mit VSCode
Denken Sie auch daran, dass Sie dies schnell mit der Tastenkombination „Strg“ ausschalten können, wenn das Bearbeitungsfeld von einer Terminalsitzung überlagert wird.
Abschließend wird es für Sie hilfreich sein zu wissen, dass mehrere Terminalfenster gleichzeitig aktiv sein können. In diesem Fall wird in der Menüleiste des Terminalfensters eine Liste der aktiven Terminals angezeigt und Sie können zwischen diesen durch Klicken auf Listeneinträge wechseln. Mit einem „Mülleimer“-Symbol können Sie hier auch ein Fenster schließen, obwohl dies möglicherweise nur sichtbar ist, wenn Sie das Terminalfenster groß genug gemacht haben – Platz ist in VSCode immer knapp.
Das obige ist der detaillierte Inhalt vonNgSysV.Installieren von Sveltekit und Erstellen einer einfachen reinen HTML-Webanwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
