Für die Organisation von Webprojekten mit Javascript habe ich Rollup als hilfreiches Werkzeug für die Modularisierung von Javascript entdeckt. Sinnvoll bei der Entwicklung ist es in jeder Programmiersprache, den Code in abgeschlossene Einheiten zu glieder: Module. Allerdings ist es für den Browser nicht günstig, wenn er viele kleine Dateien für eine Webseite ziehen muss, sondern eine große Datei ist schneller übertragen, als das vielfache Anfrage-Antwort-Hinundher.

Für ein Projekt mit vielen Javascript-Modulen eignet sich Rollup zum Bündeln und Optimieren des Codes zu einer Datei, die dann vom Browser gezogen wird. Somit hat man die Modularisierung mit all ihren Vorteilen bei der Entwicklung und eine kompakte, optimierte Fassung für die Laufzeit.

Rollup bietet auch viele Erweiterung zum Beispiel CSS und JSX (Babel) und kann auch den Javascript-Code in älter Sprachstandards transformieren (z. B. class aus Ecmascript 2015 in function).

Die Rollup-Konfigurationsdatei ist dabei selbst ein Javascript-Modul, was den Vorteil hat, dass man eigene Umgebungsvariablen nutzen kann, um das Verhalten von Rollup zu steuern; zum Beispiel optional die Minimierung der Ausgabe hinzuschalten.

Um im Browser mit dieser einen großen Datei dann noch den Code Debuggen zu können, kann man die Erstellung der Sourcemap für Javascript und CSS aktivieren, womit Chromium und Firefox im Debugger die ursprünglichen Dateien anzeigen und nicht den minimierten »Klumpen«.

Mit der Erweiterung replace kann man Textersetzungen wie zum Beispiel NODE_ENV vornehmen, womit man unterschiedliche Ergebnisse für Entwicklung und Produktivbetrieb erstellen kann, um zum Beispiel Debug-Meldungen im Produktivbetrieb gar nicht erst an den Browser zu liefern.

Über die Erweiterung postcss kann man ebenso wie den Javascript-Code auch die CSS-Dateien aufteilen. Über die Javascript-Module kann dann mit import 'module.css'; diese Datei eingebunden werden, womit dann dynamisch nur die CSS-Teile lädt, die auch tatsächlich von den Javascript-Modulen benötigt werden.

Rollup bringt also für Javascript und CSS die Möglichkeiten für die Strukturierung und Arbeit mit dem Code, wie man sie von Compilern bei herkömmlichen Sprachen gewöhnt ist.

Eine Einführung in Rollup bieten die Artikel How to Set Up Smaller, More Efficient JavaScript Bundling Using Rollup und How to Bundle Stylesheets and Add LiveReload With Rollup.