HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(43 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
{{HTML5-Tutorium:JavaScript:Entwicklungsumgebung:Menü}} | {{HTML5-Tutorium:JavaScript:Entwicklungsumgebung:Menü}} | ||
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es6/test/WK_Test01_babel/ SVN-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: | ||
Zeile 11: | Zeile 13: | ||
===Unix-Shell=== | ===Unix-Shell=== | ||
Web-Entwickler verwenden | Unter [[HTML5-Tutorium: JavaScript: Entwicklungsumgebung: WebStorm|WebStorm]] steht Ihnen ein Terminal zur Verfügung, | ||
in dem Sie Kommandozeilen-Befehle absetzen können: | |||
* Menü am unteren Fensterrand: Klick auf <code>Terminal</code> | |||
Wenn Sie das WebStorm-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. | |||
'''Windows only''':<br/> | |||
Unter Linux und Mac OS X benutzt WebStorm standardmäßig eine Unix-Shell (Unix: bash, Mac OS X: terminal). | |||
Web-Entwickler verwenden {{iAllg}} auch unter Windows lieber ein Terminal, das eine [[Unix]]-[[Shell]] simuliert, als den Standard-Windows-Shell <code>cmd</code>. | |||
Installieren Sie „Git for Windows“: <code>https://git-for-windows.github.io/</code> | |||
Wählen Sie bei jeder Frage die Defaultwerte, außer Sie haben einen triftigen Grund, davon abzuweichen. | |||
Sie können und sollten allerdings einen anderen Text-Editor als den vi auswählen, falls Sie kein Linux-Guru sind. | |||
* <code>File</code> → <code>Settings</code> → <code>Version Control</code> → <code>Git</code> | |||
* Überprüfen Sie, ob in <code>Path to Git executable</code> der Pfad zum Git-Executable automatisch erkannt wurde. Falls nicht, tragen Sie den Pfad händisch ein. | |||
In diesem Paket ist nicht nur [[Git]], sondern auch die „Git bash“ enthalten. | |||
Das ist eine Terminal-Anwendung, die eine Linux-Bash emuliert und zahlreiche nützliche Befehle wie <code>which</code>, <code>[[vi]]</code> ( :-) ) etc. zur | 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. | Verfügung stellt. | ||
Ersetzen Sie in WebStorm die Windows-Shell durch die bash: | |||
* <code>File</code> → <code>Settings</code> → <code>Tools</code> → <code>Terminal</code> | |||
* Fügen Sie in <code>Shell path</code> den Pfad zur zuvor installierten Datei <code>bash.exe</code> ein (normalerweise unter<code>C:\Programme\Git\bin\bash.exe</code> oder <code>"C:\Program Files\Git\bin\bash.exe"</code> – mit Anführungszeichen! – oder <code>"C:\Programme (x86)\Git\bin\bash.exe"</code> – mit Anführungszeichen!) | |||
* <code>OK</code> | |||
Wenn Sie jetzt das Terminal öffnen, sollten Sie mit einem farbigen Prompt begrüßt werden. | |||
Unter | '''Mac OS X and Unix (Linux, FreeBSD ...) only''':<br/> | ||
Da Sie im Praktikum mit Git arbeiten werden, müssen auch Sie Git installieren. Unter <code>https://git-scm.com/downloads</code> können Sie das Paket herunterladen. | |||
Unter Mac OS X kann es aber sein, dass Sie das Paket nicht installieren können, weil es nicht aus einer vertrauenswürdigen Quelle stammt. Evtl. funktioniert dann eine andere Methode: Geben Sie im Terminal den Befehl <code>git</code> ein. Sofern Git noch nicht installiert wurde, sollten Sie gefragt werden, ob das nun gemacht werden soll. | |||
Diese Frage sollten Sie natürlich mit “Yes” beantworten. | |||
Als nächstes sollten Sie überprüfen, ob WebStorm Git kennt: | |||
* <code>WebStorm</code>/<code>File</code> → <code>Preferences</code>/<code>Settings</code> → <code>Version Control</code> → <code>Git</code> | |||
* Überprüfen Sie, ob in <code>Path to Git executable</code> der Pfad zum Git-Executable automatisch erkannt wurde. Falls nicht, tragen Sie den Pfad händisch ein. | |||
===Node.js=== | ===Node.js=== | ||
Installieren Sie nun Node.js: <code>https://nodejs.org/en | Installieren Sie nun Node.js: <code>https://nodejs.org/en/</code>, Version 10.x. | ||
Öffnen Sie das WebStorm-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> | ||
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 65: | ||
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. | ||
=== | ===Ein Node.js-Test-Projekt ohne Funktionalität=== | ||
Mit Hilfe von <code>npm</code> | 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 | |||
Die globale Installation hätte zur Folge, dass jedes Projekt auf diese Pakete zugreifen | 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, {{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 wird <code>/C/mmprog/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}} | |||
Im Folgenden wählen | <code>~/mmprog/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 | Öffnen Sie nun das Terminal | ||
und geben Sie folgenden Befehle ein: | und geben Sie folgenden Befehle ein: | ||
<source lang="bash"> | <source lang="bash"> | ||
mkdir -p /C/mmprog/test01 # bzw: mkdir -p ~/Documents/mmprog/test01 | |||
# Erzeugen Sie ein neues (leeres!) Projektverzeichnis. | |||
# Bitte passen Sie diesen Pfad an Ihre Gegebenheiten an. | |||
cd / | |||
npm init -y | cd /C/mmprog/test01 # bzw: cd ~/Documents/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. | |||
npm install --save-dev | |||
ls -al | # Installieren Sie nun testhalber zwei Node.js-Pakete projektlokal. | ||
ls -al | npm install --save-dev json-loader style-loader | ||
ls -al # Sehen Sie sich an, welche Dateien und Ordner erzeugt wurden. | |||
ls -al node_modules | |||
npm | |||
less package.json | less package.json # Sehen Sie sich den Inhalt der Konfigurationsdatei an. | ||
</source | # Verlassen von "less": Taste "q" drücken. | ||
# Löschen Sie nun testhalber eines der beiden Pakete. | |||
npm uninstall --save-dev style-loader | |||
ls -al node_modules | |||
less package.json | |||
</source> | |||
Sie können das Projekt in WebStorm | Sie können das Projekt in WebStorm öffnen, um die zugehörigen Dateien mit dem | ||
WebStorm-Editor bearbeiten | WebStorm-Editor zu betrachten und gegebenenfalls auch bearbeiten: | ||
* <code>File</code> | * <code>File</code> bzw. <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. | * 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 | 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. WebStorm ist | Das liegt ganz bei Ihnen. Im Praktikum wird WebStorm verwendet. Diese IDE ist ganz 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 | (Es gibt allerdings auch für Node.js einen einfachen HTTP-Server, der bei der Entwicklung von HTML-Anwendungen zu | ||
Testzwecken | Testzwecken eingesetzt werden kann: https://github.com/indexzero/http-server) | ||
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 | ||
erstellt haben, ein paar projektspezifische Informationen zu ergänzen, wobei Sie die Werte | erstellt haben, ein paar projektspezifische Informationen zu ergänzen, wobei Sie die Werte | ||
natürlich an Ihre Gegebenheiten anpassen müssen: | natürlich an Ihre Gegebenheiten anpassen müssen: | ||
< | <pre> | ||
"name": "test01", | |||
... | |||
"description": "Dies ist ein erster Test ohne weitere Funktionalität." | |||
</ | ... | ||
"keywords": ["test"], | |||
"author": "Wolfgang Kowarschick", | |||
"license": "CC-BY-NC-SA-4.0", | |||
</pre> | |||
Sie können auch noch, um lästigen NPM-Warnings vorzubeugen, | |||
das Repository einfügen (vor <code>devDependencies</code>), in dem sich das Projekt später befinden wird. | |||
{{pre| | |||
"repository": { | |||
"type": "git", | |||
"url": "{{Git-Server}}/ACCOUNT/test01" | |||
}, | |||
}} | |||
Hier müssen Sie natürlich <code>ACCOUNT</code> durch Ihren RZ-Account ersetzen. | |||
Ändern Sie dagegen | Ändern Sie dagegen nie die Paketinformationen, die im Attribut <code>devDependencies</code> gespeichert sind. | ||
Diese werden mittels <code>npm</code> verwaltet. | Diese werden mittels <code>npm</code> verwaltet. | ||
Der Node-Paket-Manager <code>npm</code> ist ein sehr nützliches Hilfsprogramm, | 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 | 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>) | wieder löschen (<code>npm uninstall</code>) sowie vieles mehr machen können (Dokumentation: https://docs.npmjs.com/). | ||
Wichtig ist auch der Befehl | Wichtig ist auch der Befehl | ||
<source lang="bash"> | <source lang="bash"> | ||
npm update | npm --depth=9999 update | ||
</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 111: | Zeile 160: | ||
<source lang="bash"> | <source lang="bash"> | ||
npm list | npm list # projektlokale Node.js-Pakete | ||
</source> | </source> | ||
erfragen. | erfragen. | ||
Mittels | |||
<source lang="bash"> | |||
npm --only=dev i npm | |||
<source lang="bash"> | |||
aktualisieren Sie die projektlokale Version von npm selbst. | |||
Sie können Pakete auch lokal löschen und dann mittels <code>npm install</code> wieder herstellen. | Sie können Pakete auch lokal löschen und dann mittels <code>npm install</code> wieder herstellen. | ||
Versuchen Sie es | Versuchen Sie es: | ||
<source lang="bash"> | <source lang="bash"> | ||
npm install --save-dev style-loader | |||
ls -al node_modules # Liste alle Dateien und Verzeichnisse auf, | ls -al node_modules # Liste alle Dateien und Verzeichnisse auf, | ||
# die im Ordner node_modules enthalten sind. | # die im Ordner node_modules enthalten sind. | ||
Zeile 133: | Zeile 187: | ||
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): | ||
<source lang="bash"> | <source lang="bash"> | ||
npm outdated # | npm outdated # projektlokale Node.js-Pakete | ||
npm | </source> | ||
Kein Ergebnis ist hier ein gutes Ergebnis! Ansonsten sollten die die veralteten Pakete aktualisieren: | |||
<source lang="bash"> | |||
npm update # projektlokale Node.js-Pakete | |||
</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: | |||
<source lang="bash"> | |||
npm -g install npm # Mac OS X: sudo npm -g install npm | |||
</source> | |||
Das Tool <code>npm</code> kann sich also selbst aktualisieren. :-) | |||
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 | meist mehrere Tausend Dateien, auch wenn das eigentliche Projekt nur aus ein paar wenigen Dateien besteht. Dies ist vor allem beim Speichern eines derartigen Projektes in eine Repository ([[Git]], [[SVN]] etc.) | ||
Um | 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. | ||
diese Dateien bei Bedarf | |||
Man | 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 <code>cd</code> ins Wurzelverzeichnis des Projektes | |||
(beim WebStorm-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projektes) und führt | (beim WebStorm-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projektes) und führt | ||
<code>npm install</code> aus. | <code>npm install</code> aus. | ||
<!-- | |||
===Grunt=== | ===Grunt=== | ||
Zeile 189: | Zeile 249: | ||
* <code>File</code>/<code>WebStorm</code> → <code>Settings</code>/<code>Preferences</code> → <code>Editor</code> → <code>Inspections</code> | * <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> | * <code>JavaScript</code> aufklappen → <code>General</code> aufklappen → <code>Unused global symbols</code> deselektieren | ||
* <code>OK</code> | * <code>OK</code> | ||
--><!-- | |||
- | |||
===Babel=== | ===Babel=== | ||
Zeile 222: | Zeile 260: | ||
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>. | 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 | 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. | In solchen Fällen kommt Babel zum Einsatz. Babel übersetzt moderneren ECMAScript-Code in älteren ECMAScript-Code. | ||
Zeile 237: | Zeile 275: | ||
Nun muss Babel noch konfiguriert werden. Theoretisch könnten Sie den Übersetzer einfach von der Kommandozeile aus | 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 | 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. | einen Grunt-Task zu definieren, der diese Aufgabe übernimmt. | ||
Zeile 270: | Zeile 308: | ||
}); | }); | ||
// | // Register task(s) | ||
grunt.loadNpmTasks("grunt-babel"); | grunt.loadNpmTasks("grunt-babel"); | ||
Zeile 283: | Zeile 321: | ||
Mit Hilfe des Befehle <code>grunt.loadNpmTasks("grunt-babel");</code> wird | Mit Hilfe des Befehle <code>grunt.loadNpmTasks("grunt-babel");</code> wird | ||
der Task | der Task registriert. Er kann ab sofort im Wurzelverzeichnis des Projektes mit dem | ||
Befehl <code>grunt babel</code> aktiviert werden. Der Befehl | Befehl <code>grunt babel</code> aktiviert werden. Der Befehl | ||
<code>grunt.loadNpmTasks("grunt-babel");</code> sorgt dafür, dass | <code>grunt.loadNpmTasks("grunt-babel");</code> sorgt dafür, dass | ||
Zeile 309: | Zeile 347: | ||
Diese Datei können Sie in WebStorm direkt ausführen: | 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> | * Im Dateibaum Rechtsklick auf <code>src/js/main.js</code> → <code>Run 'main.js'</code> | ||
Das Ergebnis sehen Sie im | Das Ergebnis sehen Sie im Terminal 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. | Nun können Sie die Datei <code>src/js/main.js</code> mit Hilfe von Babel übersetzen. | ||
Zeile 318: | Zeile 356: | ||
dass sich sich nicht von der Datei <code>src/js/main.js</code> unterscheidet. | dass sich sich nicht von der Datei <code>src/js/main.js</code> unterscheidet. | ||
Das ist nicht weiter verwunderlich, das Babel | Das ist nicht weiter verwunderlich, das Babel defaultmäßig gar keine Veränderungen vornimmt. | ||
Sie können sehr feingranular bestimmen, welche Übersetzungen stattfinden sollen. | Sie können sehr feingranular bestimmen, welche Übersetzungen stattfinden sollen. | ||
Erstellen Sie im | Erstellen Sie im Wurzelverzeichnis des Projektes die Datei <code>.babelrc</code> | ||
und fügen Sie folgenden Code ein: | und fügen Sie folgenden Code ein: | ||
Zeile 337: | Zeile 375: | ||
Babel kann den erzeugten Code auch noch gleich komprimieren, das heißt, überflüssige | 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 | 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 | 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> | 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> | ||
Zeile 350: | Zeile 388: | ||
} | } | ||
</source> | </source> | ||
wird <code>main.js</code> nicht nur in | wird <code>main.js</code>mittels <code>grunt babel</code> nicht nur in ECMAScript 5 übersetzt, sondern auch noch komprimiert. | ||
Wird dagegen | Wird dagegen | ||
Zeile 359: | Zeile 397: | ||
</source> | </source> | ||
geschrieben, wird die Datei nur komprimiert, der ECMAScript-2015-Code bleibt hingegen erhalten. | geschrieben, wird die Datei nur komprimiert, der ECMAScript-2015-Code bleibt hingegen erhalten. | ||
--><!-- | |||
===Automatische Dateierzeugung mittels Grunt=== | ===Automatische Dateierzeugung mittels Grunt=== | ||
Einen Nachteil hat die Lösung mit der Übersetzung von Dateien noch. | Einen Nachteil hat die Lösung mit der Übersetzung von Dateien noch. | ||
Jedes Mal 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. | 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> | Das ist lästig und fehleranfällig. Besser ist es, bei jeder Änderung der Datei <code>src/js/main.js</code> | ||
Zeile 392: | Zeile 430: | ||
grunt.loadNpmTasks('grunt-contrib-watch'); | grunt.loadNpmTasks('grunt-contrib-watch'); | ||
</source> | </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, | <code>grunt watch</code> in einer Konsole im Wurzelverzeichnis des Projekts starten, | ||
wird | wird jedes Mal, wenn Sie eine Änderung an der Datei <code>src/js/main.js</code> | ||
vornehmen, die Datei <code>web/js/main.js</code> automatisch erstellt. | vornehmen und diese speichern, wird die Datei <code>web/js/main.js</code> automatisch erstellt. | ||
Versuchen Sie es. | Versuchen Sie es. | ||
Sie können noch diverse weitere Grunt-Tasks automatisch ausführen lassen, | Sie können noch diverse weitere Grunt-Tasks automatisch ausführen lassen, | ||
wenn Sie sie in die | 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 | 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 | Dateien ({{iAllg}} im Browser) zu testen. Sie können den Watch-Task jederzeit | ||
beenden um andere Befehle im WebStorm-Terminal auszuführen. | beenden um andere Befehle im WebStorm-Terminal auszuführen. | ||
Sie können aber auch ein zweites Terminal öffnen ({{zB}} eine Git-Bash) und diesen | Sie können aber auch ein zweites Terminal öffnen ({{zB}} eine Git-Bash) und diesen | ||
Prozess | Prozess dauerhaft laufen lassen, solange Sie an Ihrem Projekt arbeiten. | ||
--><!-- | |||
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs | |||
--> | |||
==Fortsetzung des Tutoriums== | |||
Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World|Hello-World-Tutorium]] bearbeiten. | |||
==Quellen== | ==Quellen== | ||
<references/> | <references/> | ||
<ol> | <ol> | ||
<li value=" | <li value="3"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li> | ||
</ol> | </ol> | ||
[[Kategorie: HTML5-Tutorium: JavaScript: Entwicklungsumgebung]] | [[Kategorie: HTML5-Tutorium: JavaScript: Entwicklungsumgebung]] | ||
[[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | [[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | ||
[[Kategorie:Praktikum:MMProg]] | [[Kategorie:Praktikum:MMProg]] | ||
[[Kategorie:Web-Programmierung-HowTo]] |
Version vom 15. Dezember 2018, 14:21 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 2 (wichtige Fakten fehlen) |
Quellenangaben: 2 (wichtige Quellen fehlen) |
Quellenarten: 3 (gut) |
Konformität: 5 (ausgezeichnet) |
Inhalt | Visual Studio Code | Node.js
Musterlösung: SVN-Repository
Zur Unterstützung der Entwicklung von Web-Anwendungen kann Node.js[1] eingesetzt werden: 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
Unter WebStorm steht Ihnen ein Terminal zur Verfügung, in dem Sie Kommandozeilen-Befehle absetzen können:
- Menü am unteren Fensterrand: Klick auf
Terminal
Wenn Sie das WebStorm-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 absetzen wollen, die sich auf ein bestimmtes Projekt beziehen.
Windows only:
Unter Linux und Mac OS X benutzt WebStorm standardmäßig eine Unix-Shell (Unix: bash, Mac OS X: terminal).
Web-Entwickler verwenden i. Allg. auch unter Windows lieber ein Terminal, das eine Unix-Shell simuliert, als den Standard-Windows-Shell cmd
.
Installieren Sie „Git for Windows“: https://git-for-windows.github.io/
Wählen Sie bei jeder Frage die Defaultwerte, außer Sie haben einen triftigen Grund, davon abzuweichen.
Sie können und sollten allerdings einen anderen Text-Editor als den vi auswählen, falls Sie kein Linux-Guru sind.
File
→Settings
→Version Control
→Git
- Überprüfen Sie, ob in
Path to Git executable
der Pfad zum Git-Executable automatisch erkannt wurde. Falls nicht, tragen Sie den Pfad händisch ein.
In diesem Paket ist nicht nur Git, sondern auch die „Git bash“ enthalten.
Das ist eine Terminal-Anwendung, die eine Linux-Bash emuliert und zahlreiche nützliche Befehle wie which
, vi
( :-) ) etc. zur
Verfügung stellt.
Ersetzen Sie in WebStorm die Windows-Shell durch die bash:
File
→Settings
→Tools
→Terminal
- Fügen Sie in
Shell path
den Pfad zur zuvor installierten Dateibash.exe
ein (normalerweise unterC:\Programme\Git\bin\bash.exe
oder"C:\Program Files\Git\bin\bash.exe"
– mit Anführungszeichen! – oder"C:\Programme (x86)\Git\bin\bash.exe"
– mit Anführungszeichen!) OK
Wenn Sie jetzt das Terminal öffnen, sollten Sie mit einem farbigen Prompt begrüßt werden.
Mac OS X and Unix (Linux, FreeBSD ...) only:
Da Sie im Praktikum mit Git arbeiten werden, müssen auch Sie Git installieren. Unter https://git-scm.com/downloads
können Sie das Paket herunterladen.
Unter Mac OS X kann es aber sein, dass Sie das Paket nicht installieren können, weil es nicht aus einer vertrauenswürdigen Quelle stammt. Evtl. funktioniert dann eine andere Methode: Geben Sie im Terminal den Befehl git
ein. Sofern Git noch nicht installiert wurde, sollten Sie gefragt werden, ob das nun gemacht werden soll.
Diese Frage sollten Sie natürlich mit “Yes” beantworten.
Als nächstes sollten Sie überprüfen, ob WebStorm Git kennt:
WebStorm
/File
→Preferences
/Settings
→Version Control
→Git
- Überprüfen Sie, ob in
Path to Git executable
der Pfad zum Git-Executable automatisch erkannt wurde. Falls nicht, tragen Sie den Pfad händisch ein.
Node.js
Installieren Sie nun Node.js: https://nodejs.org/en/
, Version 10.x.
Öffnen Sie das WebStorm-Terminal, um zu testen, ob node
funktioniert:
- Geben Sie Folgendes in die Konsole ein:
node -v
Wenn Node.js korrekt installiert wurde,
sollte die Versionsnummer von node
ausgegeben werden.
Sie werden feststellen, das Node.js zum Großteil über Terminal-Befehle gesteuert wird. Zu Beginn mag das für eingefleischte Klickibunti-Fans ungewohnt sein, aber Sie werden sich schnell daran gewöhnen.
Ein Node.js-Test-Projekt ohne Funktionalität
Mit Hilfe von npm
[2] (npm = node package manager) können beliebige Node.js-Pakete installiert werden.
Viele dieser Pakete könnte man global auf dem Rechner installieren. Die globale Installation hätte zur Folge, dass jedes Projekt auf diese Pakete zugreifen könnte und damit Pakete nicht mehrfach installiert werden müssten. Im Allgemeinen ist es allerdings besser, die Pakete für jedes Projekt separat, d. h. projektlokal zu installieren. Die kostet zwar mehr Platz, hat aber den Vorteil, dass man für verschiedene Projekte verschiedene Pakete verwenden kann. Es kann durchaus sein, dass zwei verschiedene Pakete ein drittes benötigen, doch jeweils in einer anderen Version. Außerdem stehen einem anderen Entwickler, der eine Kopie Ihres Projektes erhält, dann sofort alle Pakete in der jeweils benötigten Version zur Verfügung.
Um ein neues Projekt zu erstellen, legt man zunächst einen leeren Ordner an. Es kann ein beliebiger Ordner gewählt werden.
Im Folgenden wählen wird /C/mmprog/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.
~/mmprog/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/mmprog/test01 # bzw: mkdir -p ~/Documents/mmprog/test01
# Erzeugen Sie ein neues (leeres!) Projektverzeichnis.
# Bitte passen Sie diesen Pfad an Ihre Gegebenheiten an.
cd /C/mmprog/test01 # bzw: cd ~/Documents/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 testhalber zwei Node.js-Pakete projektlokal.
npm install --save-dev json-loader style-loader
ls -al # Sehen Sie sich an, welche Dateien und Ordner erzeugt wurden.
ls -al node_modules
less package.json # Sehen Sie sich den Inhalt der Konfigurationsdatei an.
# Verlassen von "less": Taste "q" drücken.
# Löschen Sie nun testhalber eines der beiden Pakete.
npm uninstall --save-dev style-loader
ls -al node_modules
less package.json
Sie können das Projekt in WebStorm öffnen, um die zugehörigen Dateien mit dem WebStorm-Editor zu betrachten und gegebenenfalls auch bearbeiten:
File
bzw.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ö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 WebStorm verwendet. Diese IDE ist ganz 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)
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", ... "description": "Dies ist ein erster Test ohne weitere Funktionalität." ... "keywords": ["test"], "author": "Wolfgang Kowarschick", "license": "CC-BY-NC-SA-4.0",
Sie können auch noch, um lästigen NPM-Warnings vorzubeugen,
das Repository einfügen (vor devDependencies
), in dem sich das Projekt später befinden wird.
"repository": { "type": "git", "url": "https://gitlab.multimedia.hs-augsburg.de/ACCOUNT/test01" },
Hier müssen Sie natürlich ACCOUNT
durch Ihren RZ-Account ersetzen.
Ändern Sie dagegen nie die Paketinformationen, die im Attribut devDependencies
gespeichert sind.
Diese werden mittels npm
verwaltet.
Der Node-Paket-Manager npm
ist ein sehr nützliches Hilfsprogramm,
mit dem Sie neue Node-Projekte erstellen (npm init -y
), Pakete installieren (npm install
) und
wieder löschen (npm uninstall
) sowie vieles mehr machen können (Dokumentation: https://docs.npmjs.com/).
Wichtig ist auch der Befehl
npm --depth=9999 update
Mit diesem können Sie die lokal gespeicherte Versionen der im Attribut devDependencies
aufgeführte Node.js-Pakete
jederzeit auf die neueste Version aktualisieren. Die aktuell installierten Versionen können Sie mit
npm list # projektlokale Node.js-Pakete
erfragen.
Mittels
npm --only=dev i npm
<source lang="bash">
aktualisieren Sie die projektlokale Version von npm selbst.
Sie können Pakete auch lokal löschen und dann mittels <code>npm install</code> wieder herstellen.
Versuchen Sie es:
<source lang="bash">
npm install --save-dev style-loader
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 # 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, müssen Sie zum Aktualisieren von npm
zusätlich die Option -g
angeben:
npm -g install npm # Mac OS X: sudo npm -g install npm
Das Tool npm
kann sich also selbst aktualisieren. :-)
Node.js-Pakete können, wie wir gesehen haben, mittels der NPM-Option -g
auch global gespeichert werden, werden aber normalerweise projektlokal abgelegt.
Durch die projektlokale Speicherung von Node.js-Paketen bläht sich ein Projekt sehr stark auf. Es enthält dann
meist mehrere Tausend Dateien, auch wenn das eigentliche Projekt nur aus ein paar wenigen Dateien besteht. Dies ist vor allem beim Speichern eines derartigen Projektes in eine Repository (Git, SVN etc.)
sehr störend. Dennoch sollte man nur ein Paket wie grunt-cli
, 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ädt 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.
Fortsetzung des Tutoriums
Sie sollten nun Hello-World-Tutorium bearbeiten.
Quellen
- ↑ Node.js: https://nodejs.org/en/
- ↑ npm: https://www.npmjs.com/
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)