Eigene Javascript-Dateien in Zurb Foundation ab Version 6.4. einbinden
Wer das Web-Framework Foundation aus dem Hause Zurb nutzt, kommt meist in den Genuss modernster Technik. Das ist zwar toll und lobenswert, allerdings ist meist die Entwickler-Dokumentation noch veraltet. Aktuell ist das der Fall was die Einbinden von eigenen Javascript-Dateien anbelangt. Wir zeigen wie man die über das neue Modul "Webpack" einbinden kann.
Vor Version 6.4. des Frameworks Foundation konnte man relativ einfach eigene Javascript-Dateien in seine Projekte einbinden. Im Ordner /assets/js/ konnte man beispielsweise eine Datei custom.js anlegen. Diese wurde automatisch – ohne Zutun des Entwicklers – von Foundation verarbeitet und mit in die finale JS-Datei app.js verschmolzen (streng genommen sei gesagt, dass nicht Foundation für dieses Verschmelzen verantwortlich zeichnet, sondern der Task-Runner Gulp).
Moderne Websites erfordern "modulares Verpacken" von Assets - Etwas technisches Hintergrundwissen
In Zeiten von HTTP/1 war es noch wichtig so wenig Requests/Anfragen wie möglich gen Server zu machen. Lieber eine fette Datei laden, dafür aber nicht viele verschiedene. Diese eine fette Datei wird dann einfach im Browser gecacht und gut ist. Damit nahm man nur eine Anfrage Richtung Server in Anspruch, lud Wohl oder Übel aber alle Scripts runter - selbst wenn ein Teil der Scripts auf der angesteuerten Seite gar nicht erst genutzt wurden.
Diese Vorgehensweise findet in modernen Zeiten von HTTP/2 immer weniger Verwendung. Unter anderem dank dieses neuen Übertragungs-Protokolls (die meisten Browser beherrschen es bereits - hauptsache der Server wird entsprechend konfiguriert um HTTP/2 auszuliefern) spielt die Anzahl an Anfragen kaum mehr eine Rolle. Wichtiger wird die Menge an zu übertragenden Daten. Anders ausgedrückt: Besser mehr Dateien laden quer durch die Website (dafür aber immer nur die exakt für diese Seite passenden Informationen), als eine dicke Datei mit allen Daten.
Zurück zu Foundation: Wie binde ich denn nun meine Scripts ein?
Seit Version 6.4. wird Foundation mit dem „Modul Manager“ Webpack ausgeliefert. Webpack sorgt dafür, dass man nicht einfach blind alle Dateien bündelt, sondern alles in Module packen kann, die dann filigran gesteuert werden können.
Schritt 1: Datei ablegen unter assets/js/lib/
Um unsere eigene Datei custom.js nun einzubinden, können wir diese in den Ordner /assets/js/lib ablegen. Dort sollte auch bereits eine Datei von Foundation abliegen.
Schritt 3: Die Datei app.js anpassen
Im einem nächsten Schritt müssen wir das neu erstellte Modul nur noch rein holen. Hierzu öffnen wir die Datei /assets/js/app.js. dort befinden sich bereits verschiedene Import-Anweisungen. Wir importieren nun via require() unsere Datei:
require('./lib/foundation-explicit-pieces'); // wird via import reingeholt und kann aber auch via require reingeholt werden
require('./lib/custom'); // kommt neu hinzuSchritt 4: Den Befehl "foundation watch" neu starten
Damit alle Anpassungen nun berücksichtigt werden von Foundation, muss noch einmal der „Watch“-Befehl neu gestartet werden. Dieser sorgt dafür, dass im laufenden Arbeitsprozess live verarbeitet wird. Unsere Anpassung wird aber erst berücksichtigt nach Neustart des Befehls.
foundation watchFazit
Durch den Sprung hin zu Webpack zeigt sich Foundation deutlich modularer und für die Zukunft gewappnet. In unserem Beispiel ging es vornehmlich darum zu zeigen wie man ab Version 6.4. des beliebten Frontend-Frameworks Foundation eigene Javascript-Dateien einbinden kann. Auch wenn in unserem Beispiel nach altem Vorbild alles in eine Datei verschmolzen wurde, kann man durch den Grundaufbau der Module nun einen Schritt weiter gehen und – Webpack sei Dank – seine Scripts modularer ausführen im Frontend.