HTML5-Tutorium: JavaScript: Hello World 05 (Webpack): Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 36: | Zeile 36: | ||
Dennoch werden wir im Tutorium Webpack 5 einsetzen. Die Vorteile überwiegen trotz aller Nachteile. | Dennoch werden wir im Tutorium Webpack 5 einsetzen. Die Vorteile überwiegen trotz aller Nachteile. | ||
====Node.js-Pakete | ==Webpack== | ||
===Node.js-Pakete=== | |||
Um Webpack verwenden zu können müssen Sie zunächst ein Node.js-Projekt anlegen. | Um Webpack verwenden zu können, müssen Sie zunächst ein Node.js-Projekt anlegen. | ||
<source lang="bash"> | <source lang="bash"> | ||
| Zeile 60: | Zeile 61: | ||
Das Copy-Webpack-Plugin<ref>https://webpack.js.org/plugins/copy-webpack-plugin/</ref> dient dazu, mittels Webpack Dateien von einem Ordner in einen anderen zu kopieren. | Das Copy-Webpack-Plugin<ref>https://webpack.js.org/plugins/copy-webpack-plugin/</ref> dient dazu, mittels Webpack Dateien von einem Ordner in einen anderen zu kopieren. | ||
Verschiedene Loaders werden verwendet, um CSS- und JavaScript-Dateien für den „Bündelung“ vorzubereiten.<ref>https://webpack.js.org/loaders/</ref> | Verschiedene Loaders werden verwendet, um CSS- und JavaScript-Dateien für den „Bündelung“ vorzubereiten.<ref>https://webpack.js.org/loaders/</ref> | ||
===Git commit=== | |||
<strong>Achtung:</strong> Bevor Sie einen Commit durchführen, müssen Sie im selben Ordner, in dem sich die Datei <code>package.json<code> befindet eine Datei namens <code>.gitignore</code> anlegen. (Der Punkt zu Beginn des Dateinamens darf nicht fehlen!) | |||
In diese Datei schreiben Sie ein einziges Wort: <code>node_modules</code>. | |||
Diese Datei ist <code>extrem wichtig</code>. Wie Sie bereits im Node.js-Tutorium gesehen haben, enthält der | |||
Ordner <code>node_modules</code> sehr schnell <code>sehr viele</code> Dateien (mehrere Zehntausend). | |||
Wenn Sie diese im Repository speichern, bläht sich dieses extrem stark auf. Die Git-Push- und -Pull-Befehle werden dadurch sehr langsam. | |||
Die Datei <code>.gitignore</code> dient dazu, dies zu verhindern. In jeder Zeile steht ein Dateiname oder ein Dateipattern (wie zum Beispiel <code>*.log</code>, das alle Dateien mit der Dateiextension <code>log</code> beschreibt), um zu verhindern, dass die zugehörigen Dateien ins Git-Repository eingefügt werden. | |||
Wenn Sie dafür sorgen, die Dateien <code>package.json</code> und <code>package-lock.json</code> ins Repository eingefügt werden, kann ein anderer Benutzer, der Ihr Git-Repository auf seinen Rechner lädt, die fehlenden Node.js-Module jederzeit ganz einfach restaurieren: | |||
<source lang="bash"> | |||
npm i | |||
</source> | |||
Fügen Sie nun alle Dateien (mit Ausnahme des Ordners <code>node_modules</code> ins Repository ein (zum Beispiels mittels <code></code>) | |||
==Fortsetzung des Tutoriums== | ==Fortsetzung des Tutoriums== | ||
Version vom 7. April 2021, 16:16 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
| Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 4 (unwichtige Fakten fehlen) |
Quellenangaben: 3 (wichtige Quellen vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 3 (gut) |
Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6
Musterlösung: index.html (5a), index.html (5b), index.html (5c), index.html (5d),
(Git-Repositories: 5a, 5b, 5c, 5d)
Anwendungsfälle (Use Cases)
Gegenüber dem dritten 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, die Anwendung mittels Webpack[1] automatisch für den Server-Betrieb zu optimieren, sodass möglichst wenige, möglichst kleine Dateien zum Client übertragen werden.
Im Tutorium wird „Webpack 5“ verwendet.
Erstellen eines neuen Projektes
Erstellen Sie ein neues Projekt HelloWorld05 als Fork von HelloWorld04 (siehe Hello-World-02-Tutorium).
JavaScript Module Bundlers
Um Module einer Web-Anwendung für die Auslieferung zum Client zu komprimieren, zu bündeln und anderweitig zu optimieren, gibt es zahlreiche Werkzeuge. Für Node.js gibt es die sogenannten “JavaScript Module Bundlers”, wie z. B. Webpack[1], Browserify[2] oder FuesBox[3].
Üblicherweise optimieren die Bundlers nicht nur JavaScript-Dateien, sondern auch HTML-, CSS-, JSON- und andere Dateien.
Webpack ist ein sehr mächtiges Werkzeug, mit dem eine Vielzahl von Web-Dateien in einer oder einigen wenigen JavaScript-Dateien zusammengefasst und bei Bedarf auch komprimiert werden können. Dieser Bundler kommt in vielen Projekten zum Einsatz. Einer der Entwickler von webpack ist Johannes Ewald, ein ehemaliger Student der HSA (vgl. https://github.com/jhnns). Er bietet auch regelmäßig Vorlesung an der HSA zum Thema „JavaScript“ an.
Allerdings hat Webpack auch einige Nachteile:
- Es gibt diverse zugehörige Node.js-Pakete ganz unterschiedlicher Qualität. Für eine Aufgabe das beste oder zumindest ein gutes Paket zu finden, ist häufig eine Sisyphos-Arbeit.
- Mit jedem Versionssprung der Hauptrevisionsnummer haben sich bislang die Schnittstellen und Prinzipien so gravierend geändert, dass man die Webpack-Konfiguration im Wesentlichen neu erstellen musste.
- Auch kann es einem passieren, dass ein Paket, das bislang gewinnbringend verwendet wurde, plötzlich nicht mehr unterstützt wird und aufgrund von neu entdeckten Sicherheitsproblemen auch nicht mehr benutzt werden kann.
Dennoch werden wir im Tutorium Webpack 5 einsetzen. Die Vorteile überwiegen trotz aller Nachteile.
Webpack
Node.js-Pakete
Um Webpack verwenden zu können, müssen Sie zunächst ein Node.js-Projekt anlegen.
npm init -y
Tagen Sie wie im Tutorium HTML5-Tutorium: JavaScript: Entwicklungsumgebung: Node.js beschrieben geeignete Werte in die JSON-Datei package.json ein (name, version, description,
main, repository, keywords, author und license).
Achten Sie darauf, dass Visual Studio Code keine Fehler meldet.
Installieren Sie nun die benötigten Node.js-Pakete:
npm i -D webpack webpack-cli
npm i -D copy-webpack-plugin
npm i -D css-loader style-loader file-loader extract-loader
Das Paket webpack enthält das eigentlich Webpack-System. webpack-cli enthält Kommandozeilenbefehle, mit denen Webpack von einer Shell aus oder auch mittels NPM-Skripts gesteuert werden kann.
Das Copy-Webpack-Plugin[4] dient dazu, mittels Webpack Dateien von einem Ordner in einen anderen zu kopieren. Verschiedene Loaders werden verwendet, um CSS- und JavaScript-Dateien für den „Bündelung“ vorzubereiten.[5]
Git commit
Achtung: Bevor Sie einen Commit durchführen, müssen Sie im selben Ordner, in dem sich die Datei package.json befindet eine Datei namens .gitignore anlegen. (Der Punkt zu Beginn des Dateinamens darf nicht fehlen!)
In diese Datei schreiben Sie ein einziges Wort: node_modules.
Diese Datei ist extrem wichtig. Wie Sie bereits im Node.js-Tutorium gesehen haben, enthält der
Ordner node_modules sehr schnell sehr viele Dateien (mehrere Zehntausend).
Wenn Sie diese im Repository speichern, bläht sich dieses extrem stark auf. Die Git-Push- und -Pull-Befehle werden dadurch sehr langsam.
Die Datei .gitignore dient dazu, dies zu verhindern. In jeder Zeile steht ein Dateiname oder ein Dateipattern (wie zum Beispiel *.log, das alle Dateien mit der Dateiextension log beschreibt), um zu verhindern, dass die zugehörigen Dateien ins Git-Repository eingefügt werden.
Wenn Sie dafür sorgen, die Dateien package.json und package-lock.json ins Repository eingefügt werden, kann ein anderer Benutzer, der Ihr Git-Repository auf seinen Rechner lädt, die fehlenden Node.js-Module jederzeit ganz einfach restaurieren:
npm i
Fügen Sie nun alle Dateien (mit Ausnahme des Ordners node_modules ins Repository ein (zum Beispiels mittels
Fortsetzung des Tutoriums
Sie sollten nun Teil 6 des Tutoriums bearbeiten.
In diesem Teil des Tutoriums wird ausgenutzt, dass in die Konfigurationsdatei von Webpack ein SCSS-Loader integriert wurde. Damit kann man das Prinzip “Don't Repeat Yourself” (DRY) auch für CSS-Dateien umsetzen.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
