JavaScript in JavaScript einbinden mit JS Build

Die Menge an JavaScript in meinem Blog ist relativ überschaubar, aber in meinem Praktikum hier in den USA arbeite ich fast ausschließlich in JavaScript. Die dort eingesetzte Menge wäre in einer einzelnen Datei nicht mehr zu überblicken. Und es würde vermutlich zu vielen Konflikten im Git-Revisionssystem kommen. Für eine effizientere Arbeit bietet es sich also an, den Code auf viele kleinere Dateien aufzuteilen.

Allerdings hat das in der Welt der Webentwicklung auch einige Nachteile. So muss sichergestellt werden dass im HTML-Header alle Dateien einbindet, und das in der richtigen Reihenfolge. Wer seine Seite auf Geschwindigkeit optimiert weiß aber auch, die vielen Anfragen an den Server kosten viel Zeit. Bei vielen Dateien ist das mehr Zeit, als für den Download einer einzelnen Datei nötig wäre.

Wie bringt man nun aber beide Vorteile unter einen Hut? Ganz einfach, man bindet die kleinen Dateien in eine Hauptdatei ein. Allerdings bietet JavaScript diese Möglichkeit nicht nativ. Hier kommt JS Build ins Spiel.

JS Build

Während eines Hackdays bei uns Büro wollte ich mir ein System schaffen, welches meine JavaScript-Dateien zusammen fasst. Das Prinzip ist einfach: In einer Hauptdatei werden alle einzubindenden Dateien aufgelistet und diese werden vom Tool nacheinander in eine finale Datei geschrieben, die dann einfach in HTML eingebunden werden kann.

JS Build ist ein Linux Kommandozeilen Tool, welches einerseits manuell ausgeführt werden kann, andererseits aber auch als Wächter im Hintergrund laufen kann und beim Speichern einer Datei im Verzeichnisbaum automatisch die Ausgabedatei aktualisiert.

Anwendung in der JavaScript-Datei

Um das System zu nutzen, ist in JavaScript nicht viel zu tun. Einfach eine Zeile der Form

hinzufügen, und schon wird der Code entsprechend aus der einzubindende_datei.js ausgelesen und mit ausgegeben. Auf die Dateiendung wird sogar verzichtet. Einfach oder?

Die verwendete Syntax erlaubt es zudem, die JavaScript-Datei auch weiterhin normal zu nutzen, ohne der Browser die Ausführung stoppt. Die Einbinde-Befehle werden einfach als Kommentar interpretiert.

Zu beachten ist, das nur Dateien auf Ebene des Hauptdatei und darunter berücksichtigt werden und das Einbinden aktuell auch nur in der Hauptdatei funktioniert.

Zusammenfügen des JavaScript-Codes

Sollen die einzelnen Dateien nun zu einer einzelnen zusammengefügt werden, genügt ein Aufruf in der Konsole in der Form

Im selben Ordner in dem auch die Originaldatei liegt, wird eine neue Datei, im Beispiel quellcode_compiled.js, angelegt, die nun alle Dateien enthält, die eingebunden werden sollten. Das war's, fertig zum Einbinden in das Webprojekt.

Überwachen des Dateisystems

Ist man gerade am Debuggen oder Entwickeln ist es natürlich störend, jedes Mal die Datei neu zu erstellen. Dafür beinhaltet JS Build ein weiteres kleines Tool, welches das Dateisystem überwacht und bei einer Änderung den Code neu zusammenstellt. Der Start dieses Tools ist ebenfalls sehr einfach in der Linux Kommandozeile:

Sehr ähnlicher Aufruf und auch das Ergebnis ist am selben Ort zu finden, als würde der Build-Prozess manuell gestartet.

Fazit JS Build

Die Codeaufsplittung erleichtert das Entwickeln und Debuggen enorm und es gibt sicherlich bereits einige Build-Systeme für JavaScript. Eines davon ist nun auch JS Build. Der Grund für eine eigene Entwicklung ist die Freiheit in der zukünftigen Entwicklung und Verwendung. Außerdem kann dieses Tool einfach im Hintergrund laufen und funktioniert nicht über umständliche Umwege im JavaScript-Code selbst.

Natürlich muss man sagen, JS Build ist in einer sehr frühen Entwicklung (Start 24.03.2015) und wird sich für mich im Alltag beweisen müssen. Weitere Features für das Tool werden kommen. Vorschläge sind dabei gerne gesehen. Ich kann nur jedem Entwickler empfehlen, JS Build zumindest einmal im aktiven Einsatz auszuprobieren.