Bun unterstützt zwei Arten von automatischem Neuladen über CLI-Flags:

• --watch-Modus, der Bun's Prozess hart neu startet, wenn importierte Dateien sich ändern.
• --hot-Modus, der den Code sanft neu lädt (ohne den Prozess neu zu starten), wenn importierte Dateien sich ändern.

---

--watch-Modus

Der Watch-Modus kann mit bun test oder beim Ausführen von TypeScript, JSX und JavaScript-Dateien verwendet werden.

So führen Sie eine Datei im --watch-Modus aus:

bun --watch index.tsx

So führen Sie Ihre Tests im --watch-Modus aus:

bun --watch test

Im --watch-Modus behält Bun den Überblick über alle importierten Dateien und überwacht sie auf Änderungen. Wenn eine Änderung erkannt wird, startet Bun den Prozess neu und behält dieselben CLI-Argumente und Umgebungsvariablen bei, die im initialen Lauf verwendet wurden. Wenn Bun abstürzt, versucht --watch, den Prozess automatisch neu zu starten.

NOTE

⚡️ Neuladungen sind schnell. Die Dateisystem-Watcher, an die Sie wahrscheinlich gewöhnt sind, haben mehrere Bibliotheksebenen, die die nativen APIs umhüllen, oder schlimmer, verlassen sich auf Polling.

Stattdessen verwendet Bun betriebssystemeigene Dateisystem-Watcher-APIs wie kqueue oder inotify, um Änderungen an Dateien zu erkennen. Bun führt auch eine Reihe von Optimierungen durch, um es zu ermöglichen, auf größere Projekte zu skalieren (wie das Setzen eines hohen rlimit für Dateideskriptoren, statisch zugewiesene Dateipfad-Puffer, Wiederverwendung von Dateideskriptoren, wenn möglich, usw.).

Die folgenden Beispiele zeigen, wie Bun eine Datei live neu lädt, während sie bearbeitet wird, wobei VSCode so konfiguriert ist, dass die Datei bei jedem Tastenanschlag gespeichert wird.

bun run --watch watchy.tsx

watchy.tsx

import { serve } from "bun";

console.log("Ich habe neu gestartet um:", Date.now());

serve({
  port: 4003,
  fetch(request) {
    return new Response("Sup");
  },
});

In diesem Beispiel ist Bun

Ausführen von bun test im Watch-Modus mit aktiviertem save-on-keypress:

bun --watch test

NOTE

Das **`--no-clear-screen`**-Flag ist in Szenarien nützlich, in denen Sie nicht möchten, dass das Terminal geleert wird, z. B. wenn mehrere `bun build --watch`-Befehle gleichzeitig mit Tools wie `concurrently` ausgeführt werden. Ohne dieses Flag könnte die Ausgabe einer Instanz die Ausgabe anderer löschen und möglicherweise Fehler von einer Instanz unter der Ausgabe einer anderen verbergen. Das `--no-clear-screen`-Flag, ähnlich wie TypeScript's `--preserveWatchOutput`, verhindert dieses Problem. Es kann in Kombination mit `--watch` verwendet werden, zum Beispiel: `bun build --watch --no-clear-screen`.

---

--hot-Modus

Verwenden Sie bun --hot, um Hot-Reloading zu aktivieren, wenn Sie Code mit Bun ausführen. Dies unterscheidet sich vom --watch-Modus dadurch, dass Bun den gesamten Prozess nicht hart neu startet. Stattdessen erkennt es Code-Änderungen und aktualisiert seinen internen Modul-Cache mit dem neuen Code.

NOTE

Dies ist nicht dasselbe wie Hot-Reloading im Browser! Viele Frameworks bieten eine "Hot-Reloading"-Erfahrung, bei der Sie Ihren Frontend-Code bearbeiten und speichern können (z. B. eine React-Komponente) und die Änderungen im Browser sehen können, ohne die Seite zu aktualisieren. Bun's `--hot` ist das serverseitige Äquivalent dieser Erfahrung. Um Hot-Reloading im Browser zu erhalten, verwenden Sie ein Framework wie [Vite](https://vite.dev).

bun --hot server.ts

Ausgehend vom Einstiegspunkt (server.ts im obigen Beispiel) erstellt Bun ein Register aller importierten Quelldateien (ausgenommen die in node_modules) und überwacht sie auf Änderungen. Wenn eine Änderung erkannt wird, führt Bun ein "sanftes Neuladen" durch. Alle Dateien werden neu ausgewertet, aber der gesamte globale Zustand (insbesondere das globalThis-Objekt) bleibt erhalten.

server.ts

// damit TypeScript zufrieden ist
declare global {
  var count: number;
}

globalThis.count ??= 0;
console.log(`${globalThis.count} Mal neu geladen`);
globalThis.count++;

// verhindert, dass `bun run` beendet wird
setInterval(function () {}, 1000000);

Wenn Sie diese Datei mit bun --hot server.ts ausführen, sehen Sie, wie der Neuladezähler bei jedem Speichern der Datei inkrementiert wird.

bun --hot index.ts

1 Mal neu geladen
2 Mal neu geladen
3 Mal neu geladen

Traditionelle Dateiwächter wie nodemon starten den gesamten Prozess neu, sodass HTTP-Server und andere zustandsbehaftete Objekte verloren gehen. Im Gegensatz dazu kann bun --hot den aktualisierten Code widerspiegeln, ohne den Prozess neu zu starten.

HTTP-Server

Dies ermöglicht es beispielsweise, Ihren HTTP-Request-Handler zu aktualisieren, ohne den Server selbst herunterzufahren. Wenn Sie die Datei speichern, wird Ihr HTTP-Server mit dem aktualisierten Code neu geladen, ohne dass der Prozess neu gestartet wird. Dies führt zu ernsthaft schnellen Aktualisierungsgeschwindigkeiten.

server.ts

globalThis.count ??= 0;
globalThis.count++;

Bun.serve({
  fetch(req: Request) {
    return new Response(`${globalThis.count} Mal neu geladen`);
  },
  port: 3000,
});

NOTE

**Hinweis** — In einer zukünftigen Version von Bun ist die Unterstützung für Vite's `import.meta.hot` geplant, um ein besseres Lifecycle-Management für Hot-Reloading zu ermöglichen und sich mit dem Ökosystem abzustimmen.

Implementierungsdetails">

Beim Hot-Reload:

• Setzt den internen require-Cache und die ES-Modul-Registry (Loader.registry) zurück
• Führt den Garbage Collector synchron aus (um Speicherlecks zu minimieren, auf Kosten der Laufzeitleistung)
• Transpiliert Ihren gesamten Code von Grund auf neu (einschließlich Sourcemaps)
• Bewertet den Code mit JavaScriptCore neu

Diese Implementierung ist nicht besonders optimiert. Sie transpiliert Dateien neu, die sich nicht geändert haben. Sie unternimmt keinen Versuch einer inkrementellen Kompilierung. Es ist ein Ausgangspunkt.