HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js

2017-10-06T10:26:40Z

Anfe96:

{{HTML5-Tutorium:JavaScript:Entwicklungsumgebung:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/test/WK_Test01/ SVN-Repository]

Zur Unterstützung der Entwicklung von Web-Anwendungen kann [[Node.js]]<ref>Node.js: https://nodejs.org/en/</ref> eingesetzt werden:
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
sehr wertvolles und universell einsetzbares Werkzeug.

==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:
* Menü am unteren Festerrand: 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 <PFAD></code> in das Wurzelverzeichnis des
Projektes wechseln, wenn Sie Befehle absetzen wollen, die sich auf ein bestimmtes Projekt beziehen.

Achtung: Unter Windows stehen Ihnen in WebStorm nur die Windows-Kommandozeilen-Befehle zur Verdügung,
unter Linux und Mac können (und müssen) Sie dort Linux-Kommandozeilen-Befehle eingeben.

===Node.js===
Installieren Sie nun Node.js: <code>https://nodejs.org/en/</code>, <code>https://nodejs.org/dist/latest01/</code>, Version 8.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>).
Öffnen Sie das Terminal, um zu testen, ob <code>node</code> funktioniert:

* Geben Sie Folgendes in die Konsole ein: <code>node -v</code>

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.

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.

===Wichtige Node.js-Pakete===

Mit Hilfe von <code>npm</code><ref>npm: https://www.npmjs.com/</ref> (npm = 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, {{dh}} 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 wir <code>/C/mmprog/test01</code> als Beispielsordner. (Beachten Sie, dass in der GIT Bash wie auch im HTML-Umfeld immer Linux-Pfad-Bezeichner verwendet werden, auch unter Windows.)

Öffnen Sie nun ihr bevorzugtes Unix-Terminal
und geben Sie folgenden Befehle ein:

<source lang="bash">
# Erzeugen Sie ein neues (leeres!) Projektverzeichnis.
# Bitte passen Sie diesen Pfad an Ihre Gegebenheiten an.
mkdir -p /C/mmprog/test01 # Achten Sie darauf, dass es diesen Pfad vorher nicht gegeben hat.
cd /C/mmprog/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.
# 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_modules/.bin
# Damit WebStorm den Befehl 'node_modules/.bin/grunt' findet,
# muss noch das Grunt-Command-Line-Interface global
npm install -g grunt-cli # installiert werden.
less package.json # Sehen Sie sich den Inhalt der Konfigurationsdatei an.
</source>

Sie können das Projekt in WebStorm öffenen, um die zugehörigen Dateien mit dem
WebStorm-Editor bearbeiten zu können:

* <code>Open</code> bzw. <code>File</code>/<code>WebStorm</code> → <code>Open</code>
* 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.

Sie können Ihre JavaScript-Projekt-Dateien auch mit jedem beliebigen anderen Code-Editor (Atom, Sublime, Nodepad++, Emacs etc. pp.) bearbeiten.
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.
(Es gibt allerdings auch für Node.js einen einfachen HTTP-Server, der bei der Entwicklung von HTML-Anwendungen zu
Testzwecken eingesetzt werden kann: https://github.com/indexzero/http-server)
Das Terminalfenster von WebStorm ist auch sehr praktisch. Insbesondere Node.js-Befehle können
dort direkt eingegeben werden. Unter Windows verwende ich allerdings für komplexere Aufgaben die (Git-)Bash.

Sie sollten sich angewöhnen, in der Datei <code>package.json</code> 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:

<source lang="json">
"kewords": ["test"],
"author": "Wolfgang Kowarschick",
"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>) sowie vieles mehr machen können (Dokumentation: https://docs.npmjs.com/).

Wichtig ist auch der Befehl
<source lang="bash">
npm update
</source>
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

<source lang="bash">
npm -g list # globale Node.js-Pakete
npm list # projektlokale Node.js-Pakete
</source>

erfragen.

Sie können Pakete auch lokal löschen und dann mittels <code>npm install</code> wieder herstellen.
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">
ls -al node_modules # Liste alle Dateien und Verzeichnisse auf,
# die im Ordner node_modules enthalten sind.
rm -rf node_modules # Lösche diesen Ordner samt Inhalt.
npm list
ls -al node_modules
npm install
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!

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
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 ([[SVN]], [[Git]] etc.)
sehr störend. Dennoch sollte man nur ein Paket wie <code>grunt-cli</code>, dessen einzige Aufgabe es ist, die jeweils projektlokale Version von Grunt auszuführen, 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äd das Projekt auf seinen Arbeitsrechner, öffnet ein Terminal, wechselt mittels <code>cd</code> ins Wurzelverzeichnis des Projektes
(beim WebStorm-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projektes) und führt
<code>npm install</code> aus.

===Grunt===

Als nächstes initialisieren Sie Grunt (https://gruntjs.com/) <ref>Grunt: https://gruntjs.com/</ref>.
Grunt ist ein “JavaScript Task Runner”, also ein Programm, das Aufgaben (''tasks'') wie {{zB}} das Übersetzen von [[ECMAScript|ECMAScript 2015/16/17]] in
ECMAScript 5.1 oder das Komprimieren von Programmdateien automatisch durchführt.

Die Initialisierung erfolgt durch die Bereitstellung zweier Dateien <code>package.json</code>
und <code>gruntfile.json</code> im Root-Verzeichnis der Web-Anwendung. Die Datei <code>package.json</code>
haben Sie schon mittels <code>npm init</code> erstellt.

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>.
Diese fehlt allerdings noch. Also legen Sie sie im Wurzelverzeichnis des Projektes mit einem Texteditor Ihrer Wahl an
(WebStorm: <code>File</code>/<code>WebStorm</code> → <code>New</code> → <code>File</code>):

'''<code>gruntfile.js</code>'''
<source lang="javascript">
module.exports = function(grunt)
{
// Project configuration.
grunt.initConfig
({
pkg: grunt.file.readJSON('package.json'),
});
};
</source>

Diese Datei ist noch ziemlich leer, aber das wird sich ändern.

Vorausschauend sollten Sie eine überflüssige WebStorm-Fehlerprüfung deaktivieren, da anderenfalls künftige
Änderungen an der Datei <code>gruntfile.js</code> jedes Mal eine Fehlermeldung zur Folge haben, wenn die
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>
* <code>JavaScript</code> aufklappen → <code>General</code> aufklappen → <code>Unsued global symbols</code> deselektieren
* <code>OK</code>

===Babel===

Das Compiler „Babel“<ref>Babel: https://babeljs.io/</ref> wurde geschaffen, da die meisten Browser zwar ECMAScript 5.1
unterstützten<ref>ECMAScript 5 compatibility table: https://kangax.github.io/compat-table/es5/</ref>,
aber nicht die Nachfolgesprachen ECMAScript 2015, ECMAScript 2016 und ECMAScript 2017.
Dies hat sich in jüngster Zeit deutlich gebessert. Die meisten Browser unterstützen diese Sprachen in der Zwischenzeit
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>.

Allerdings verstehen die meisten Browser derzeit die sehr wichtigen Export- und Import-Befehle noch nicht.<ref>Export-Statement: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/export</ref><ref>Import-Statement: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/import</ref>

In solchen Fällen kommt Babel zum Einsatz. Babel übersetzt moderneren ECMAScript-Code in älteren ECMAScript-Code.
(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:

<source lang="bash">
npm install --save-dev grunt babel-cli babel-preset-env grunt-babel
</source>

Nun muss Babel noch konfiguriert werden. Theoretisch könnten Sie den Übersetzer einfach von der Kommandozeile aus
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="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"
}]
}
},
});

// Register task(s)
grunt.loadNpmTasks("grunt-babel");

// Default task(s).
grunt.registerTask("default", ["babel"]);
};
</source>

Die Babel-Konfiguration bewirkt, dass alle Dateien mit der Endung <code>.js</code>, die sich
vom Projekt-Wurzelverzeichnis <code><ROOT></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><ROOT>/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
der Task registriert. Er kann ab sofort im Wurzelverzeichnis des Projektes mit dem
Befehl <code>grunt babel</code> aktiviert werden. Der Befehl
<code>grunt.loadNpmTasks("grunt-babel");</code> sorgt dafür, dass
der Task <code>babel</code> zur Liste der Default-Aktionen von Grunt hinzugefügt wird.
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>

Diese Datei können Sie in WebStorm direkt ausführen:
* Im Dateibaum Rechtsklick auf <code>src/js/main.js</code> → <code>Run 'main.js'</code>
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>

Nun können Sie die Datei <code>src/js/main.js</code> mit Hilfe von Babel übersetzen.
Rufen Sie einfach einmal im Terminal einen der beiden Befehle <code>grunt babel</code> oder einfach nur <code>grunt</code> im
Wurzelverzeichnis des Projektes auf. Sie werden anschließend feststellen, dass ein Ordner
<code>web/js</code> angelegt und in diesen eine Datei namens <code>main.js</code>
eingefügt wurde. Wenn Sie sich den Inhalt dieser Datei ansehen, stellen Sie fest,
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.
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">
{
"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">
npm install --save-dev babel-minify babel-preset-minify
</source>

Wenn Sie nun den Inhalt der Datei <code>.babelrc</code> durch Folgenden Code ersetzen,
<source lang="json">
{
"presets": ["env", "minify"]
}
</source>
wird <code>main.js</code>mittels <code>grunt babel</code> nicht nur in ECMAScript 5 übersetzt, sondern auch noch komprimiert.

Wird dagegen
<source lang="json">
{
"presets": ["minify"]
}
</source>
geschrieben, wird die Datei nur komprimiert, der ECMAScript-2015-Code bleibt hingegen erhalten.

===Automatische Dateierzeugung mittels Grunt===

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

Fügen Sie nun in die Datei <code>gruntfile.js</code> hinter
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>
registrieren. 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 und diese speichern, wird 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,
wenn Sie sie in die Watch-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.


==Quellen==
<references/>
<ol>
<li value="18"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
[[Kategorie: HTML5-Tutorium: JavaScript: Entwicklungsumgebung]]
[[Kategorie: HTML5-Beispiel]]
[[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
[[Kategorie:Praktikum:MMProg]]

GlossarWiki - Benutzerbeiträge [de-formal]

HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js