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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
Zeile 113: Zeile 113:
ls -al         
ls -al         
ls -al node_modules          # In diesem Ordner befinden sich nicht nur file-loader  
ls -al node_modules          # In diesem Ordner befinden sich nicht nur file-loader  
                               # und css-loader, sondern auch alle node.js-Pakete, die  
                               # und css-loader, sondern auch alle Node.js-Pakete, die  
                               # diese Pakete benötigen!
                               # diese Pakete benötigen!
                               # Dieser Ordner enthält schon nach kurzer Zeit Tausende
                               # Dieser Ordner enthält schon nach kurzer Zeit Tausende
Zeile 154: Zeile 154:
<pre>
<pre>
"name": "test01",
"name": "test01",
...
"version": "0.0.1",
"description": "Dies ist ein erster Test ohne weitere Funktionalität."
"description": "Dies ist ein erster Test ohne weitere Funktionalität."
...
...
Zeile 160: Zeile 160:
"author": "Wolfgang Kowarschick",
"author": "Wolfgang Kowarschick",
"license": "MIT",
"license": "MIT",
...
</pre>
</pre>


Zeile 192: Zeile 193:
</source>
</source>


erfragen.
erfragen. Hier bekommen Sie eine Fehlermeldung, dass das <code>webpack</code> fehlt. (Das Paket <code>css-loader</code> funktioniert nur im Zusammenhang mit webpack.) Sie sollten diesen Fehler beheben:
 
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.
Versuchen Sie es:


<source lang="bash">
<source lang="bash">
npm install --save-dev style-loader
npm i -D webpack
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
npm list
</source>
</source>
Zeile 225: Zeile 211:
</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:  
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:  


<source lang="bash">
<source lang="bash">
npm -v                # Gib die aktuelle Version von npm aus.
npm -g install npm    # Mac OS X: sudo npm -g install npm
npm -g install npm    # Mac OS X: sudo npm -g install npm
npm -v                # Gib die aktuelle Version von npm aus.
</source>
</source>
Das Tool <code>npm</code> kann sich also selbst aktualisieren. :-)
Das Tool <code>npm</code> kann sich also selbst aktualisieren. :-)
Zeile 235: Zeile 223:
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 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.)
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 <code>grunt-cli</code>, dessen einzige Aufgabe es ist, die jeweils projektlokale Version von Grunt auszuführen, global installieren.
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.


Um das Repository-Problem zu vermeiden, muss man die Speicherung von Node.js-Bibliotheken im [[Repository]] ausschließen und
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:
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  
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 VSC-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projektes) und führt
<code>npm install</code> aus.
<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.
 
<!--
===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>Unused 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>&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
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 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.
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 defaultmäßig gar keine Veränderungen vornimmt.
Sie können sehr feingranular bestimmen, welche Übersetzungen stattfinden sollen.
Erstellen Sie im Wurzelverzeichnis 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.
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.
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 jedes Mal, 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 dauerhaft laufen lassen, solange Sie an Ihrem Projekt arbeiten.
 
--><!--
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
-->


==Fortsetzung des Tutoriums==
==Fortsetzung des Tutoriums==

Version vom 15. März 2021, 19:00 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: SVN-Repository

Zur Unterstützung der Entwicklung von Web-Anwendungen kann Node.js[1] eingesetzt werden: Generierung von statischen HTML-Seiten, 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

Unix-Shell

Unter Visual Studio Code (VSC) steht Ihnen ein Terminal zur Verfügung, in dem Sie Kommandozeilen-Befehle absetzen können:

  • Menü am oberen Fensterrand: Klick auf Terminal → Neues Terminal

Wenn Sie das VSC-Terminal verwenden, befinden Sie sich automatisch im Wurzelverzeichnis des zugehörigen Projektes. 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.

Geben Sie ins Terminal git --version ein. Wenn eine Versionnummer ausgegeben wird, ist Git auf Ihrem Rechner bereits verfügbar.

Falls nicht, müssen Sie Git installieren: https://git-scm.com/downloads.

Versuchen Sie nochmals git --version. (Eventuell müssen Sie das Terminal erst schließen (Abfalleimer-Icon) und neu öffnen.

Falls es nicht funktioniert, müssen Sie den Pfad in settings.json eintragen:

  • STRG/CMD/CTRL , (Einstellungen öffnen)
  • Suchen: git path
  • In "settings.json" bearbeiten

Windows only:
Unter Linux und Mac OS X benutzt VSC 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.

Mit Git haben Sie automatisch auch die bash installiert. Deren Pfad müssen Sie noch in die settings.json eintragen.

Nun tragen Sie die bash als Standard-Terminal ein:

  • STRG/CMD/CTRL , (Einstellungen öffnen)
  • Suchen: shell windows
  • Terminal > Integrated > Shell: In "settings.json" bearbeiten
  • "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe" (der Pfad heißt evtl. anders)

Beachten Sie, dass Sie \\ an Stelle von \ schreiben müssen, da in der bash ein einzelner Backquote ein Escape-Zeichen ist.

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 Datei bash.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.

Node.js

Installieren Sie nun Node.js: https://nodejs.org/en/, Version 14.x.

Öffnen Sie das VSC-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] (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/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 unter Kontrolle 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

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 
                              # diese Pakete benötigen!
                              # Dieser Ordner 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

npm i                         # Erzeugen Sie den Ordner node_modules neu (mit Hilfe
                              # der Dateien package.json und package-lock.json).
ls -al        
ls -al node_modules

Sie können das Projekt in VSC öffnen, um die zugehörigen Dateien mit dem VSC-Editor zu betrachten und gegebenenfalls auch bearbeiten:

  • Datei → Ordner öffnen
  • 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 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. Hier bekommen Sie eine Fehlermeldung, dass das webpack fehlt. (Das Paket css-loader funktioniert nur im Zusammenhang mit webpack.) Sie sollten diesen Fehler beheben: 

npm i -D webpack
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 (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 -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 Projektes 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 Projektes (beim VSC-Terminal befindet man sich standardmäßig immer im Root-Verzeichnis des Projektes) 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.

Fortsetzung des Tutoriums

Sie sollten nun Hello-World-Tutorium bearbeiten.

Quellen

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