Diskussion:HTML5-Tutorium: JavaScript: Hello World 06: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld05/index.html <code>index.html</code>] ([https://glossar.hs…“) |
Kowa (Diskussion | Beiträge) K (Kowa verschob die Seite Diskussion:HTML5-Tutorium: JavaScript: Hello World 05 nach Diskussion:HTML5-Tutorium: JavaScript: Hello World 06, ohne dabei eine Weiterleitung anzulegen) |
(kein Unterschied)
| |
Version vom 7. April 2021, 13:51 Uhr
Musterlösung: index.html
(SVN-Repository)
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.
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):
Filesbzw.WebStorm→Settingsbzw.Preferences→Ignored 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.
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
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
