Tutorial: Node.js für Einsteiger

Wenn du noch nicht mit der Verwendung von Node.js vertraut bist, findest du in dieser Anleitung einige Grundlagen.

• Verwenden Sie React in Visual Studio Code
• Erstellen Sie Ihre erste Node.js-Web-App mit Express
• Ausprobieren eines Node.js-Moduls

Voraussetzungen

• Installation von Node.js unter Windows oder unter Windows-Subsystem für Linux

Verwendung von NodeJS mit Visual Studio Code

Wenn Sie Visual Studio Code noch nicht installiert haben, kehren Sie zum obigen Abschnitt mit den Voraussetzungen zurück, und führen Sie die Installationsschritte aus, die für Windows oder WSL verlinkt sind.

1. Öffnen Sie Ihre Kommandozeile und erstellen Sie ein neues Verzeichnis: mkdir HelloNode, geben Sie dann das Verzeichnis ein: cd HelloNode

2. Erstelle eine JavaScript-Datei mit dem Namen „app.js“ und der enthaltenen Variable „msg“: echo var msg > app.js

3. Öffnen Sie das Verzeichnis und Ihre app.js Datei in VS Code mit dem Befehl: code .

4. Füge eine einfache Zeichenfolgenvariable („Hello World“) hinzu, und sende dann den Inhalt der Zeichenfolge an die Konsole, indem du Folgendes in die Datei „app.js“ eingibst:

   var msg = 'Hello World';
   console.log(msg);
   

5. Führe folgende Schritte aus, um die Datei „app.js“ mit Node.js auszuführen. Öffne das Terminal in VS Code durch Auswählen von Anzeigen>Terminal (oder Drücken von STRG+` (Graviszeichen)). Wenn du das Standardterminal ändern möchtest, wähle das Dropdownmenü und dann Standardshell auswählen aus.

6. Gib Folgendes im Terminal ein: node app.js. Die folgende Ausgabe sollte angezeigt werden: „Hello World“.

Erstellen Sie Ihre erste NodeJS-Web-App mit Express

Express ist ein minimales, flexibles und optimiertes Node.js-Framework, das die Entwicklung einer Web-App vereinfacht, die mehrere Typen von Anforderungen wie GET, PUT, POST und DELETE verarbeiten kann. Express enthält einen Anwendungsgenerator, der automatisch eine Dateiarchitektur für Ihre App erstellt.

So erstellst du ein Projekt mit Express.js

1. Öffne eine Befehlszeile (Eingabeaufforderung, PowerShell oder was du bevorzugst).

2. Erstelle mit mkdir ExpressProjects einen neuen Projektordner, und wechsele mit cd ExpressProjects in das Verzeichnis.

3. Erstelle mit Express eine HelloWorld-Projektvorlage: npx express-generator HelloWorld --view=pug

   Hinweis

   Wir verwenden hier den Befehl npx, um das Node-Paket von Express.js auszuführen, ohne es tatsächlich zu installieren (bzw. durch temporäres Installieren, je nach Betrachtungsweise). Wenn du versuchst, den Befehl express zu verwenden oder die installierte Version von Express mit express --version zu überprüfen, erhältst du als Antwort, dass Express nicht gefunden werden kann. Wenn du Express global installieren möchtest, um es immer wieder verwenden zu können, verwendest du npm install -g express-generator. Mithilfe von npm list kannst du eine Liste der Pakete anzeigen, die von npm installiert wurden. Sie werden nach der Tiefe (Anzahl der geschachtelten Verzeichnisebenen) aufgelistet. Pakete, die Sie installiert haben, liegen auf Ebene 0. Die Abhängigkeiten dieses Pakets liegen auf Ebene 1, weitere Abhängigkeiten auf Ebene 2 usw. Weitere Informationen finden Sie unter Unterschied zwischen NPX und NPM? auf Stack Overflow.

4. Untersuche die in Express enthaltenen Dateien und Ordner, indem du das Projekt in VS Code öffnest: code .

   Die von Express generierten Dateien erstellen eine Web-App mit einer Architektur, die zunächst etwas überwältigend wirken kann. Du kannst im Fenster des VS Code-Explorers (angezeigt mit STRG+UMSCHALT+E) erkennen, dass die folgenden Dateien und Ordner erstellt wurden:

   • bin. Enthält die ausführbare Datei, die Ihre App startet. Startet einen Server (an Port 3000, wenn keine Alternative angegeben wird) und richtet eine grundlegende Fehlerbehandlung ein.
   • public. Enthält alle öffentlich zugänglichen Dateien einschließlich JavaScript-Dateien, CSS-Stylesheets, Schriftartdateien, Bildern und allen anderen Ressourcen, die Benutzer benötigen, wenn sie eine Verbindung mit Ihrer Website herstellen.
   • routes. Enthält alle Routenhandler für die Anwendung. Zwei Dateien, index.js und users.js, werden in diesem Ordner automatisch generiert, um als Beispiele zum Aussondern der Routenkonfiguration Ihrer Anwendung zu dienen.
   • views. Enthält die Dateien, die von Ihrer Vorlagen-Engine verwendet werden. Express ist dazu konfiguriert, hier nach einer übereinstimmenden Ansicht zu suchen, wenn die Rendermethode aufgerufen wird. Die Standardvorlagen-Engine ist Jade, aber sie wurde von Pug abgelöst, daher haben wir das --view-Flag verwendet, um die Anzeige-Engine (Vorlagen-Engine) zu ändern. Sie können die --view-Flagoptionen und andere mittels express --help anzeigen.
   • app.js. Der Startpunkt der App. Sie lädt alles und beginnt, Benutzeranforderungen zu verarbeiten. Im Grunde hält sie alle verschiedenen Teile wie ein Klebstoff zusammen.
   • package.json. Sie enthält Projektbeschreibung, Skripts-Manager und App-Manifest. Ihr Hauptzweck ist, die Abhängigkeiten Ihrer App und ihre jeweiligen Versionen nachzuverfolgen.

5. Du musst nun die von Express verwendeten Abhängigkeiten installieren, um deine Express-App „HelloWorld“ zu erstellen und auszuführen (die Pakete, die für Aufgaben wie das Ausführen des Servers verwendet werden, wie in der Datei package.json definiert). Öffne in VS Code ein Terminal, indem du Anzeigen>Terminal auswählst (oder drücke STRG+` (Graviszeichen)). Achte darauf, dass du dich weiterhin im Projektverzeichnis „HelloWorld“ befindest. Installiere die Express-Paketabhängigkeiten mit:

   npm install
   

6. An diesem Punkt haben Sie das Framework für eine mehrseitige Web-App mit Zugriff auf eine Vielzahl von APIs und nützliche HTTP-Methoden und Middleware eingerichtet, was das Erstellen einer stabilen API erleichtert. Starte die Express-App auf einem virtuellen Server, indem du Folgendes eingibst:

   npx cross-env DEBUG=HelloWorld:* npm start
   

   Tipp

   Mit dem Teil DEBUG=myapp:* im obigen Befehl teilst du Node.js mit, dass du die Protokollierung zu Debuggingzwecken aktivieren möchtest. Denke daran, „myapp“ durch den Namen deiner App zu ersetzen. Du findest den App-Namen in der Datei package.json unter der name-Eigenschaft. Mit npx cross-env wird die Umgebungsvariable DEBUG in einem beliebigen Terminal festgelegt, du kannst sie auch über die jeweilige Vorgehensweise deines Terminals festlegen. Der Befehl npm start teilt npm mit, die Skripts in deiner Datei package.json auszuführen.

7. Du kannst jetzt die ausgeführte App anzeigen, indem du einen Webbrowser öffnest und zu localhost:3000 navigierst.

   

8. Nun, da deine Express-App „HelloWorld“ lokal in einem Browser ausgeführt wird, solltest du versuchen, eine Änderung vorzunehmen. Öffne dazu den Ordner „views“ im Projektverzeichnis, und wähle die Datei „index.pug“ aus. Ändere nach dem Öffnen h1= title in h1= "Hello World!", und wähle dann Speichern (STRG+S) aus. Zeige die Änderung an, indem du die URL localhost:3000 in deinem Webbrowser aktualisierst.

9. Gib in deinem Terminal Folgendes ein, um die Ausführung der Express-App zu beenden: STRG+C

Ausprobieren eines Node.js-Moduls

Node.js verfügt über viele Tools zur Entwicklung serverseitiger Web-Apps – einige sind integriert und viele weitere über npm verfügbar. Diese Module können bei zahlreichen Aufgaben hilfreich sein:

Wir verwenden das integrierte BS-Modul, um einige Informationen zum Betriebssystem Ihres Computers abzurufen:

1. Öffne an der Befehlszeile die Node.js-Befehlszeilenschnittstelle. Nach der Eingabe von node wird die Eingabeaufforderung > angezeigt. Sie gibt an, dass du Node.js verwendest.

2. Gib Folgendes ein, um das Betriebssystem zu identifizieren, das du zurzeit verwendest (als Antwort sollte zurückgegeben werden, dass du unter Windows arbeitest): os.platform()

3. Gib Folgendes ein, um die CPU-Architektur zu überprüfen: os.arch()

4. Geben Sie Folgendes ein, um die auf Ihrem System verfügbaren CPUs anzuzeigen: os.cpus()

5. Verlasse die Node.js-Befehlszeilenschnittstelle, indem du .exit eingibst oder zweimal STRG+C drückst.

   Tipp

   Du kannst das Betriebssystemmodul von Node.js z. B. verwenden, um die Plattform zu überprüfen und eine plattformspezifische Variable zurückzugeben: „Win32/.bat“ für die Windows-Entwicklung, „darwin/.sh“ unter Mac/UNIX, Linux, SunOS usw. (z. B. var isWin = process.platform === "win32";).