Was ein Bündler macht

Du hast jetzt zweimal von Werkzeugen gelesen, ohne eines zu benutzen. Diese Lektion ordnet ein, was Vite, esbuild und Rollup eigentlich tun.

Es gibt hier nichts zu programmieren. Der Stoff steht trotzdem im Kurs, weil jede Anleitung im Netz mit npm install beginnt und man sonst leicht glaubt, ohne ginge es gar nicht.

01 / 05Das Problem, das am Anfang stand

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Drei Skripte</title>
  </head>
  <body>
    <p>Drei Skripte, und das dritte findet einen Namen vor, den es nicht erwartet hat.</p>

    <script>
      // hilfen.js
      function formatieren(zahl) {
        return zahl + " Stunden";
      }
    </script>

    <script>
      // anzeige.js, von einem anderen Entwickler
      function formatieren(zahl) {
        return zahl + " h";
      }
    </script>

    <script>
      // app.js
      console.log("Ergebnis:", formatieren(47));
      console.log("Kein Fehler, keine Warnung. Nur ein anderes Ergebnis.");
    </script>
  </body>
</html>

Vor den Modulen band man mehrere <script>-Tags ein, und alle teilten sich einen einzigen Raum. Zwei Dateien mit einer Funktion desselben Namens, und die später geladene ersetzt die frühere still.

Im ersten Beispiel siehst du genau das. Es gibt keinen Fehler und keine Warnung, nur ein Ergebnis, das jemand anderes für richtig hielt.

Dazu kam die Reihenfolge: Jede Datei musste in der richtigen Folge im HTML stehen, denn wer etwas benutzt, muss nach dem stehen, was er benutzt. Bei vierzig Dateien wird das zur eigenen Aufgabe.

02 / 05Was ein Bündler löst

<p>Zum Lesen. Module laufen hier nicht, siehe Lektion 18.4.</p>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

p {
  margin: 0 0 0.75rem;
}

// Datei: hilfen.js
// export function formatieren(zahl) {
//   return zahl + " Stunden";
// }

// Datei: app.js
import { formatieren } from "./hilfen.js";

console.log("Ergebnis:", formatieren(47));

// Eine zweite Datei mit einer eigenen Funktion namens
// formatieren stört jetzt nicht mehr: sie liegt in ihrem
// eigenen Raum, und hierher kommt nur, was importiert wird.

Ein Bündler nimmt deine Dateien mitsamt ihren import-Zeilen und macht daraus wenige fertige Dateien.

Das zweite Beispiel läuft hier nicht, und zwar aus dem Grund, der in Lektion 18.4 steht: In der Console erscheint Uncaught SyntaxError: Cannot use import statement outside a module. Lies es als Vorlage, nicht als Programm. Das dritte läuft wieder, denn dort sind die import-Zeilen ja gerade verschwunden.

<p>Ausgabe eines Bündlers, stark vereinfacht. Läuft ohne jedes Werkzeug.</p>

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 0;
  padding: 1rem;
  line-height: 1.6;
  color: #1c1917;
}

p {
  margin: 0 0 0.75rem;
}

// Aus zwei Modulen ist eine Datei geworden. Die
// Kapselung übernimmt eine Funktion, die sich selbst
// aufruft, damit nichts nach außen dringt.
(function () {
  // aus hilfen.js
  function formatieren(zahl) {
    return zahl + " Stunden";
  }

  // aus app.js
  console.log("Ergebnis:", formatieren(47));
})();

// Von außen ist formatieren nicht erreichbar.
console.log("Draußen bekannt?", typeof formatieren);

// Echte Bündler machen daraus noch kürzere Namen und
// werfen jeden Zeilenumbruch weg. Lesbar ist das Ergebnis
// nicht mehr, dafür lädt es schneller.

Zwei Gründe standen dabei am Anfang:

Weniger Anfragen. Vierzig Dateien bedeuteten vierzig Anfragen an den Server, und jede kostete Zeit.

Ältere Browser. Moderne Schreibweisen wurden in ältere übersetzt, damit die Seite überall lief.

Beide Gründe sind schwächer geworden. Seit HTTP/2 kosten viele kleine Dateien kaum noch mehr als wenige große, und Module funktionieren in jedem Browser, den man heute noch bedienen muss.

03 / 05Was heute die eigentlichen Gründe sind

Der Entwicklungsserver. Du speicherst, und die Seite im Browser aktualisiert sich, ohne neu zu laden und ohne den Zustand zu verlieren. Das ist der Grund, aus dem die meisten ein Werkzeug benutzen, und es ist ein guter.

Pakete aus dem Netz. Sobald du fremden Code benutzt, kommt er über einen Paketmanager, und der legt ihn in einem Ordner namens node_modules ab. Damit daraus etwas wird, das ein Browser laden kann, braucht es einen Bündler.

TypeScript und ähnliches. Alles, was der Browser nicht direkt versteht, muss vorher übersetzt werden.

Der Feinschliff. Ungenutzten Code entfernen, Namen kürzen, Bilder verkleinern. Für kleine Projekte unerheblich, für große nicht.

04 / 05Was ein Paketmanager ist

npm ist das Programm, das fremde Pakete herunterlädt. Es liest eine Datei namens package.json, in der steht, was dein Projekt braucht, und legt das Heruntergeladene in node_modules ab.

Dieser Ordner wird schnell sehr groß, weil jedes Paket seinerseits Pakete braucht. Er gehört nie ins Versionsverwaltungssystem: Es reicht die Liste in package.json, aus der er sich jederzeit wiederherstellen lässt.

05 / 05Der Schlusssatz

Für alles in diesem Kurs brauchst du nichts davon. Eine HTML-Datei, eine CSS-Datei, eine JavaScript-Datei, und der Browser macht den Rest.

Wer ohne Bündler angefangen hat, versteht später besser, was der Bündler eigentlich abnimmt. Und er kann eine Seite auch dann noch zum Laufen bringen, wenn das Werkzeug streikt, was es früher oder später tut.