Heute werde ich Sie durch die Grundlagen von Node.js und NPM führen, einschließlich Erklärungen zur Entwicklung für das Web im Allgemeinen. Nur eine Anmerkung vorweg: Wenn Sie mit grundlegender Webentwicklung und NPM vertraut sind, können Sie diesen Artikel überspringen und hier mehr über das sehr nützliche NPX erfahren.
Okay, großartig! Lasst uns beginnen!
Node.js
Wenn Sie dies lesen, haben Sie wahrscheinlich bereits Node.js + NPM heruntergeladen und damit begonnen, Ihren Zeh in die Gewässer von Javascript zu kippen. Doch die ersten Schritte mögen schon beängstigend wirken: „Ich möchte nur ein kleines Programm in Javascript schreiben, wozu brauche ich den ganzen anderen Kram?“. Das ist verständlich, aber wirklich keine große Sache.
Fangen wir vorne an: Sie können einfach überall auf Ihrem Rechner eine Javascript-Datei erstellen, erkennbar an der Endung „.js“. Diese Datei kann beliebig mit Code gefüllt werden, aber dann fehlt noch eine Sache: Wie führt man eigentlich sein Programm aus? Hier kommt Node.js ins Spiel.
Node.js ist eine Laufzeitumgebung, explizit für Javascript. Wie die Beschreibung schon sagt, kann Node Ihren Javascript-Code in einer bestimmten Umgebung ausführen, die Node selbst bereitstellt. Der Prozess ist immer derselbe: Sie starten zuerst Node.js, und wenn Node hochgefahren ist (was bedeutet, dass der Startvorgang abgeschlossen ist), können Sie ihm Ihren Javascript-Code bereitstellen.
Es gibt zwei Möglichkeiten, wie Ihr Javascript Node als Eingabe bereitgestellt werden kann:
- Direkt zum laufenden Node-Prozess, Zeile für Zeile, keine Dateien enthalten
- Indem Sie Node mitteilen, welche Javascript-Datei geladen werden soll, ohne zeilenweise Eingabe
node
Zeile für Zeile
Nachdem Sie Node.js erfolgreich installiert haben (was nur das Herunterladen + Ausführen des Installationsprogramms ist, Beschreibungen finden Sie auf der Website von Node), können Sie Node.js von überall aus entweder in Ihrem Terminal (macOS/Linux) oder in PowerShell (Windows) starten. . Der Befehl sieht so aus.
Ja, das ist alles! Sie haben Node gerade erfolgreich gestartet! Hast du bemerkt, wie schnell das passiert ist? Einer der Gründe, warum Node.js so beliebt ist, ist unter anderem sein blitzschnelles Booten.
Jetzt, wo Node läuft, können wir unsere Javascript-App Zeile für Zeile definieren. Jede Eingabe wird verarbeitet und im Speicher gespeichert. Hier ein kleines Beispiel.
(Hit enter after every line end)
const greet = (name) => console.log("Hello, " + name);
greet("Tom"); let x = 10; x = x + 5;
(enter the following line to terminate node)
.exit
Nun, das ist alles schön und gut, aber das Schreiben größerer Apps erfordert, dass wir sie zuerst in Dateien entwerfen, bevor wir sie in Node einspeisen. Nächstes Kapitel bitte!
Eingabe über Dateien
Für dieses Beispiel benötigen Sie einen Texteditor. Grundsätzlich können Sie jedes Programm verwenden, das Text bearbeiten kann (z. B. TextEdit unter macOS oder Editor unter Windows). Ich empfehle den Open-Source-VS-Code von Microsoft, aber Sie können wählen, was am besten zu Ihrer Ergonomie passt.
Um eine Datei als Eingabe bereitzustellen, müssen wir nur eine erstellen. Erstellen Sie einfach eine einfache Textdatei mit dem Suffix „js“ im Namen. Wir nennen unsere Datei app.js. Öffnen Sie nun die Eingabeaufforderung Ihrer Wahl (die in unserem ersten Beispiel verwendete). Stellen Sie sicher, dass Sie es aus dem Verzeichnis öffnen, in dem die Datei gespeichert ist, das ist wichtig.
Wenn Sie VS Code verwenden, können Sie die integrierte Eingabeaufforderung verwenden, einfach mit der rechten Maustaste in Ihre Explorer-Ansicht klicken und „In Code öffnen“ (unter Windows) aufrufen oder das Verzeichnis mit der Datei per Drag-and-Drop verschieben das VS Code-Icon in Ihrem Dock (macOS). Dann können Sie sein Terminal wie hier beschrieben öffnen.
Wenn das Terminal bereit ist, geben Sie einfach den folgenden Befehl ein.
node app.js
Wie Sie sehen, ist einiges passiert:
- Der Knoten wurde direkt gestartet, ohne dass Benutzereingaben verfügbar waren
- Node hat Ihre gesamte Datei von oben nach unten durchlaufen lassen, bis sie ihr Ende erreicht hat
- Der Knoten selbst wurde beendet, da das Ende der Datei auch das Ende ihres Prozesses markierte
Und für eine grundlegende Einführung in Node.js, das war's! Sobald Sie Node heruntergeladen und zum ersten Mal die Verwendung der Eingabeaufforderung zum Starten Ihrer eigenen Javascript-App erlebt haben, entweder Zeile für Zeile oder aus einer Datei, sind Sie offiziell ein Javascript-Entwickler! Willkommen im Klub!
Ich werde Sie nun durch das Kernkonzept von NPM führen. Nach dem nächsten Kapitel schauen wir uns schnell die Verbindung zwischen Node.js, NPM und der Webentwicklung an. Wenn Sie mehr über Node.js erfahren möchten, können Sie sich hier unsere Geschichten über Javascript, Toolchains und alles, was mit Codierung zu tun hat, ansehen. Ich habe auch einige nützliche Ressourcen am Ende dieses Artikels verlinkt, damit Sie noch mehr lernen können.
Okay, lass uns eins verschieben!
NPM, der Node Package Manager
Wie Sie gesehen haben, ist es gar nicht so schwer, Ihren eigenen Code zu verwalten. Die App kann in einer Datei gespeichert werden, vorgenommene Änderungen bleiben einfach erhalten. Aber was ist, wenn Sie den Code eines anderen verwenden möchten, sagen wir eine kryptografische oder Bildbearbeitungsbibliothek? Sie müssen diesen Code irgendwie neben Ihren eigenen stellen, ihn für Ihre Anwendung nutzbar machen und alles überschaubar halten.
Ein naiver Ansatz wäre, einfach externen Code direkt von der Quelle herunterzuladen, z. Github, und kopieren Sie die Bibliothek Datei für Datei in Ihr eigenes Projekt. Das führt aber zu ein paar Problemen:
- Wie aktualisiert man diesen externen Code am besten? Von Hand kopieren ist nicht die beste Lösung.
- Wie behalten Sie den Überblick über all den externen Code?
- Was ist, wenn dieser externe Code selbst auf Bibliotheken angewiesen ist, die nicht in Ihrem Projekt installiert sind?
All diese Herausforderungen werden von NPM, einem Paketmanager für Node.js, angegangen. Die Aufgabe eines Paketmanagers besteht im Wesentlichen darin, Ihnen eine robuste Lösung zum Hinzufügen, Verfolgen und Entfernen von externem Code, auch bekannt als Abhängigkeiten, zu bieten. Hier sind einige Beispiele für NPM in Aktion.
npm install serve-static npm remove serve-static
Natürlich benötigt dieser Manager selbst einige spezielle Dateien, um alle Abhängigkeiten in Ihrem Projekt im Auge zu behalten. Aus diesem Grund haben Anwendungen, die NPM verwenden, mindestens zwei Dateien: package.json sowie package-lock.json. Sie können den folgenden Befehl aufrufen, um schnell ein neues NPM-Paket zu erstellen.
npm init -y
Hinweis: Wie wir im ersten Teil dieses Artikels gesehen haben, wird NPM nicht benötigt, um Node.js oder Javascript zu verwenden. Sein Fokus liegt auf der Verwaltung Ihrer Abhängigkeiten – nicht mehr und nicht weniger. Über NPM können Sie Code herunterladen, der auf npmjs.com veröffentlicht ist. Alle diese externen Module werden in Ihrem Projekt in einem speziellen Verzeichnis namens node_modules gespeichert. Sie müssen dieses Verzeichnis praktisch nie ändern, da es vollständig von NPM verwaltet wird.
Die package.json gibt Ihnen einen Einblick in Ihre aktuell verwendeten Abhängigkeiten im Projekt. package-lock.json ist eine spezielle Datei, die einige Metadaten über Mutationen in Bezug auf Ihre package.json-Datei oder das node_modules-Verzeichnis speichert und vorerst ignoriert werden kann.
Ich denke, ich werde meine Beschreibung des Kernkonzepts von NPM zusammenfassen, was es tut und welche Dateien/Verzeichnisse es automatisch generiert. Weitere Informationen sind am Ende des Artikels verlinkt.
Arc zu Webentwickler
Schön, Sie kennen jetzt die Grundlagen von Node.js und NPM. Aber warum um alles in der Welt ist es überhaupt notwendig, all diese Dinge zu lernen, wenn Sie nur anfangen möchten, Ihre eigene moderne Website zu erstellen?
Wie wir gerade gesehen haben, ermöglicht uns NPM, Code aus einer riesigen Sammlung von Bibliotheken herunterzuladen (um genau zu sein, der größten, die es gibt). Für die Webentwicklung benötigen Sie einen Server, der Ihre Webanwendung hosten (d. h. bereitstellen) kann. Es gibt viele Dienste, bei denen Sie Ihr Website-Projekt hochladen und eine vorhandene Infrastruktur, einschließlich Server, nutzen können, um die Website im Internet verfügbar zu machen.
Und für die lokale Entwicklung ist auch ein Server erforderlich, um Ihre lokalen Dateien zu laden und sie während der Entwicklung nur Ihnen auf Ihrem Gerät zur Verfügung zu stellen. Dank Node.js können Sie genau das tun: Ihre Website über einen sogenannten Localhost lokal verfügbar zu machen. Node.js hat die Tools integriert, die zum Starten eines lokalen Servers erforderlich sind, aber durch NPM kann Ihre Anwendung mit kampferprobten Komponenten angereichert werden, die Ihnen helfen können, sehr große Dienste in kurzer Zeit zu erstellen.
Das ist natürlich erst der Anfang: NPM hostet so viel Code zum Erstellen moderner Web-Apps (bekannt als PWA, „Progressive Web App“) sowie komplexer Server. Aber für eine erste Einführung denke ich, dass diese Erklärung in Ordnung sein sollte.
Ich hoffe, ich konnte Ihnen helfen, Node.js und NPM in den Griff zu bekommen. Die ersten Schritte sind immer die schwierigsten, aber wenn Sie die ersten Tage der Entwicklung durchstehen und (viel) lernen, werden Sie mit Ihren Fähigkeiten belohnt, die sich auf die Entwicklung moderner Webanwendungen ausdehnen und es Ihnen ermöglichen, so zu bauen, wie Sie es möchten.
