Quelltext der Seite Diskussion:HTML5-Tutorium: JavaScript: Hello World 06

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld05/index.html <code>index.html</code>]
([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld05/ SVN-Repository])
==Anwendungsfälle (Use Cases)==
Gegenüber dem [[HTML5-Tutorium:_JavaScript:_Hello_World_03|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 [[Module|modulrisiert wird.]]

==Erstellen eines neuen Projektes==

Erstellen Sie ein neues Projekt  „<code>HelloWorld04</code>“ 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 
„<code>package.json</code>“ an.

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

Definieren Sie wieder einen 
[[HTML5-Tutorium: JavaScript: Hello World 04#Automatische_Aktualisierung_der_komprimierten_Dateien|WebStorm-Startup-Task für den Grunt-Task „<code>watch</code>“]], 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 „<code>node_modules</code>“ auf der „Ignore List“ steht (und damit nicht
ins Repository eingespielt wird):

* <code>Files</code> bzw. <code>WebStorm</code> → <code>Settings</code> bzw. <code>Preferences</code> → <code>Ignored Files</code>
* Wenn in dieser Liste der Ordner „<code>node_modules</code>“ 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 „<code>npm</code>“ mit. Für die 
JavaScript-Pakete, die Ihre Web-Anwendung benötigt, kann <code>npm</code> allerdings
nicht eingesetzt werden. Dafür bietet Node.js einen anderen, sehr mächtigen
Paket-Manager namens „<code>bower</code>“ an (https://bower.io/).

Bevor Sie Bower installieren, müssen Sie zunächst sicherstellen, dass unter
Windows „<code>Git for Windows</code>“ 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
<source lang="bash">
USe Git from the Windows Command Prompt
</source>
selektieren.

Geben Sie nun folgende Befehle in das WebStorm-Terminal ein:
<source lang="bash">
npm -g install bower
bower install --save requirejs requirejs-plugins
</source>
{{TBD}}

==Quellen==
<references/>
<ol>
<li value="3"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>
<!--
→ <code></code> „<code></code>“
-->