HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
 
(83 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{HTML5-Tutorium:JavaScript:Entwicklungsumgebung:Menü}}
{{HTML5-Tutorium:JavaScript:Entwicklungsumgebung:Menü}}


Zur Unterstützung der Entwicklung von Web-Anwendungen kann [[Node.js]]<ref>Node.js: https://nodejs.org/en/</ref> eingesetzt werden:
'''Musterlösung''': [https://gitlab.multimedia.hs-augsburg.de/kowa/WK_Test01 GIT-Repository]
automatische Übersetzung von [[ECMAScript|ECMAScript 6/7/8]] (genauer ECMAScript 2015/2016/2017) in ECMAScript 5.1, automatische Generierung der
Dokumentation, automatisches Testen der Anwendung etc.


Das heißt, auch wenn man keine Node.js-Server-Anwendung erstellt, ist Node.js ein  
Zur Unterstützung der Entwicklung von Web-Anwendungen kann [[Node.js]]<ref>Node.js: https://nodejs.org/en/</ref> 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.
sehr wertvolles und universell einsetzbares Werkzeug.


==Installation==
==Installation==
===Unix-Shell===
Web-Entwickler verwenden unter Windows {{iAllg}} ein Terminal, das eine [[Unix]]-[[Shell]] simuliert.
Unter Linux und Mac OS X ist es nicht notwendig, eine separate Unix-Shell zu installieren, da
diese dort sowieso schon existiert (Unix: bash, Mac OS X: terminal).
Installieren Sie „Git for Windows“ (<code>https://git-for-windows.github.io/</code>; wählen Sie bei jeder Frage die Default-Werte, außer Sie haben einen triftigen Grund, davon abzuweichen). In diesem Paket ist die „Git BASH“ enthalten.
Das ist eine Terminal-Anwendung, die eine Linux-Bash emuliert und zahlreiche nützliche Befehle wie <code>which</code>, <code>[[vi]]</code> ( :-) ) etc. zur
Verfügung stellt.
Unter [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung: WebStorm|WebStorm]] steht ebenfalls ein Terminal zur Verfügung,
in dem Sie Kommandozeilen-Befehle absetzen können:
* Klick auf Icon in der linken unteren Ecke → Klick auf <code>Terminal</code>
Wenn Sie das Web-Storm-Terminal verwenden, befinden Sie sich automatisch im Wurzelverzeichnis des zugehörigen Projektes.
Bei Im Allgemeinen müssen Sie jedoch mit Hilfe des Unix-Befehls <code>cd&nbsp;&lt;PFAD&gt;</code> in das Wurzelverzeichnis des
Projektes wechseln, wenn Sie Befehle ansetzen wollen, die sich auf ein bestimmtes Projekt beziehen.


===Node.js===
===Node.js===
Installieren Sie nun Node.js: <code>https://nodejs.org/en/</code>, <code>https://nodejs.org/dist/latest/</code>, Version 8.x.
Installieren Sie nun Node.js: <code>https://nodejs.org/en/</code>, Version 20.x.  
Achten Sie darauf, dass die Option <code>Add to PATH</code> ausgewählt wurde.


Starten Sie ein Unix-Terminal ({{zB}} Mac-OS-X-Terminal, <code>bash</code> oder auch WebStorm: Klick auf Icon in der linken unteren Ecke → Klick auf <code>Terminal</code>).
Starten Sie VSC neu und öffnen Sie ein Terminal, um zu testen, ob <code>node</code> funktioniert:
Öffnen Sie das 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,
sollte die Versionsnummer von <code>node</code> ausgegeben werden.
sollte die Versionsnummer von <code>node</code> ausgegeben werden.


Zeile 42: Zeile 25:
Zu Beginn mag das für eingefleischte [[Klickibunti]]-Fans ungewohnt sein, aber Sie werden sich schnell daran gewöhnen.
Zu Beginn mag das für eingefleischte [[Klickibunti]]-Fans ungewohnt sein, aber Sie werden sich schnell daran gewöhnen.


===Wichtige Node.js-Pakete===
===Ein Node.js-Test-Projekt ohne Funktionalität===


Mit Hilfe von <code>npm</code> (npm = node package manager, https://www.npmjs.com/) können beliebige Node.js-Pakete installiert werden.
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 Pakte könnte man global auf dem Rechner installieren.
Die globale Installation hätte zur Folge, dass jedes Projekt auf diese Pakete zugreifen kann, Pakete also nicht mehrfach installiert werden müssen.


Im Allgemeinen ist es alledings besser, die Pakete für jedes Projekt separat zu installieren. Insbesondere für den Webpack-Dev-Server ist dies zwingend
Viele dieser Pakete könnte man global auf dem Rechner installieren.
notwendig. Dazu muss man zunächst einen leeren Ordner anlegen, indem das neue Projekt liegt. Es kann ein beliebiger Ordner gewählt werden.
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 Folgenden wählen wir <code>/C/mmprog/test</code> als Beispielsordner. (Bachaten Sie, dass in der GIT Bash unter Windows Linux-Pfad-Bezeichner
Im Allgemeinen ist es allerdings besser, die Pakete für jedes Projekt separat, {{dh}} projektlokal zu installieren.  
anstelle von Window-Pfad-Bezeichnern verwendet werden.)
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.


Öffnen Sie nun ihr bevorzugtes Unix-Terminal
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/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>~/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
und geben Sie folgenden Befehle ein:
und geben Sie folgenden Befehle ein:


<source lang="bash">
<source lang="bash">
                        # Erzeugen Sie ein neues (leeres!) Projektverzeichnis.
mkdir -p /C/webprog/test01      # bzw: mkdir -p ~/webprog/test01
                        # Bitte passen Sie diesen Pfad an Ihre Gegebenheiten an.
                                # Erzeugen Sie ein neues (leeres!)  
mkdir -p /C/mmprog/test  # Achten Sie darauf, dass es diesen Pfad vorher nicht gegeben hat.
                                # Projektverzeichnis.
cd /C/mmprog/test        # Hier müssen Sie den von Ihnen zuvor definierten Pfad angeben. 
                                # Bitte passen Sie diesen Pfad an  
npm init -y              # Erzeugen Sie ein neues Node.js-Projekt unter Kontrolle von npm.
                                # Ihre Gegebenheiten an.
                        # Installieren Sie nun die Node.js-Pakete grunt (Task-Manager)  
                        # und babel (JavaScript-Transpiler) projektlokal.
npm install --save-dev grunt
ls -al                  # Sehen Sie sich an, welche Dateien und Ordner erzeugt wurden.
ls -al node-pagacke/.bin
                          # Damit WebStorm den Befehl 'node-pagacke/.bin/grunt' findet,
                          # muss noch das Grunt-Command-Line-Interface global
                          # installiert werden.
npm install -g grunt-cli
less package.json        # Sehen Sie sich den Inhalt der Konfigurationsdatei an.
</source><ref>npm: https://www.npmjs.com/</ref>


Sie können das Projekt in WebStorm öffenen, um die zugehörigen Dateien mit dem
cd /C/webprog/test01            # bzw: cd ~/webprog/test01
WebStorm-Editor bearbeiten zu können:
                                # 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.


* <code>File</code>/<code>WebStorm</code> → <code>Open</code>
ls -al                          # Sehen Sie sich an, welche Dateien
* Zum zuvor angelegten Testordner navigieren und diesen mit <code>OK</code> öffnen. Die Frage, ob Sie das Projekt im selben oder in einem neuen Fenster öffnen wollen, können Sie nach Belieben beantworten.  
                                # und Ordner erzeugt wurden.


Sie können Ihre JavaScript-Projekt-Dateien auch mit jedem beliebigen anderen Code-Editor (Atom, Sublime, Nodepad++, Emacs etc. pp.) bearbeiten.
less package.json              # Sehen Sie sich den Inhalt der
Das liegt ganz bei Ihnen. WebStorm ist sehr angenehm zu bedienen und enthält einen kleinen Web-Server, der die Entwicklung von JavaScript-Code erleichtert.  
                                # Konfigurationsdatei an.
(Es gibt allerdings auch für Node.js einen einfachen HTTP-Server, der bei der Entwicklung von HTML-Anwendungen zu
                                # Verlassen von "less":  
Testzwecken einegesetzt werden kann: https://github.com/indexzero/http-server)
                                #  Taste "q" drücken.
Außerdem enthält WebStorm ein Terminalfenster (Menü am unternen Fensterrand), der unter Windows allerdings
nur Windows-Befehle ausführen kann. Unter Windows verwende ich daher für komplexere Aufgaben die (Git-)Bash.


Sie sollten sich angewöhnen, in der Datei <code>package.json</code> sofort nachdem Sie sie
                                # Installieren Sie nun testhalber
erstellt haben, ein paar projektspezifische Informationen zu ergänzen, wobei Sie die Werte
                                # zwei Node.js-Pakete projektlokal.
natürlich an Ihre Gegebenheiten anpassen müssen:
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


<source lang="json">
npm install vue
  "kewords": ["test"],
npm list
  "author": "Wolfgang Kowarschick",
less package.json
  "license": "CC-BY-NC-SA-4.0",
</source>
 
Ändern Sie dagegen nicht die Paketinformationen, die im Attribut <code>devDependencies</code> gespeichert sind.
Diese werden mittels <code>npm</code> verwaltet.
Der Node-Paket-Manager <code>npm</code> ist ein sehr nützliches Hilfsprogramm,
mit dem Sie neue Node-Projekte erstellen (<code>npm init -y</code>), Pakete installieren (<code>npm install</code>) und
wieder löschen (<code>npm uninstall</code>) und vieles mehr machen können (Dokumentation: https://docs.npmjs.com/).


Wichtig ist auch der Befehl
ls -al       
<source lang="bash">
ls -al node_modules            # In diesem Ordner befinden sich nicht
npm update
                                # nur file-loader und css-loader, sondern
</source>
                                # auch alle Node.js-Pakete, die von diesen
Mit diesem können Sie die lokal gespeicherte Versionen der im Attribut <code>devDependencies</code> aufgeführte Node.js-Pakete
                                # beiden Paketen benutzt werden!
jederzeit auf die neueste Version aktualisieren. Die aktuell installierten Versionen können Sie mit
                                # 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


<source lang="bash">
                                # Löschen Sie nun testhalber eines
npm list
                                # der beiden Pakete.
</source>
npm uninstall --save-dev file-loader


erfragen.
ls -al node_modules/file-loader
ls -al node_modules/css-loader


Sie können Pakete auch lokal löschen und dann mittels <code>npm install</code> wieder herstellen.
less package.json
Versuchen Sie es (Achtung: Die Unix-Befehle <code>ls</code> und <code>rm</code> funktionieren
unter Windows nur in der Bash. In einem Windows-Terminal heißen die entsprechenden Befehle  <code>dir</code> und <code>del</code>):


<source lang="bash">
rm -rf node_modules             # Löschen Sie den gesamten Ordner
ls -al node_modules # Liste alle Dateien und Verzeichnisse auf,
                                # node_modules.
                    # die im Ordner node_modules enthalten sind.
ls -al      
rm -rf node_modules # Lösche diesen Ordner samt Inhalt.
npm list
ls -al node_modules
npm install
ls -al node_modules
ls -al node_modules
npm list
</source>
Sie können auch überprüfen, ob Sie in Ihrem Projekt irgendwelche veralteten Pakete benutzen (https://docs.npmjs.com/cli/outdated):
<source lang="bash">
npm outdated    # projektspezifische Node.js-Pakete
npm -g outdated # globale Node.js-Pakete
</source>


Kein Ergebnis ist hier ein gutes Ergebnis!
less package.json
less package-lock.json


Node.js-Pakete können, wie wir gesehen haben, mittels der npm-Option <code>-g</code> auch global gespeichert werden.
npm i                            # Erzeugen Sie den Ordner node_modules
Allerdings ist es meist besser, sie mittels der Option <code>--save-dev</code> projektlokal zu speicher.
                                # neu (mit Hilfe der Informationen
Die kostet zwar mehr Platz, hat aber den Vorteil, dass man für verschiedene Projekte verschiedene Pakete verwenden kann. Es kann durchaus sein, dass
                                # in den Dateien package.json und
zwei verschiedene Pakete ein drittes benötigen, doch jeweils in einer anderen Version. Außerdem stehen einem anderen Entwickler, der eine Kopie
                                # package-lock.json).
Ihres Projektes erhält, dann sofort alle Pakete in der jeweils benötigten Version zur Verfügung.Dies ist vor allem beim Speichern eines derartigen Projektes in eine Repository ([[SVN]], [[Git]] etc.)
ls -al       
sehr störend. Ein Paket wie <code>grunt-cli</code>, dessen einzige Aufgabe es ist, die jeweils projektlokale
ls -al node_modules
Version von Grunt auszuführen, kann und sollte man dagegen global installieren.


Durch die projektlokale Speicherung von Node.js-Paketen bläht sich ein Projekt sehr stark auf. Es enthält dann
touch .gitignore                # Datei .gitignore anlegen
meist mehrere Hundert oder gar mehrere Tausend Dateien, auch wenn das eigentliche Projekt nur aus ein paar wenigen Dateien besteht.  
echo node_modules > .gitignore  # Datei .gitignore mit Inhalt füllen
Um dieses Problem zu vermeiden, muss man die Speicherung von Node.js-Bibliotheken im Repository ausschließen und
less .gitignore                  # Der Ordner node_modules wird NICHT im
diese Dateien bei Bedarf auftomatisch von den entsprechenden Servern herunterladen. Wie das geht, haben wir gerade gesehen:
                                # GIT-Repository gesichert!!!
Man läd das Projekt auf seinen Arbeitsrechner, öffnet ein Terminal, wechselt mittels <code>cd</code> ins Wurzelverzeichnis des Projektes
git init                        # Initialisiere das zugehörige Git-Repository
(beim WebStorm-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projektes) und führt
git add .                        # Füge alle Dateien des aktuellen Ordners
<code>npm install</code> aus.
                                # ins Repository
git commit                      # Aktualisiere das Repository


===Grunt===
# 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"


Als nächstes initialisieren Sie Grunt (https://gruntjs.com/) <ref>Grunt: https://gruntjs.com/</ref>.
# Melden Sie sich mit Ihrem RZ-Account zunächst im Gitlab an,
Grunt ist ein “JavaScript Task Runner”, also ein Programm, das Aufgaben (''tasks'') wie {{zB}} das Übersetzen von [[ECMAScript|ECMAScript 2015/16/17]] in
# damit der Remote-Zugriff auf Gitlab funktioniert:
ECMAScript 5.1 oder das Komprimieren von Programmdateien automatisch durchführt.  
#  https://gitlab.multimedia.hs-augsburg.de


Die Initialisierung erfolgt durch die Bereitstellung zweier Dateien <code>package.json</code>
# Verknüpfen Sie nun Ihr Projekt mit Gitlab.
und <code>gruntfile.json</code> im Root-Verzeichnis der Web-Anwendung. Die Datei <code>package.json</code>
# Ersetzen Sie im folgenden Befehl umbefingt ACCOUNT
haben Sie schon mittels <code>npm init</code> erstellt.
# durch Ihren Benutzernamen:
 
git remote add origin https://gitlab.multimedia.hs-augsburg.de/ACCOUNT/test01.git
In der Datei <code>package.json</code> gibt es das Attribut <code>main</code>.
                               
Es enthält den Namen der Konfigurationsdatei von Grunt: <code>gruntfile.js</code>.
git remote -v                    # Zeige die aktuelle Verknüpfung an.
Diese fehlt allerdings noch. Also legen Sie sie im Wurzelverzeichnis des Projektes mit einem Texteditor Ihrer Wahl an
git push                        # Übertrage die aktuelle Version ins Repository
(WebStorm: <code>File</code>/<code>WebStorm</code> → <code>New</code>  → <code>File</code>):
git push --set-upstream origin master
 
                                # Nur beim ersten Mal
'''<code>gruntfile.js</code>'''
<source lang="javascript">
module.exports = function(grunt)
{
  // Project configuration.
  grunt.initConfig
  ({
    pkg: grunt.file.readJSON('package.json'),
  });
};
</source>
</source>


Diese Datei ist noch ziemlich leer, aber das wird sich ändern.
Sie können das Projekt in VSC öffnen, um die zugehörigen Dateien mit dem
VSC-Editor zu betrachten und gegebenenfalls auch bearbeiten:


Vorausschauend sollten Sie eine überflüssige WebStorm-Fehlerprüfung deaktivieren, da anderenfalls künftige
* <code>File</code>/<code>Code</code> → <code>Open Folder</code>
Änderungen an der Datei <code>gruntfile.js</code> jedes Mal eine Fehlermeldung zur Folge haben, wenn die
* Zum zuvor angelegten Testordner navigieren und diesen mit <code>Ordner auswählen</code> öffnen.
Datei in ein SVN-Repository geschrieben werden soll:


* <code>File</code>/<code>WebStorm</code> → <code>Settings</code>/<code>Preferences</code>  → <code>Editor</code> → <code>Inspections</code>
Sie könnten Ihre JavaScript-Projekt-Dateien auch mit jedem beliebigen anderen Code-Editor (Atom, Sublime, Nodepad++, Emacs etc. pp.) bearbeiten.
* <code>JavaScript</code> aufklappen → <code>General</code> aufklappen → <code>Unsued global symbols</code> deselektieren
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,
* <code>OK</code>
der die Entwicklung von JavaScript-Code erleichtert.


<!--
Sie sollten sich angewöhnen, in der Datei <code>package.json</code>, sofort nachdem Sie sie
{{TBD}}
erstellt haben, ein paar projektspezifische Informationen zu ergänzen, wobei Sie die Werte
==Ausschließen diverser Dateien von automatischer Speicherung und/oder Überprüfung==
natürlich an Ihre Gegebenheiten anpassen müssen:


Sie sollten unbedingt verhindern das Node.js-Modulateien ins Repository geschrieben werden. Da ist, wie Sie zuvor gesehen haben,  
<pre>
überflüssig und nimmt '''sehr viel''' Zeit in Anspruch, da es sich um Hunderte von Dateien handelt:
"name": "test01",
"version": "0.0.1",
"description": "Dies ist ein erster Test ohne weitere Funktionalität."
...
"keywords": ["test"],
"author": "Wolfgang Kowarschick",
"license": "MIT",
...
</pre>


* Rechtsklick im Dateibaum auf <code>node_modules</code> → <code>Subversion</code> → <code>Ignore</code> → <code>node_modules</code>
Sie können auch noch, um lästigen NPM-Warnings vorzubeugen,
* Sollte der vorangegangene Schritt schief gegangen sein (WebStorms Subversion-Tools sind in dieser Hinsicht ziemlich schlecht), müssen Sie den letzten Schritt gegebenenfalls mit einem anderen Tool bewerkstelligen. Unter Windows ist Tortoise dafür recht gut geeignet.
das Repository einfügen (vor <code>devDependencies</code>), in dem sich das Projekt später befinden wird.


Außerdem sollten Sie die automatische Überprüfung auf Fehler für alle Ordner ausschalten, die nicht von Ihnen stammen:
{{pre|
"repository": {
  "type": "git",
  "url": "{{Git-Server}}/ACCOUNT/test01"
},
}}


* Rechtsklick im Dateibaum auf  <code>node_modules</code> → <code>Mark Directory as</code> → <code>excluded</code>
Hier müssen Sie natürlich ebenfalls <code>ACCOUNT</code> durch Ihren RZ-Account ersetzen.
* Rechtsklick im Dateibaum auf  <code>doc</code> → <code>Mark Directory as</code> → <code>excluded</code>


Beide Ordner enthalten Dateien, die nicht von Ihnen stammen. Diese Dateien können Fehler und Hinweise enthalten,
Ändern Sie dagegen nie die Paketinformationen, die im Attribut <code>devDependencies</code> gespeichert sind.
veraltete (“deprecated”) Schnittstellen verwenden etc. (Oh ja, auch andere Programmierer machen Fehler. :-) )
Diese werden mittels <code>npm</code> verwaltet.
Und wenn Sie diese beiden Ordner nicht als <code>excluded markieren</code>, prüft WebStorm bei jedem Commit die
darin enthaltenen Dateien und weist Sie auf jedes Problem hin. Das können so viele Probleme sein, dass Sie die
Probleme in Ihren eigenen Dateien vollkommen übersehen.
-->


===Babel===
Der Node-Paket-Manager <code>npm</code> ist ein sehr nützliches Hilfsprogramm,
mit dem Sie neue Node-Projekte erstellen (<code>npm init -y</code>), Pakete installieren (<code>npm install</code>) und
wieder löschen (<code>npm uninstall</code>) sowie vieles mehr machen können (Dokumentation: https://docs.npmjs.com/).


Das Compiler „Babel“<ref>Babel: https://babeljs.io/</ref> wurde geschaffen, da die meisten Browser zwar ECMAScript 5.1
Wichtig ist auch der Befehl
unterstützten<ref>ECMAScript 5 compatibility table: https://kangax.github.io/compat-table/es5/</ref>,
<source lang="bash">
aber nicht die Nachfolgesprachen  ECMAScript 2015, ECMAScript 2016 und ECMAScript 2017.
npm update
Dies hat sich in jüngster Zeit deutlich gebessert. Die meisten Browser unterstützen diese Sprachen in der Zwischenzeit
</source>
sogar besser als Babel.<ref>ECMAScript 6 compatibility table: https://kangax.github.io/compat-table/es6/</ref><ref>ECMAScript 2016+ compatibility table: http://kangax.github.io/compat-table/es2016plus/</ref>.
Mit diesem können Sie die lokal gespeicherte Versionen der im Attribut <code>devDependencies</code> aufgeführte Node.js-Pakete
jederzeit auf die neueste Version aktualisieren. Die aktuell installierten Versionen können Sie mit


Allerdings wird der sehr wichtige Import-Befehl derzeit von den meisten Brwosern noch nicht unterstützt.<ref>import Statement: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/import</ref>
<source lang="bash">
npm list    # projektlokale Node.js-Pakete
</source>


In solchen Fällen kommt Babel zum Einsatz. Babel übersetzt moderneren ECMAScript-Code in älteren ECMAScript-Code.
erfragen.
(Da „Babel“ den Code nicht in eine  maschinennähere Sprache sondern nur in eine alternative ECMAScript-Version übersetzt,
sagen viele Nutzer „Transpiler“ an Stelle von „Compiler“.) Auf diese Weise wird erreicht, dass eine deutlich größere Anzahl von Browsern
den Code ausführen kann.
 
Babel wurde selbst in ECMAScript geschrieben und liegt  in Form von Node.js-Paketen vor.<ref>babel-cli: https://www.npmjs.com/package/babel-cli</ref><ref>babel-preset-env: https://github.com/babel/babel-preset-env</ref><ref>grunt-babel: https://github.com/babel/grunt-babel</ref>
Installieren Sie diese zunächst:


Sie können auch überprüfen, ob Sie in Ihrem Projekt irgendwelche veralteten Pakete benutzen (https://docs.npmjs.com/cli/outdated):
<source lang="bash">
<source lang="bash">
npm install --save-dev grunt babel-cli babel-preset-env grunt-babel
npm outdated    # projektlokale Node.js-Pakete
</source>
</source>


Nun muss Babel noch konfiguriert werden. Theoretisch könnten Sie den Übersetzer einfach von der Kommandozeile aus
Kein Ergebnis ist hier ein gutes Ergebnis! Ansonsten sollten die die veralteten Pakete aktualisieren:
aufrufen (da ein Command Line Interface – CLI vorliegt). Aber das ist auf dauer etwas mühsam. Besser ist es
einen Grunt-Task zu definieren, der diese Aufgabe übernimmt.


Andern Sie den Inhalt der Datei <code>gruntfile.js</code>:
<source lang="bash">
npm update   # projektlokale Node.js-Pakete
<source lang="javascript">
module.exports = function(grunt)
{
  // Project configuration.
  grunt.initConfig
  ({
    pkg: grunt.file.readJSON('package.json'),
 
    babel:
    {
      options:
      {
        "sourceMap": true
      },
      dist:
      {
        files:
        [{
          "expand": true,
          "cwd":    "src/js",
          "src":   ["**/*.js"],
          "dest":  "web/js/",
          "ext":    ".js"
        }]
      }
    },
  });
 
  // Activate task(s)
  grunt.loadNpmTasks("grunt-babel");
 
  // Default task(s).
  grunt.registerTask("default", ["babel"]);
};
</source>
</source>


Die Babel-Konfiguration bewirkt, dass alle Dateien mit der Endung <code>.js</code>, die sich
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:  
vom Projekt-Wurzelverzeichnis <code>&lt;ROOT&gt;</code> aus gesehen im Ordner <code>src/js</code> oder einem darin enthaltenen Unterordner befinden,
mit Hilfe von Babel übersetzt und in den Ordner  <code>&lt;ROOT&gt;/web/js</code> kopiert werden. Dort erhalten sie ebenfalls die Endung <code>.js</code>.<ref>Grunt – Building the files object dynamically: https://gruntjs.com/configuring-tasks#building-the-files-object-dynamically</ref>


Mit Hilfe des Befehle <code>grunt.loadNpmTasks("grunt-babel");</code> wird
<source lang="bash">
der Task aktiviert. Er kann ab sofort im Wurzelverzeichnis des Projektes mit dem
npm -v                                # Gib die aktuelle Version von npm aus.
Befehl <code>grunt babel</code> aktiviert werden. Der Befehl
npm install -g agentkeepalive --save # ist evtl. notwendig, um einen Fehler zu beheben
<code>grunt.loadNpmTasks("grunt-babel");</code> sorgt dafür, dass
npm -g install npm                    # Mac OS X: sudo npm -g install npm
der Task <code>babel</code> zur Liste der Default-Aktionen von Grunt hinzugefügt wird.
npm -v                               # Gib die aktuelle Version von npm aus.
Das heißt, wenn man <code>grunt</code> ohne Argument aufruft, wird der
Babel-Task ebenfalls ausgeführt.<ref>Grunt API: https://gruntjs.com/api/grunt</ref>
 
Um Babel zu testen erzeugen Sie die Datei <code>src/js/main.js</code>:
* <code>File</code>/<code>WebStorm</code> → <code>New</code>  → <code>Directory</code>/<code>File</code>
Fügen Sie folgenden EcmaScript-6-Code ein:
 
<source lang="javascript">
let evens = [0, 2, 4, 6, 8],
    odds = evens.map(langer_parameter_name => langer_parameter_name + 1),
    pairs = evens.map(v => ({ even: v, odd: v + 1 }));
 
let name = "Anna";
 
console.log(evens);
console.log(odds);
console.log(pairs);
console.log(`Hello ${name}!`);
</source>
</source>
Das Tool <code>npm</code> kann sich also selbst aktualisieren. :-)


Diese Datei können Sie in WebStorm direkt ausführen:
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.
* Im Dateibaum Rechtsklick auf <code>src/js/main.js</code> → <code>Run 'main.js'</code>
Durch die projektlokale Speicherung von Node.js-Paketen bläht sich ein Projekt sehr stark auf. Es enthält dann
Das Ergebnis sehen Sie im Konsolfester von WebStorm, da Node.js schon zu 99% ECMAScript-2015-kompatibel ist.<ref>Node.js ES2015 Support: http://node.green/</ref>
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>npm</code>, dessen einzige Aufgabe es ist, die Node.js-Pakete selbst zu verwalten, global installieren.


Nun können Sie die Datei <code>src/js/main.js</code> mit Hilfe von Babel übersetzen.
Um das Repository-Problem zu vermeiden, muss man die Speicherung von Node.js-Bibliotheken im [[Repository]] ausschließen und
Rufen Sie einfach einmal im Terminal einen der beiden Befehle <code>grunt babel</code> oder einfach nur <code>grunt</code>  im
diese Dateien bei Bedarf automatisch von den entsprechenden Servern herunterladen. Wie das geht, haben wir gerade gesehen:
Wurzelverzeichnis des Projektes auf. Sie werden anschließend feststellen, dass ein Ordner
Man lädt das Projekt auf seinen Arbeitsrechner, öffnet ein Terminal, wechselt mittels <code>cd</code> ins Wurzelverzeichnis des Projekts
<code>web/js</code> angelegt und in diesen eine Datei namens <code>main.js</code>
(beim VSC-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projekts) und führt
eingefügt wurde. Wenn Sie sich den Inhalt dieser Datei ansehen, stellen Sie fest,
<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.
dass sich sich nicht von der Datei <code>src/js/main.js</code> unterscheidet.  


Das ist nicht weiter verwunderlich, das Babel default-mäßig gar keine Veränderungen vornimmt.
=== Zugriff auf Gitlab mittels SSH ===
Sie können sehr feingranular bestimmen, welche Übersetzungen stattfinden sollen.
Erstellen Sie im Wurzelbezeichnis des Projektes die Datei <code>.babelrc</code>
und fügen Sie folgenden Code ein:


<source lang="json">
Öffnen Sie ein Bash-Terminal und erzeugen Sie ein SSH-Key-Paar:
{
  "presets": ["env"]
}
</source>
Wenn Sie jetzt den Befehl <code>grunt</code> noch einmal ausführen, werden Sie feststellen,
dass sich <code>src/js/main.js</code> und <code>web/js/main.js</code> deutlich unterscheiden.
Die Datei <code>web/js/main.js</code> enthält nun astreinen ECMAScript-5-Code. Diesen können Sie
in WebStorm natürlich auch problemlos ausführen. Und in der Konsole werden dieselben Informationen
ausgegeben wie zuvor von <code>src/js/main.js</code>.
 
Babel kann den erzeugten Code auch noch gleich komprimieren, das heißt, überflüssige
Kommentare, Leerzeichen und Zeilenumbrüche entfernen, lange Variablen-, Funktions- und Parameternamen
durch kurze ersetzen, wann immer dies möglich ist etc. Dafür benötigt man die
Node.js-Pakete <code>babel-minify</code> und <code>babel-preset-minify</code>.<ref>babel-minify: https://github.com/babel/minify</ref><ref>babel-preset-minify: https://www.npmjs.com/package/babel-preset-minify</ref>


<source lang="bash">
<source lang="bash">
npm install --save-dev babel-minify babel-preset-minify
ssh-keygen -t ed25519 -C "gitlab.multimedia.hs-augsburg.de"
</source>
</source>


Wenn Sie nun den Inhalt der Datei <code>.babelrc</code> durch Folgenden Code ersetzen,
Fügen Sie den '''öffentlichen''' Schlüssel in Gitlab ein.
<source lang="json">
Öffnen Sie die Url
{
<source lang="bash">
  "presets": ["env", "minify"]
https://gitlab.multimedia.hs-augsburg.de/
}
</source>
</source>
wird <code>main.js</code> nicht nur in ECMSScript 5 übersetzt, sondern auch noch komprimiert.
loggen Sie sich ein und navigieren Sie zu den SSH-Settings
 
<source lang="bash">
Wird dagegen
https://gitlab.multimedia.hs-augsburg.de/-/profile/keys
<source lang="json">
(Icon rechts oben → Preferences → SSH Keys)
{
  "presets": ["minify"]
}
</source>
</source>
geschrieben, wird die Datei nur komprimiert, der ECMAScript-2015-Code bleibt hingegen erhalten.
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>.


===Automatische Dateierzeugung mittels Grunt===
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.)
Einen Nachteil hat die Lösung mit der Übersetzung von Dateien noch.
Jedesmal wenn man eine Änderung an <code>src/js/main.js</code> vornimmt, muss man
den Befehl <code>grunt</code> aufrufen, um <code>web/js/main.js</code> zu erzeugen.
Das ist lästig und fehleranfällig. Besser ist es, bei jeder Änderung der Datei <code>src/js/main.js</code>
die Datei <code>web/js/main.js</code> automatisch zu erstellen. Dies geht mit Hilfe des Node.js-Pakets
<code>grunt-contrib-watch</code><ref>grunt-contrib-watch: https://github.com/gruntjs/grunt-contrib-watch</ref>:


<source lang="bash">
<source lang="bash">
npm install --save-dev grunt-contrib-watch
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>


Fügen Sie nun in die Datei <code>gruntfile.js</code> hinter
== Fortsetzung des Tutoriums ==
dem <code>babel</code>-Block folgenden
Block ein:
 
<source lang="json">
watch:
{
  js:
  { files:  ['src/js/**/*.js'],
    tasks:  ['babel']
  }
},
</source>
 
Anschließend müssen Sie den Watch-Task in derselben Datei noch mittels
 
<source lang="json">
grunt.loadNpmTasks('grunt-contrib-watch');
</source>
aktivieren. Das war es schon. Wenn Sie jetzt den Watch-Task mittels
<code>grunt watch</code> in einer Konsole im Wurzelverzeichnis des Projekts starten,
wird jedesmal, wenn Sie eine Änderung an der Datei <code>src/js/main.js</code>
vornehmen, die Datei <code>web/js/main.js</code> automatisch erstellt.
Versuchen Sie es.


Sie können noch diverse weitere Grunt-Tasks automatisch ausführen lassen,
Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World|Hello-World-Tutorium]] bearbeiten.
wenn Sie sie in die Eatch-Liste eintragen. Solange der  Watch-Task läuft brauchen
Sie also nichts weiter zu tun, als Ihre Sourcen zu bearbeiten und die erzeugten
Dateien ({{iAllg}} im Browser) zu testen. Sie können den Watch-Task jederzeit
beenden um andere Befehle im WebStorm-Terminal auszuführen.
Sie können aber auch ein zweites Terminal öffnen ({{zB}} eine Git-Bash) und diesen
Prozess daurthaft laufen lassen, solange Sie an Ihrem Projekt arbeiten.


<!--
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
-->
==Quellen==
==Quellen==
<references/>
<references/>
<ol>
<ol>
<li value="18"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
<li value="3">{{Quelle|Kowarschick (WebProg)}}</li>
</ol>
</ol>
[[Kategorie: HTML5-Tutorium: JavaScript: Entwicklungsumgebung]]
[[Kategorie: HTML5-Tutorium: JavaScript: Entwicklungsumgebung]]
[[Kategorie: HTML5-Beispiel]]
[[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
[[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
[[Kategorie:Praktikum:MMProg]]
[[Kategorie:Praktikum:MMProg]]
[[Kategorie:Web-Programmierung-HowTo]]

Aktuelle Version vom 19. März 2024, 15:50 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)

Vorlesung WebProg

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 oder node --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

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

  1. ↑ Node.js: https://nodejs.org/en/
  2. ↑ npm: https://docs.npmjs.com/
  1. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_JavaScript:_Entwicklungsumgebung:_Node.js&oldid=52287“