HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 332: | Zeile 332: | ||
Die Datei <code>web/js/main.js</code> enthält nun astreinen ECMAScript-5-Code. Diesen können Sie | 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 | 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> | ausgegeben wie zuvor von <code>src/js/main.js</code>. | ||
==Quellen== | ==Quellen== | ||
Zeile 342: | Zeile 339: | ||
<li value="1"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li> | <li value="1"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li> | ||
</ol> | </ol> | ||
[[Kategorie: HTML5-Tutorium: JavaScript: Entwicklungsumgebung]] | |||
[[Kategorie: HTML5-Beispiel]] | |||
[[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | |||
[[Kategorie:Praktikum:MMProg]] |
Version vom 4. Oktober 2017, 17:37 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
Zur Unterstützung der Entwicklung von Web-Anwendungen kann Node.js[1] eingesetzt werden: automatische Übersetzung von 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 i. Allg. 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“ (https://git-for-windows.github.io/
; 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 which
, vi
( :-) ) etc. zur
Verfügung stellt.
Unter 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
Terminal
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 cd <PFAD>
in das Wurzelverzeichnis des
Projektes wechseln, wenn Sie Befehle ansetzen wollen, die sich auf ein bestimmtes Projekt beziehen.
Node.js
Installieren Sie nun Node.js: https://nodejs.org/en/
, https://nodejs.org/dist/latest/
, Version 8.x.
Achten Sie darauf, dass die Option Add to PATH
ausgewählt wurde.
Starten Sie ein Unix-Terminal (z. B. Mac-OS-X-Terminal, bash
oder auch WebStorm: Klick auf Icon in der linken unteren Ecke → Klick auf Terminal
).
Öffnen Sie das Terminal, um zu testen, ob node
funktioniert:
- Geben Sie Folgendes in die Konsole ein:
node -v
Wenn Node.js korrekt installiert und der Pfad mit den node
-Binaries in die Systemvariable PATH
eingetragen 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.
Wichtige Node.js-Pakete
Mit Hilfe von npm
(npm = node package manager, https://www.npmjs.com/) 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
notwendig. Dazu muss man zunächst einen leeren Ordner anlegen, indem das neue Projekt liegt. Es kann ein beliebiger Ordner gewählt werden.
Im Folgenden wählen wir /C/mmprog/test
als Beispielsordner. (Bachaten Sie, dass in der GIT Bash unter Windows Linux-Pfad-Bezeichner
anstelle von Window-Pfad-Bezeichnern verwendet werden.)
Öffnen Sie nun ihr bevorzugtes Unix-Terminal und geben Sie folgenden Befehle ein:
# Erzeugen Sie ein neues (leeres!) Projektverzeichnis.
# Bitte passen Sie diesen Pfad an Ihre Gegebenheiten an.
mkdir -p /C/mmprog/test # Achten Sie darauf, dass es diesen Pfad vorher nicht gegeben hat.
cd /C/mmprog/test # 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 babel-cli babel-preset-env grunt-babel
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.
Sie können das Projekt in WebStorm öffenen, um die zugehörigen Dateien mit dem WebStorm-Editor bearbeiten zu können:
File
/WebStorm
→Open
- Zum zuvor angelegten Testordner navigieren und diesen mit
OK
ö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 einegesetzt werden kann: https://github.com/indexzero/http-server) 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 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:
"kewords": ["test"],
"author": "Wolfgang Kowarschick",
"license": "CC-BY-NC-SA-4.0",
Ändern Sie dagegen nicht 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
) und 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
erfragen.
Sie können Pakete auch lokal löschen und dann mittels npm install
wieder herstellen.
Versuchen Sie es (Achtung: Die Unix-Befehle ls
und rm
funktionieren
unter Windows nur in der Bash. In einem Windows-Terminal heißen die entsprechenden Befehle dir
und del
):
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
Sie können auch überprüfen, ob Sie in Ihrem Projekt irgendwelche veralteten Pakete benutzen (https://docs.npmjs.com/cli/outdated):
npm outdated # projektspezifische Node.js-Pakete
npm -g outdated # globale Node.js-Pakete
Kein Ergebnis ist hier ein gutes Ergebnis!
Node.js-Pakete können, wie wir gesehen haben, mittels der npm-Option -g
auch global gespeichert werden.
Allerdings ist es meist besser, sie mittels der Option --save-dev
projektlokal zu speicher.
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.Dies ist vor allem beim Speichern eines derartigen Projektes in eine Repository (SVN, Git etc.)
sehr störend. Ein Paket wie grunt-cli
, dessen einzige Aufgabe es ist, die jeweils projektlokale
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
meist mehrere Hundert oder gar mehrere Tausend Dateien, auch wenn das eigentliche Projekt nur aus ein paar wenigen Dateien besteht.
Um dieses Problem zu vermeiden, muss man die Speicherung von Node.js-Bibliotheken im Repository ausschließen und
diese Dateien bei Bedarf auftomatisch 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 cd
ins Wurzelverzeichnis des Projektes
(beim WebStorm-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projektes) und führt
npm install
aus.
Grunt
Als nächstes initialisieren Sie Grunt (https://gruntjs.com/) [6]. Grunt ist ein “JavaScript Task Runner”, also ein Programm, das Aufgaben (tasks) wie z. B. das Übersetzen von ECMAScript 2015/16/17 in ECMAScript 5.1 oder das Komprimieren von Programmdateien automatisch durchführt.
Die Initialisierung erfolgt durch die Bereitstellung zweier Dateien package.json
und gruntfile.json
im Root-Verzeichnis der Web-Anwendung. Die Datei package.json
haben Sie schon mittels npm init
erstellt.
In der Datei package.json
gibt es das Attribut main
.
Es enthält den Namen der Konfigurationsdatei von Grunt: gruntfile.js
.
Diese fehlt allerdings noch. Also legen Sie sie im Wurzelverzeichnis des Projektes mit einem Texteditor Ihrer Wahl an
(WebStorm: File
/WebStorm
→ New
→ File
):
gruntfile.js
module.exports = function(grunt)
{
// Project configuration.
grunt.initConfig
({
pkg: grunt.file.readJSON('package.json'),
});
};
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 gruntfile.js
jedes Mal eine Fehlermeldung zur Folge haben, wenn die
Datei in ein SVN-Repository geschrieben werden soll:
File
/WebStorm
→Settings
/Preferences
→Editor
→Inspections
JavaScript
aufklappen →General
aufklappen →Unsued global symbols
deselektierenOK
Babel
Das Compiler „Babel“[7] wurde geschaffen, da die meisten Browser zwar ECMAScript 5.1 unterstützten[8], 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.[9][10].
Allerdings wird der sehr wichtige Import-Befehl derzeit von den meisten Brwosern noch nicht unterstützt.Referenzfehler: Für ein <ref>
-Tag fehlt ein schließendes </ref>
-Tag.
Mit Hilfe des Befehle grunt.loadNpmTasks("grunt-babel");
wird
der Task aktiviert. Er kann ab sofort im Wurzelverzeichnis des Projektes mit dem
Befehl grunt babel
aktiviert werden. Der Befehl
grunt.loadNpmTasks("grunt-babel");
sorgt dafür, dass
der Task babel
zur Liste der Default-Aktionen von Grunt hinzugefügt wird.
Das heißt, wenn man grunt
ohne Argument aufruft, wird der
Babel-Task ebenfalls ausgeführt.[11]
Um Babel zu testen erzeugen Sie die Datei src/js/main.js
:
File
/WebStorm
→New
→Directory
/File
Fügen Sie folgenden EcmaScript-6-Code ein:
let evens = [0, 2, 4, 6, 8],
odds = evens.map(v => v + 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}!`);
Diese Datei können Sie in WebStorm direkt ausführen:
- Im Dateibaum Rechtsklick auf
src/js/main.js
→Run 'main.js'
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/
Nun können Sie die Datei src/js/main.js
mit Hilfe von Babel übersetzen.
Rufen Sie einfach einmal im Terminal einen der beiden Befehle grunt babel
oder einfach nur grunt
im
Wurzelverzeichnis des Projektes auf. Sie werden anschließend feststellen, dass ein Ordner
web/js
angelegt und in diesen eine Datei namens main.js
eingefügt wurde. Wenn Sie sich den Inhalt dieser Datei ansehen, stellen Sie fest,
dass sich sich nicht von der Datei src/js/main.js
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 .babelrc
und fügen Sie folgenden Code ein:
{
"presets": ["env"]
}
Wenn Sie jetzt den Befehl grunt
noch einmal ausführen, werden Sie feststellen,
dass sich src/js/main.js
und web/js/main.js
deutlich unterscheiden.
Die Datei web/js/main.js
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 src/js/main.js
.
Quellen
- ↑ Node.js: https://nodejs.org/en/
- ↑ npm: https://www.npmjs.com/
- ↑ babel-cli: https://www.npmjs.com/package/babel-cli
- ↑ babel-preset-env: https://github.com/babel/babel-preset-env
- ↑ grunt-babel: https://github.com/babel/grunt-babel
- ↑ Grunt: https://gruntjs.com/
- ↑ Babel: https://babeljs.io/
- ↑ ECMAScript 5 compatibility table: https://kangax.github.io/compat-table/es5/
- ↑ ECMAScript 6 compatibility table: https://kangax.github.io/compat-table/es6/
- ↑ ECMAScript 2016+ compatibility table: http://kangax.github.io/compat-table/es2016plus/
- ↑ Grunt API: https://gruntjs.com/api/grunt
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)