Diskussion:HTML5-Tutorium: JavaScript: Hello World 05

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Wechseln zu:Navigation, Suche

Musterlösung: index.html (SVN-Repository)

1 Anwendungsfälle (Use Cases)

Gegenüber dem dritten und vierten Teil des Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

In diesem Teil des Tutoriums geht es darum, den JavaScript-Code zu verbessern, indem er modulrisiert wird.

2 Erstellen eines neuen Projektes

Erstellen Sie ein neues Projekt „HelloWorld04“ und legen Sie dieses in Ihrem Repository ab. Kopieren Sie anschließend alle Dateien aus dem vierten Teil des Tutoriums, passen Sie den Titel in der HTML-Datei und in der Datei „package.json“ an.

Es ist nicht notwendig, den Ordner „node_modules“ zu kopieren. Diesen können Sie nach dem Kopieren automatisch durch die Eingabe vom npm update ins WebStorm-Terminal erstellen.

Definieren Sie wieder einen WebStorm-Startup-Task für den Grunt-Task „watch, damit die Dateien in Ihrem Web-Verzeichnis automatisch aktalisiert werden.

Bevor Sie die Projekt-Dateien per commit ins Repository übertragen, sollten Sie wieder überprüfen, dass der Ordner „node_modules“ auf der „Ignore List“ steht (und damit nicht ins Repository eingespielt wird):

  • Files bzw. WebStormSettings bzw. PreferencesIgnored Files
  • Wenn in dieser Liste der Ordner „node_modules“ nicht aufgeführt wird, fügen Sie ihn mittels des Plus-Icons ein.

Nun können Sie Ihr Projekt committen.

3 Bower

Node.js bringt seinen eigenen Package-Manager „npm“ mit. Für die JavaScript-Pakete, die Ihre Web-Anwendung benötigt, kann npm allerdings nicht eingesetzt werden. Dafür bietet Node.js einen anderen, sehr mächtigen Paket-Manager namens „bower“ an (https://bower.io/).

Bevor Sie Bower installieren, müssen Sie zunächst sicherstellen, dass unter Windows „Git for Windows“ installiert wurde (auch wenn wir Git gar nicht verwenden): https://git-for-windows.github.io/ Achten Sie darauf, dass Sie bei der Installation die Option

USe Git from the Windows Command Prompt

selektieren.

Geben Sie nun folgende Befehle in das WebStorm-Terminal ein:

npm -g install bower
bower install --save requirejs requirejs-plugins

TO BE DONE

4 Quellen

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