Rollup ist ein Modul-Bundler für JavaScript, der es ermöglicht, mehrere JavaScript-Dateien und Abhängigkeiten in eine einzige Datei zu bündeln. Es ist besonders nützlich für die Erstellung von Bibliotheken und Anwendungen, die modular aufgebaut sind.

Hauptmerkmale von Rollup #

1. Tree Shaking: Rollup führt Tree Shaking durch, um ungenutzten Code zu entfernen und die Größe des endgültigen Bundles zu minimieren. Dies ist besonders wichtig für die Performance von Anwendungen.
2. ES6-Modulunterstützung: Rollup arbeitet nativ mit ES6-Modulen, was bedeutet, dass es import und export direkt versteht und unterstützt. Dies führt zu effizienteren und leichter verständlichen Bundles.
3. Plugins: Rollup hat ein robustes Plugin-System, das es ermöglicht, die Funktionalität zu erweitern. Es gibt Plugins für das Laden von CommonJS-Modulen, das Einfügen von JSON-Dateien, das Minifizieren von Code und vieles mehr.
4. Konfigurationsdatei: Rollup verwendet eine Konfigurationsdatei (typischerweise rollup.config.js), um die Eingabedateien, Ausgabedateien und alle notwendigen Plugins und Optionen zu definieren.
5. Code-Splitting: Rollup unterstützt auch Code-Splitting, was bedeutet, dass große Anwendungen in kleinere Teile zerlegt werden können, die nur bei Bedarf geladen werden. Dies verbessert die Ladezeit und die Performance der Anwendung.

Einfache Rollup-Konfiguration #

Hier ist ein einfaches Beispiel einer rollup.config.js-Datei:

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js', // Eingangspunkt der Anwendung
  output: {
    file: 'dist/bundle.js', // Zieldatei
    format: 'iife', // Format des Bundles (IIFE, ESM, CJS, etc.)
    name: 'MyLibrary', // Name des globalen Variablens, wenn IIFE verwendet wird
  },
  plugins: [
    resolve(), // Findet und bündelt Node-Module
    commonjs(), // Konvertiert CommonJS-Module in ES6
    terser() // Minifiziert den Code für die Produktion
  ]
};

Installation und Nutzung #

Um Rollup zu installieren und zu nutzen, kann man die folgenden Schritte ausführen:

Installation: #

npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser

Nutzung: #

Man kann Rollup entweder direkt über die Kommandozeile oder durch Skripte in der package.json nutzen:

npx rollup -c

Oder in der package.json:

{
  "scripts": {
    "build": "rollup -c"
  }
}

Fazit #

Rollup ist ein leistungsstarker und flexibler Modul-Bundler für JavaScript, der sich hervorragend für die Erstellung von Bibliotheken und modularen Anwendungen eignet. Mit seiner nativen Unterstützung für ES6-Module und seiner Fähigkeit, ungenutzten Code zu eliminieren, hilft Rollup dabei, effiziente und performante JavaScript-Bundles zu erstellen.