HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
(37 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{HTML5-Tutorium:JavaScript:Entwicklungsumgebung:Menü}} | {{HTML5-Tutorium:JavaScript:Entwicklungsumgebung:Menü}} | ||
'''Musterlösung''': [https:// | '''Musterlösung''': [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Test01 GIT-Repository] | ||
Zur Unterstützung der Entwicklung von Web-Anwendungen kann [[Node.js]]<ref>Node.js: https://nodejs.org/en/</ref> eingesetzt werden: | Zur Unterstützung der Entwicklung von Web-Anwendungen kann [[Node.js]]<ref>Node.js: https://nodejs.org/en/</ref> eingesetzt werden. | ||
Generierung von statischen HTML-Seiten, Komprimierung von HTML-/CSS-/JavaScript-Code für den Client (Browser), automatische Generierung der | Typische Aufgaben von Node.js sind dabei: | ||
Dokumentation, automatisches Testen der Anwendung etc. pp. | Generierung von statischen HTML-Seiten aus HTML-Templates, 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 | Das heißt, auch wenn man keine Node.js-Server-Anwendung erstellen sollte, ist Node.js ein | ||
Zeile 11: | Zeile 11: | ||
==Installation== | ==Installation== | ||
===Node.js=== | ===Node.js=== | ||
Installieren Sie nun Node.js: <code>https://nodejs.org/en/</code>, Version | Installieren Sie nun Node.js: <code>https://nodejs.org/en/</code>, Version 20.x. | ||
Starten Sie VSC neu und öffnen Sie ein Terminal, um zu testen, ob <code>node</code> funktioniert: | |||
* Geben Sie Folgendes in die Konsole ein: <code>node -v</code> | * Geben Sie Folgendes in die Konsole ein: <code>node -v</code> oder <code>node --version</code> | ||
Wenn Node.js korrekt installiert <!--und der Pfad mit den <code>node</code>-Binaries in die Systemvariable <code>PATH</code> eingetragen--> wurde, | Wenn Node.js korrekt installiert <!--und der Pfad mit den <code>node</code>-Binaries in die Systemvariable <code>PATH</code> eingetragen--> wurde, | ||
Zeile 77: | Zeile 27: | ||
===Ein Node.js-Test-Projekt ohne Funktionalität=== | ===Ein Node.js-Test-Projekt ohne Funktionalität=== | ||
Mit Hilfe von <code>npm</code><ref>npm: https:// | Mit Hilfe von <code>npm</code><ref>npm: https://docs.npmjs.com/</ref> (node package manager) können beliebige Node.js-Pakete installiert werden. | ||
Viele dieser Pakete könnte man global auf dem Rechner installieren. | Viele dieser Pakete könnte man global auf dem Rechner installieren. | ||
Zeile 84: | Zeile 34: | ||
Die kostet zwar mehr Platz, hat aber den Vorteil, dass man für verschiedene Projekte verschiedene Pakete verwenden kann. Es kann durchaus sein, dass | 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 | zwei verschiedene Pakete ein drittes benötigen, doch jeweils in einer anderen Version. Außerdem stehen einem anderen Entwickler, der eine Kopie | ||
Ihres | Ihres Projekts 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. | 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 <code>/C/ | Im Folgenden wählen wird <code>/C/webprog/test01</code> 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, {{zB}} | ||
<code>~/ | <code>~/webprog/test01</code>. (Die Tilde <code>~</code> 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: <code>/Users/MACBENUTZERNAME</code>, Unix: <code>/home/UNIXBENUTZERNAME</code>). | ||
Öffnen Sie nun das Terminal | Öffnen Sie nun das Terminal | ||
Zeile 94: | Zeile 44: | ||
<source lang="bash"> | <source lang="bash"> | ||
mkdir -p /C/ | 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 mit Hilfe 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 | npm install --save-dev file-loader css-loader | ||
npm i -D file-loader css-loader # hat denselben Effekt, ist aber kürzer | |||
npm list | |||
less package.json # Durch Drücken der Taste "q" zur Konsole zurückkehren | |||
npm install vue | |||
npm | npm list | ||
less package.json | |||
ls -al | 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 von diesen | |||
# beiden Paketen benutzt werden! | |||
# node_modules 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 | ls -al node_modules | ||
less package.json | less package.json | ||
less package-lock.json | |||
npm i # Erzeugen Sie den Ordner node_modules | |||
# neu (mit Hilfe der Informationen | |||
# in den Dateien package.json und | |||
# package-lock.json). | |||
ls -al | |||
ls -al node_modules | ls -al node_modules | ||
less | |||
touch .gitignore # Datei .gitignore anlegen | |||
echo node_modules > .gitignore # Datei .gitignore mit Inhalt füllen | |||
less .gitignore # Der Ordner node_modules wird NICHT im | |||
# GIT-Repository gesichert!!! | |||
git init # Initialisiere das zugehörige Git-Repository | |||
git add . # Füge alle Dateien des aktuellen Ordners | |||
# ins Repository | |||
git commit # Aktualisiere das Repository | |||
# Stellen Sie sicher, dass Sie in git Ihren "user.name" und Ihre "user.email" konfigurieren. | |||
git config --global user.email "E-Mail-Adresse" | |||
git config --global user.name "Benutzername" | |||
# Melden Sie sich mit Ihrem RZ-Account zunächst im Gitlab an, | |||
# damit der Remote-Zugriff auf Gitlab funktioniert: | |||
# https://gitlab.multimedia.hs-augsburg.de | |||
# Verknüpfen Sie nun Ihr Projekt mit Gitlab. | |||
# Ersetzen Sie im folgenden Befehl umbefingt ACCOUNT | |||
# durch Ihren Benutzernamen: | |||
git remote add origin https://gitlab.multimedia.hs-augsburg.de/ACCOUNT/test01.git | |||
git remote -v # Zeige die aktuelle Verknüpfung an. | |||
git push # Übertrage die aktuelle Version ins Repository | |||
git push --set-upstream origin master | |||
# Nur beim ersten Mal | |||
</source> | </source> | ||
Sie können das Projekt in | Sie können das Projekt in VSC öffnen, um die zugehörigen Dateien mit dem | ||
VSC-Editor zu betrachten und gegebenenfalls auch bearbeiten: | |||
* | * <code>File</code>/<code>Code</code> → <code>Open Folder</code> | ||
* Zum zuvor angelegten Testordner navigieren und diesen mit <code> | * Zum zuvor angelegten Testordner navigieren und diesen mit <code>Ordner auswählen</code> öffnen. | ||
Sie könnten Ihre JavaScript-Projekt-Dateien auch mit jedem beliebigen anderen Code-Editor (Atom, Sublime, Nodepad++, Emacs etc. pp.) bearbeiten. | 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 | 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. | der die Entwicklung von JavaScript-Code erleichtert. | ||
Sie sollten sich angewöhnen, in der Datei <code>package.json</code>, sofort nachdem Sie sie | Sie sollten sich angewöhnen, in der Datei <code>package.json</code>, sofort nachdem Sie sie | ||
Zeile 135: | Zeile 153: | ||
<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." | ||
... | ... | ||
"keywords": ["test"], | "keywords": ["test"], | ||
"author": "Wolfgang Kowarschick", | "author": "Wolfgang Kowarschick", | ||
"license": " | "license": "MIT", | ||
... | |||
</pre> | </pre> | ||
Zeile 153: | Zeile 172: | ||
}} | }} | ||
Hier müssen Sie natürlich <code>ACCOUNT</code> durch Ihren RZ-Account ersetzen. | Hier müssen Sie natürlich ebenfalls <code>ACCOUNT</code> durch Ihren RZ-Account ersetzen. | ||
Ändern Sie dagegen nie die Paketinformationen, die im Attribut <code>devDependencies</code> gespeichert sind. | Ändern Sie dagegen nie die Paketinformationen, die im Attribut <code>devDependencies</code> gespeichert sind. | ||
Zeile 164: | Zeile 183: | ||
Wichtig ist auch der Befehl | Wichtig ist auch der Befehl | ||
<source lang="bash"> | <source lang="bash"> | ||
npm -- | npm update | ||
// oder allgemeiner | |||
npm outdated -p | cut -d ':' -f 4 | xargs npm install | |||
</source> | </source> | ||
Mit diesem können Sie die lokal gespeicherte Versionen der im Attribut <code>devDependencies</code> aufgeführte Node.js-Pakete | Mit diesem können Sie die lokal gespeicherte Versionen der im Attribut <code>devDependencies</code> aufgeführte Node.js-Pakete | ||
Zeile 174: | Zeile 195: | ||
erfragen. | erfragen. | ||
Sie können auch überprüfen, ob Sie in Ihrem Projekt irgendwelche veralteten Pakete benutzen (https://docs.npmjs.com/cli/outdated): | Sie können auch überprüfen, ob Sie in Ihrem Projekt irgendwelche veralteten Pakete benutzen (https://docs.npmjs.com/cli/outdated): | ||
Zeile 206: | Zeile 207: | ||
</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 -g install npm | npm -v # Gib die aktuelle Version von npm aus. | ||
npm install -g agentkeepalive --save # ist evtl. notwendig, um einen Fehler zu beheben | |||
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 215: | Zeile 219: | ||
Node.js-Pakete können, wie wir gesehen haben, mittels der NPM-Option <code>-g</code> auch global gespeichert werden, werden aber normalerweise projektlokal abgelegt. | Node.js-Pakete können, wie wir gesehen haben, mittels der NPM-Option <code>-g</code> 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 | 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 | meist mehrere Tausend Dateien, auch wenn das eigentliche Projekt nur aus ein paar wenigen Dateien besteht. Dies ist vor allem beim Speichern eines derartigen Projekts 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 | Man lädt das Projekt auf seinen Arbeitsrechner, öffnet ein Terminal, wechselt mittels <code>cd</code> ins Wurzelverzeichnis des Projekts | ||
(beim | (beim VSC-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projekts) und führt | ||
<code>npm install</code> aus. | <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. | ||
=== Zugriff auf Gitlab mittels SSH === | |||
=== | |||
Öffnen Sie ein Bash-Terminal und erzeugen Sie ein SSH-Key-Paar: | |||
<source lang="bash"> | |||
ssh-keygen -t ed25519 -C "gitlab.multimedia.hs-augsburg.de" | |||
<source lang=" | |||
</source> | </source> | ||
Fügen Sie den '''öffentlichen''' Schlüssel in Gitlab ein. | |||
Öffnen Sie die Url | |||
<source lang="bash"> | <source lang="bash"> | ||
https://gitlab.multimedia.hs-augsburg.de/ | |||
</source> | </source> | ||
loggen Sie sich ein und navigieren Sie zu den SSH-Settings | |||
<source lang="bash"> | <source lang="bash"> | ||
https://gitlab.multimedia.hs-augsburg.de/-/profile/keys | |||
(Icon rechts oben → Preferences → SSH Keys) | |||
</source> | </source> | ||
Fügen Sie den Text aus der Datei <code>id_ed25519.pub</code> in das | |||
Textfeld <code>Key</code> und klicken Sie <code>Add key</code>. | |||
Nun können Sie in Ihrer Bash den SSH-Zugang überprüfen. (Denken Sie daran, | |||
dass der Gitlab-Server derzeit nur per VPN zugänglicg ist.) | |||
<source lang="bash"> | <source lang="bash"> | ||
mkdir -p ~/tmp | |||
cd ~/tmp | |||
ssh -T git@gitlab.multimedia.hs-augsburg.de | |||
# Antwort: Welcome to GitLab, @ACCOUNT! | |||
git clone git@gitlab.multimedia.hs-augsburg.de:ACCOUNT/hello_world_01.git | |||
# Reaktion: Ihr Hello-World-01-Repository wird heruntergeladen. | |||
ls -al hello_world_01 | |||
</source> | </source> | ||
== Fortsetzung des Tutoriums == | |||
==Fortsetzung des Tutoriums== | |||
Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World|Hello-World-Tutorium]] bearbeiten. | Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World|Hello-World-Tutorium]] bearbeiten. | ||
Zeile 464: | Zeile 269: | ||
<references/> | <references/> | ||
<ol> | <ol> | ||
<li value="3"> {{Quelle|Kowarschick | <li value="3">{{Quelle|Kowarschick (WebProg)}}</li> | ||
</ol> | </ol> | ||
[[Kategorie: HTML5-Tutorium: JavaScript: Entwicklungsumgebung]] | [[Kategorie: HTML5-Tutorium: JavaScript: Entwicklungsumgebung]] |
Aktuelle Version vom 28. Mai 2024, 18:30 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: GIT-Repository
Zur Unterstützung der Entwicklung von Web-Anwendungen kann Node.js[1] eingesetzt werden. Typische Aufgaben von Node.js sind dabei: Generierung von statischen HTML-Seiten aus HTML-Templates, 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
Node.js
Installieren Sie nun Node.js: https://nodejs.org/en/
, Version 20.x.
Starten Sie VSC neu und öffnen Sie ein Terminal, um zu testen, ob node
funktioniert:
- Geben Sie Folgendes in die Konsole ein:
node -v
odernode --version
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 Projekts 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 mit Hilfe 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
npm list
less package.json # Durch Drücken der Taste "q" zur Konsole zurückkehren
npm install vue
npm list
less package.json
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 von diesen
# beiden Paketen benutzt werden!
# node_modules 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
less package.json
less package-lock.json
npm i # Erzeugen Sie den Ordner node_modules
# neu (mit Hilfe der Informationen
# in den Dateien package.json und
# package-lock.json).
ls -al
ls -al node_modules
touch .gitignore # Datei .gitignore anlegen
echo node_modules > .gitignore # Datei .gitignore mit Inhalt füllen
less .gitignore # Der Ordner node_modules wird NICHT im
# GIT-Repository gesichert!!!
git init # Initialisiere das zugehörige Git-Repository
git add . # Füge alle Dateien des aktuellen Ordners
# ins Repository
git commit # Aktualisiere das Repository
# Stellen Sie sicher, dass Sie in git Ihren "user.name" und Ihre "user.email" konfigurieren.
git config --global user.email "E-Mail-Adresse"
git config --global user.name "Benutzername"
# Melden Sie sich mit Ihrem RZ-Account zunächst im Gitlab an,
# damit der Remote-Zugriff auf Gitlab funktioniert:
# https://gitlab.multimedia.hs-augsburg.de
# Verknüpfen Sie nun Ihr Projekt mit Gitlab.
# Ersetzen Sie im folgenden Befehl umbefingt ACCOUNT
# durch Ihren Benutzernamen:
git remote add origin https://gitlab.multimedia.hs-augsburg.de/ACCOUNT/test01.git
git remote -v # Zeige die aktuelle Verknüpfung an.
git push # Übertrage die aktuelle Version ins Repository
git push --set-upstream origin master
# Nur beim ersten Mal
Sie können das Projekt in VSC öffnen, um die zugehörigen Dateien mit dem VSC-Editor zu betrachten und gegebenenfalls auch bearbeiten:
File
/Code
→Open Folder
- 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 ebenfalls 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 update
// oder allgemeiner
npm outdated -p | cut -d ':' -f 4 | xargs npm install
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.
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 install -g agentkeepalive --save # ist evtl. notwendig, um einen Fehler zu beheben
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 Projekts 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 Projekts
(beim VSC-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projekts) 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.
Zugriff auf Gitlab mittels SSH
Öffnen Sie ein Bash-Terminal und erzeugen Sie ein SSH-Key-Paar:
ssh-keygen -t ed25519 -C "gitlab.multimedia.hs-augsburg.de"
Fügen Sie den öffentlichen Schlüssel in Gitlab ein. Öffnen Sie die Url
https://gitlab.multimedia.hs-augsburg.de/
loggen Sie sich ein und navigieren Sie zu den SSH-Settings
https://gitlab.multimedia.hs-augsburg.de/-/profile/keys
(Icon rechts oben → Preferences → SSH Keys)
Fügen Sie den Text aus der Datei id_ed25519.pub
in das
Textfeld Key
und klicken Sie Add key
.
Nun können Sie in Ihrer Bash den SSH-Zugang überprüfen. (Denken Sie daran, dass der Gitlab-Server derzeit nur per VPN zugänglicg ist.)
mkdir -p ~/tmp
cd ~/tmp
ssh -T git@gitlab.multimedia.hs-augsburg.de
# Antwort: Welcome to GitLab, @ACCOUNT!
git clone git@gitlab.multimedia.hs-augsburg.de:ACCOUNT/hello_world_01.git
# Reaktion: Ihr Hello-World-01-Repository wird heruntergeladen.
ls -al hello_world_01
Fortsetzung des Tutoriums
Sie sollten nun Hello-World-Tutorium bearbeiten.
Quellen
- ↑ Node.js: https://nodejs.org/en/
- ↑ npm: https://docs.npmjs.com/
- Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)