HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js

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

Zur Unterstützung der Entwicklung von Web-Anwendungen kann Node.js eingesetzt werden: automatische Übersetzung von EcmaScript 6 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:

mkdir -p /C/mmprog/test  # Erzeugen Sie ein neues (leeres!) Projektverzeichnis.
                         # Bitte passen Sie diesen Pfad an Ihre Gegebenheiten an.
                         # 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.
npm install --save-dev grunt babel yuglify mincss jshint jsdoc ink-docstrap
npm install --save-dev grunt-babel babel-preset-env grunt-contrib-watch grunt-contrib-cssmin grunt-contrib-uglify
ls -al                   # Sehen Sie sich an, welche Dateien und Ordner erzeugt wurden.
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“ → „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 allerdings sehr angenehm zu bedienen und enthält einen kleinen Web-Server, der die Entwicklung von JAvaScript-Code erleichtert. Außerdem enthält er ein Terminalfenster (Menü am unternen Fensterrand), der unter Windows allerdings
nur Windows-Befehle ausführen kann. Unter Windows verwende ich daher meist 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",
  "repository": {
    "type": "svn",
    "url": "https://glossar.hs-augsburg.de/kowa/tutorium/es5/test"
  },

Als Repository verwenden wir in der Vorlesung Subversion (svn). Üblicherweise kommt heute allerdings Git zum Einsatz. Ihr Repository-Pfad lautet im Rahmen der Vorlesung

   "https://praktikum.multimedia.hs-augsburg.de/svn/RZ-ACCOUNT/mmprog/PROJEKTNAME"

Ändern Sie dagengen 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

Kein Ergebnis ist hier ein gutes Ergebnis!

Node.js-Pakete könnten mittels der npm-Option -g auch global gespeichert werden. Allerdings ist es 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. Andererseits bläht sich dadurch ein Projekt sehr stark auf. Es enthält dann meist mehrere Hundert oder gar mehrere Tausend Dateien, obwohl das eigentlich 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.

Um diese Probleme 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 Projekt auf seinen Arbeitsrechner, wechselt mittels cd ins Wurzelverzeichnis des Projektes und führt npm install aus.

Als nächstes initialisieren Sie Grunt (http://gruntjs.com/) . Grunt ist ein “JavaScript Task Runner”, also ein Programm, das Aufgaben (tasks) wie z. B. das Übersetzen von EcmaScript 6 in EcmaScript 5 oder das Komprimieren von Programmdateien automatisch durchführt.

Die Initialisierung erfolgt durch die Bereitstellung von zwei 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:

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 Versionen Versionen der Datei „gruntfile.js“ jedes Mal eine Fehlermeldung zur Folge haben, wenn die Datei ins SVN-Repository geschrieben werden soll:

• File bzw. WebStorm → Settings bzw. Preferences → Editor → Inspections
• JavaScript aufklappen → General aufklappen → Unsued JavaScript / ActionScript global symbol deselektieren
• OK

TO BE DONE

Ausschließen diverser Dateien von automatischer Speicherung und/oder Überprüfung

Sie sollten unbedingt verhindern das Node.js-Modulateien ins Repository geschrieben werden. Da ist, wie Sie zuvor gesehen haben, überflüssig und nimmt sehr viel Zeit in Anspruch, da es sich um Hunderte von Dateien handelt:

• Rechtsklick im Dateibaum auf node_modules → Subversion → Ignore → node_modules
• 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.

Außerdem sollten Sie die automatische Überprüfung auf Fehler für alle Ordner ausschalten, die nicht von Ihnen stammen:

• Rechtsklick im Dateibaum auf „node_modules“ → Mark Directory as → excluded
• Rechtsklick im Dateibaum auf „doc“ → Mark Directory as → excluded

Beide Ordner enthalten Dateien, die nicht von Ihnen stammen. Diese Dateien können Fehler und Hinweise enthalten, veraltete (“deprecated”) Schnittstellen verwenden etc. (Oh ja, auch andere Programmierer machen Fehler. :-) ) Und wenn Sie diese beiden Ordner nicht als „excluded markieren“, 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.

Quellen

1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)