HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 113: | Zeile 113: | ||
ls -al | ls -al | ||
ls -al node_modules # In diesem Ordner befinden sich nicht nur file-loader | ls -al node_modules # In diesem Ordner befinden sich nicht nur file-loader | ||
# und css-loader, sondern auch alle | # und css-loader, sondern auch alle Node.js-Pakete, die | ||
# diese Pakete benötigen! | # diese Pakete benötigen! | ||
# Dieser Ordner enthält schon nach kurzer Zeit Tausende | # Dieser Ordner enthält schon nach kurzer Zeit Tausende | ||
Zeile 154: | Zeile 154: | ||
<pre> | <pre> | ||
"name": "test01", | "name": "test01", | ||
.. | "version": "0.0.1", | ||
"description": "Dies ist ein erster Test ohne weitere Funktionalität." | "description": "Dies ist ein erster Test ohne weitere Funktionalität." | ||
... | ... | ||
Zeile 160: | Zeile 160: | ||
"author": "Wolfgang Kowarschick", | "author": "Wolfgang Kowarschick", | ||
"license": "MIT", | "license": "MIT", | ||
... | |||
</pre> | </pre> | ||
Zeile 192: | Zeile 193: | ||
</source> | </source> | ||
erfragen. | erfragen. Hier bekommen Sie eine Fehlermeldung, dass das <code>webpack</code> fehlt. (Das Paket <code>css-loader</code> funktioniert nur im Zusammenhang mit webpack.) Sie sollten diesen Fehler beheben: | ||
< | |||
< | |||
<source lang="bash"> | <source lang="bash"> | ||
npm | npm i -D webpack | ||
npm list | npm list | ||
</source> | </source> | ||
Zeile 225: | Zeile 211: | ||
</source> | </source> | ||
Da <code>npm</code> global installiert wurde, müssen Sie zum Aktualisieren von <code>npm</code> zusätlich die Option <code>-g</code> angeben: | Da <code>npm</code> global installiert wurde (was auch sinnvoll ist), müssen Sie zum Aktualisieren von <code>npm</code> zusätlich die Option <code>-g</code> angeben: | ||
<source lang="bash"> | <source lang="bash"> | ||
npm -v # Gib die aktuelle Version von npm aus. | |||
npm -g install npm # Mac OS X: sudo npm -g install npm | npm -g install npm # Mac OS X: sudo npm -g install npm | ||
npm -v # Gib die aktuelle Version von npm aus. | |||
</source> | </source> | ||
Das Tool <code>npm</code> kann sich also selbst aktualisieren. :-) | Das Tool <code>npm</code> kann sich also selbst aktualisieren. :-) | ||
Zeile 235: | Zeile 223: | ||
Durch die projektlokale Speicherung von Node.js-Paketen bläht sich ein Projekt sehr stark auf. Es enthält dann | Durch die projektlokale Speicherung von Node.js-Paketen bläht sich ein Projekt sehr stark auf. Es enthält dann | ||
meist mehrere Tausend Dateien, auch wenn das eigentliche Projekt nur aus ein paar wenigen Dateien besteht. Dies ist vor allem beim Speichern eines derartigen Projektes in eine Repository ([[Git]], [[SVN]] etc.) | meist mehrere Tausend Dateien, auch wenn das eigentliche Projekt nur aus ein paar wenigen Dateien besteht. Dies ist vor allem beim Speichern eines derartigen Projektes in eine Repository ([[Git]], [[SVN]] etc.) | ||
sehr störend. Dennoch sollte man nur ein Paket wie <code> | sehr störend. Dennoch sollte man nur ein Paket wie <code>npm</code>, dessen einzige Aufgabe es ist, die Node.js-Pakete selbst zu verwalten, global installieren. | ||
Um das Repository-Problem zu vermeiden, muss man die Speicherung von Node.js-Bibliotheken im [[Repository]] ausschließen und | Um das Repository-Problem zu vermeiden, muss man die Speicherung von Node.js-Bibliotheken im [[Repository]] ausschließen und | ||
diese Dateien bei Bedarf automatisch von den entsprechenden Servern herunterladen. Wie das geht, haben wir gerade gesehen: | diese Dateien bei Bedarf automatisch von den entsprechenden Servern herunterladen. Wie das geht, haben wir gerade gesehen: | ||
Man lädt das Projekt auf seinen Arbeitsrechner, öffnet ein Terminal, wechselt mittels <code>cd</code> ins Wurzelverzeichnis des Projektes | Man lädt das Projekt auf seinen Arbeitsrechner, öffnet ein Terminal, wechselt mittels <code>cd</code> ins Wurzelverzeichnis des Projektes | ||
(beim | (beim VSC-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projektes) und führt | ||
<code>npm install</code> | <code>npm install</code> bzw. <code>npm i</code> aus. Dies ist viel effizienter, als Node.js-Module zwischen verschiedenen Speicherbereichen hin- und her zu kopieren. | ||
==Fortsetzung des Tutoriums== | ==Fortsetzung des Tutoriums== |
Version vom 15. März 2021, 19:00 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 2 (wichtige Fakten fehlen) |
Quellenangaben: 2 (wichtige Quellen fehlen) |
Quellenarten: 3 (gut) |
Konformität: 5 (ausgezeichnet) |
Inhalt | Visual Studio Code | Node.js
Musterlösung: SVN-Repository
Zur Unterstützung der Entwicklung von Web-Anwendungen kann Node.js[1] eingesetzt werden: Generierung von statischen HTML-Seiten, Komprimierung von HTML-/CSS-/JavaScript-Code für den Client (Browser), automatische Generierung der Dokumentation, automatisches Testen der Anwendung etc. pp.
Das heißt, auch wenn man keine Node.js-Server-Anwendung erstellen sollte, ist Node.js ein sehr wertvolles und universell einsetzbares Werkzeug.
Installation
Unix-Shell
Unter Visual Studio Code (VSC) steht Ihnen ein Terminal zur Verfügung, in dem Sie Kommandozeilen-Befehle absetzen können:
- Menü am oberen Fensterrand: Klick auf
Terminal → Neues Terminal
Wenn Sie das VSC-Terminal verwenden, befinden Sie sich automatisch im Wurzelverzeichnis des zugehörigen Projektes.
Im Allgemeinen müssen Sie jedoch mit Hilfe des Unix-Befehls cd <PFAD>
in das Wurzelverzeichnis des
Projektes wechseln, wenn Sie Befehle absetzen wollen, die sich auf ein bestimmtes Projekt beziehen.
Geben Sie ins Terminal git --version
ein. Wenn eine Versionnummer ausgegeben wird, ist Git auf Ihrem Rechner bereits verfügbar.
Falls nicht, müssen Sie Git installieren: https://git-scm.com/downloads
.
Versuchen Sie nochmals git --version
. (Eventuell müssen Sie das Terminal erst schließen (Abfalleimer-Icon) und neu öffnen.
Falls es nicht funktioniert, müssen Sie den Pfad in settings.json
eintragen:
STRG/CMD/CTRL ,
(Einstellungen öffnen)- Suchen:
git path
In "settings.json" bearbeiten
Windows only:
Unter Linux und Mac OS X benutzt VSC standardmäßig eine Unix-Shell (Unix: bash, Mac OS X: terminal).
Web-Entwickler verwenden i. Allg. auch unter Windows lieber ein Terminal, das eine Unix-Shell simuliert, als den Standard-Windows-Shell cmd
.
Mit Git haben Sie automatisch auch die bash installiert. Deren Pfad müssen Sie noch in die settings.json
eintragen.
Nun tragen Sie die bash als Standard-Terminal ein:
STRG/CMD/CTRL ,
(Einstellungen öffnen)- Suchen:
shell windows
- Terminal > Integrated > Shell:
In "settings.json" bearbeiten
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"
(der Pfad heißt evtl. anders)
Beachten Sie, dass Sie \\
an Stelle von \
schreiben müssen, da in der bash ein einzelner Backquote ein Escape-Zeichen ist.
In diesem Paket ist nicht nur Git, sondern auch die „Git bash“ enthalten.
Das ist eine Terminal-Anwendung, die eine Linux-Bash emuliert und zahlreiche nützliche Befehle wie which
, vi
( :-) ) etc. zur
Verfügung stellt.
Ersetzen Sie in WebStorm die Windows-Shell durch die bash:
File
→Settings
→Tools
→Terminal
- Fügen Sie in
Shell path
den Pfad zur zuvor installierten Dateibash.exe
ein (normalerweise unterC:\Programme\Git\bin\bash.exe
oder"C:\Program Files\Git\bin\bash.exe"
– mit Anführungszeichen! – oder"C:\Programme (x86)\Git\bin\bash.exe"
– mit Anführungszeichen!) OK
Wenn Sie jetzt das Terminal öffnen, sollten Sie mit einem farbigen Prompt begrüßt werden.
Mac OS X and Unix (Linux, FreeBSD ...) only:
Da Sie im Praktikum mit Git arbeiten werden, müssen auch Sie Git installieren. Unter https://git-scm.com/downloads
können Sie das Paket herunterladen.
Unter Mac OS X kann es aber sein, dass Sie das Paket nicht installieren können, weil es nicht aus einer vertrauenswürdigen Quelle stammt. Evtl. funktioniert dann eine andere Methode: Geben Sie im Terminal den Befehl git
ein. Sofern Git noch nicht installiert wurde, sollten Sie gefragt werden, ob das nun gemacht werden soll.
Diese Frage sollten Sie natürlich mit “Yes” beantworten.
Node.js
Installieren Sie nun Node.js: https://nodejs.org/en/
, Version 14.x.
Öffnen Sie das VSC-Terminal, um zu testen, ob node
funktioniert:
- Geben Sie Folgendes in die Konsole ein:
node -v
Wenn Node.js korrekt installiert wurde,
sollte die Versionsnummer von node
ausgegeben werden.
Sie werden feststellen, das Node.js zum Großteil über Terminal-Befehle gesteuert wird. Zu Beginn mag das für eingefleischte Klickibunti-Fans ungewohnt sein, aber Sie werden sich schnell daran gewöhnen.
Ein Node.js-Test-Projekt ohne Funktionalität
Mit Hilfe von npm
[2] (node package manager) können beliebige Node.js-Pakete installiert werden.
Viele dieser Pakete könnte man global auf dem Rechner installieren. Die globale Installation hätte zur Folge, dass jedes Projekt auf diese Pakete zugreifen könnte und damit Pakete nicht mehrfach installiert werden müssten. Im Allgemeinen ist es allerdings besser, die Pakete für jedes Projekt separat, d. h. projektlokal zu installieren. Die kostet zwar mehr Platz, hat aber den Vorteil, dass man für verschiedene Projekte verschiedene Pakete verwenden kann. Es kann durchaus sein, dass zwei verschiedene Pakete ein drittes benötigen, doch jeweils in einer anderen Version. Außerdem stehen einem anderen Entwickler, der eine Kopie Ihres Projektes erhält, dann sofort alle Pakete in der jeweils benötigten Version zur Verfügung.
Um ein neues Projekt zu erstellen, legt man zunächst einen leeren Ordner an. Es kann ein beliebiger Ordner gewählt werden.
Im Folgenden wählen wird /C/webprog/test01
als Beispielsordner verwendet. (Beachten Sie, dass in der GIT Bash wie auch im HTML-Umfeld immer Linux-Pfad-Bezeichner verwendet werden, auch unter Windows.) Unter Mac OS X/Unix sollten Sie einen Pfad in Ihren Mac/Unix-Home-Verzeichnis wählen, z. B.
~/webprog/test01
. (Die Tilde ~
ist in Unix und damit auch in Mac OS X ein kurzer Alternativname für das Home-Verzeichnis. Sie können auch den vollständigen Pfad zu Ihrem Benutzerverzeichnus verwenden. Mac: /Users/MACBENUTZERNAME
, Unix: /home/UNIXBENUTZERNAME
).
Öffnen Sie nun das Terminal und geben Sie folgenden Befehle ein:
mkdir -p /C/webprog/test01 # bzw: mkdir -p ~/webprog/test01
# Erzeugen Sie ein neues (leeres!) Projektverzeichnis.
# Bitte passen Sie diesen Pfad an Ihre Gegebenheiten an.
cd /C/webprog/test01 # bzw: cd ~/webprog/test01
# Hier müssen Sie den von Ihnen zuvor definierten Pfad angeben.
npm init -y # Erzeugen Sie ein neues Node.js-Projekt unter Kontrolle von npm.
ls -al # Sehen Sie sich an, welche Dateien und Ordner erzeugt wurden.
less package.json # Sehen Sie sich den Inhalt der Konfigurationsdatei an.
# Verlassen von "less": Taste "q" drücken.
# Installieren Sie nun testhalber zwei Node.js-Pakete projektlokal.
npm install --save-dev file-loader css-loader
npm i -D file-loader css-loader # hat denselben Effekt, ist aber kürzer
ls -al
ls -al node_modules # In diesem Ordner befinden sich nicht nur file-loader
# und css-loader, sondern auch alle Node.js-Pakete, die
# diese Pakete benötigen!
# Dieser Ordner enthält schon nach kurzer Zeit Tausende
# von Ordnern und Dateien!
ls -al node_modules/file-loader
ls -al node_modules/css-loader
# Löschen Sie nun testhalber eines der beiden Pakete.
npm uninstall --save-dev file-loader
ls -al node_modules/file-loader
ls -al node_modules/css-loader
less package.json
rm -rf node_modules # Löschen Sie den gesamten Ordner node_modules.
ls -al
ls -al node_modules
npm i # Erzeugen Sie den Ordner node_modules neu (mit Hilfe
# der Dateien package.json und package-lock.json).
ls -al
ls -al node_modules
Sie können das Projekt in VSC öffnen, um die zugehörigen Dateien mit dem VSC-Editor zu betrachten und gegebenenfalls auch bearbeiten:
Datei
→Ordner öffnen
- Zum zuvor angelegten Testordner navigieren und diesen mit
Ordner auswählen
öffnen.
Sie könnten Ihre JavaScript-Projekt-Dateien auch mit jedem beliebigen anderen Code-Editor (Atom, Sublime, Nodepad++, Emacs etc. pp.) bearbeiten. Das liegt ganz bei Ihnen. Im Praktikum wird VSC verwendet. Diese IDE ist ganz angenehm zu bedienen und enthält (via Extension) einen kleinen Web-Server, der die Entwicklung von JavaScript-Code erleichtert.
Sie sollten sich angewöhnen, in der Datei package.json
, sofort nachdem Sie sie
erstellt haben, ein paar projektspezifische Informationen zu ergänzen, wobei Sie die Werte
natürlich an Ihre Gegebenheiten anpassen müssen:
"name": "test01", "version": "0.0.1", "description": "Dies ist ein erster Test ohne weitere Funktionalität." ... "keywords": ["test"], "author": "Wolfgang Kowarschick", "license": "MIT", ...
Sie können auch noch, um lästigen NPM-Warnings vorzubeugen,
das Repository einfügen (vor devDependencies
), in dem sich das Projekt später befinden wird.
"repository": { "type": "git", "url": "https://gitlab.multimedia.hs-augsburg.de/ACCOUNT/test01" },
Hier müssen Sie natürlich ACCOUNT
durch Ihren RZ-Account ersetzen.
Ändern Sie dagegen nie die Paketinformationen, die im Attribut devDependencies
gespeichert sind.
Diese werden mittels npm
verwaltet.
Der Node-Paket-Manager npm
ist ein sehr nützliches Hilfsprogramm,
mit dem Sie neue Node-Projekte erstellen (npm init -y
), Pakete installieren (npm install
) und
wieder löschen (npm uninstall
) sowie vieles mehr machen können (Dokumentation: https://docs.npmjs.com/).
Wichtig ist auch der Befehl
npm --depth=9999 update
Mit diesem können Sie die lokal gespeicherte Versionen der im Attribut devDependencies
aufgeführte Node.js-Pakete
jederzeit auf die neueste Version aktualisieren. Die aktuell installierten Versionen können Sie mit
npm list # projektlokale Node.js-Pakete
erfragen. Hier bekommen Sie eine Fehlermeldung, dass das webpack
fehlt. (Das Paket css-loader
funktioniert nur im Zusammenhang mit webpack.) Sie sollten diesen Fehler beheben:
npm i -D webpack
npm list
Sie können auch überprüfen, ob Sie in Ihrem Projekt irgendwelche veralteten Pakete benutzen (https://docs.npmjs.com/cli/outdated):
npm outdated # projektlokale Node.js-Pakete
Kein Ergebnis ist hier ein gutes Ergebnis! Ansonsten sollten die die veralteten Pakete aktualisieren:
npm update # projektlokale Node.js-Pakete
Da npm
global installiert wurde (was auch sinnvoll ist), müssen Sie zum Aktualisieren von npm
zusätlich die Option -g
angeben:
npm -v # Gib die aktuelle Version von npm aus.
npm -g install npm # Mac OS X: sudo npm -g install npm
npm -v # Gib die aktuelle Version von npm aus.
Das Tool npm
kann sich also selbst aktualisieren. :-)
Node.js-Pakete können, wie wir gesehen haben, mittels der NPM-Option -g
auch global gespeichert werden, werden aber normalerweise projektlokal abgelegt.
Durch die projektlokale Speicherung von Node.js-Paketen bläht sich ein Projekt sehr stark auf. Es enthält dann
meist mehrere Tausend Dateien, auch wenn das eigentliche Projekt nur aus ein paar wenigen Dateien besteht. Dies ist vor allem beim Speichern eines derartigen Projektes in eine Repository (Git, SVN etc.)
sehr störend. Dennoch sollte man nur ein Paket wie npm
, dessen einzige Aufgabe es ist, die Node.js-Pakete selbst zu verwalten, global installieren.
Um das Repository-Problem zu vermeiden, muss man die Speicherung von Node.js-Bibliotheken im Repository ausschließen und
diese Dateien bei Bedarf automatisch von den entsprechenden Servern herunterladen. Wie das geht, haben wir gerade gesehen:
Man lädt das Projekt auf seinen Arbeitsrechner, öffnet ein Terminal, wechselt mittels cd
ins Wurzelverzeichnis des Projektes
(beim VSC-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projektes) und führt
npm install
bzw. npm i
aus. Dies ist viel effizienter, als Node.js-Module zwischen verschiedenen Speicherbereichen hin- und her zu kopieren.
Fortsetzung des Tutoriums
Sie sollten nun Hello-World-Tutorium bearbeiten.
Quellen
- ↑ Node.js: https://nodejs.org/en/
- ↑ npm: https://www.npmjs.com/
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)