|
|
| Zeile 1: |
Zeile 1: |
| {{In Bearbeitung}} | | {{In Bearbeitung}} |
| {{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} | | {{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} |
| '''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>“
| |
| -->
| |
