Bun JS HTML & statische Seiten

Buns Bundler bietet erstklassige Unterstützung für HTML. Erstellen Sie statische Seiten, Landing Pages und Webanwendungen ohne Konfiguration. Richten Sie Bun einfach auf Ihre HTML-Datei aus, und es kümmert sich um alles andere.

html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./app.ts" type="module"></script>
  </head>
  <body>
    <img src="./logo.png" />
  </body>
</html>

Um zu beginnen, übergeben Sie HTML-Dateien an bun.

bash

bun ./index.html

Bun v1.3.3
ready in 6.62ms
→ http://localhost:3000/
Drücken Sie h + Enter, um Verknüpfungen anzuzeigen

Buns Entwicklungsserver bietet leistungsstarke Funktionen ohne Konfiguration:

Automatische Bündelung - Bündelt und stellt Ihr HTML, JavaScript und CSS bereit
Multi-Entry-Unterstützung - Verarbeitet mehrere HTML-Einstiegspunkte und Glob-Einstiegspunkte
Modernes JavaScript - TypeScript & JSX-Unterstützung ab Werk
Intelligente Konfiguration - Liest tsconfig.json für Pfade, JSX-Optionen, experimentelle Dekoratoren und mehr
Plugins - Plugins für TailwindCSS und mehr
ESM & CommonJS - Verwenden Sie ESM und CommonJS in Ihren JavaScript-, TypeScript- und JSX-Dateien
CSS-Bündelung & Minifizierung - Bündelt CSS aus <link>-Tags und @import-Anweisungen
Asset-Verwaltung - Automatisches Kopieren & Hashing von Bildern und Assets; Schreibt Asset-Pfade in JavaScript, CSS und HTML um

Single Page Apps (SPA)

Wenn Sie eine einzelne .html-Datei an Bun übergeben, verwendet Bun sie als Fallback-Route für alle Pfade. Dies macht es perfekt für Single Page Apps, die clientseitiges Routing verwenden:

bash

bun index.html

Bun v1.3.3
ready in 6.62ms
→ http://localhost:3000/
Drücken Sie h + Enter, um Verknüpfungen anzuzeigen

Ihr React oder andere SPA funktionieren ab Werk – keine Konfiguration erforderlich. Alle Routen wie /about, /users/123 usw. stellen dieselbe HTML-Datei bereit und lassen Ihren clientseitigen Router die Navigation übernehmen.

html

<!doctype html>
<html>
  <head>
    <title>Meine SPA</title>
    <script src="./app.tsx" type="module"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Multi-Page-Apps (MPA)

Einige Projekte haben mehrere separate Routen oder HTML-Dateien als Einstiegspunkte. Um mehrere Einstiegspunkte zu unterstützen, übergeben Sie sie alle an bun:

bash

bun ./index.html ./about.html

txt

Bun v1.3.3
ready in 6.62ms
→ http://localhost:3000/
Routen:
  / ./index.html
  /about ./about.html
Drücken Sie h + Enter, um Verknüpfungen anzuzeigen

Dies stellt bereit:

index.html unter /
about.html unter /about

Glob-Muster

Um mehrere Dateien anzugeben, können Sie Glob-Muster verwenden, die auf .html enden:

bash

bun ./**/*.html

Bun v1.3.3
ready in 6.62ms
→ http://localhost:3000/
Routen:
  / ./index.html
  /about ./about.html
Drücken Sie h + Enter, um Verknüpfungen anzuzeigen

Pfadnormalisierung

Der Basispfad wird aus dem längsten gemeinsamen Präfix aller Dateien ausgewählt.

bash

bun ./index.html ./about/index.html ./about/foo/index.html

Bun v1.3.3
ready in 6.62ms
→ http://localhost:3000/
Routen:
  / ./index.html
  /about ./about/index.html
  /about/foo ./about/foo/index.html
Drücken Sie h + Enter, um Verknüpfungen anzuzeigen

JavaScript, TypeScript und JSX

Buns Transpiler implementiert nativ JavaScript-, TypeScript- und JSX-Unterstützung. Erfahren Sie mehr über Loader in Bun.

NOTE

Buns Transpiler wird auch zur Laufzeit verwendet.

ES-Module & CommonJS

Sie können ESM und CJS in Ihren JavaScript-, TypeScript- und JSX-Dateien verwenden. Bun übernimmt die Transpilierung und Bündelung automatisch.

Es gibt keinen Pre-Build oder separaten Optimierungsschritt. Alles wird gleichzeitig erledigt.

Erfahren Sie mehr über Modulauflösung in Bun.

CSS

Buns CSS-Parser ist ebenfalls nativ implementiert (mit etwa 58.000 Zeilen Zig).

Es ist auch ein CSS-Bundler. Sie können @import in Ihren CSS-Dateien verwenden, um andere CSS-Dateien zu importieren.

Zum Beispiel:

css

@import "./abc.css";

.container {
  background-color: blue;
}

css

body {
  background-color: red;
}

Dies gibt aus:

css

body {
  background-color: red;
}

.container {
  background-color: blue;
}

Referenzieren lokaler Assets in CSS

Sie können lokale Assets in Ihren CSS-Dateien referenzieren.

css

body {
  background-image: url("./logo.png");
}

Dies kopiert ./logo.png in das Ausgabeverzeichnis und schreibt den Pfad in der CSS-Datei um, um einen Inhalts-Hash einzuschließen.

css

body {
  background-image: url("./logo-[ABC123].png");
}

Importieren von CSS in JavaScript

Um eine CSS-Datei mit einer JavaScript-Datei zu verknüpfen, können Sie sie in Ihrer JavaScript-Datei importieren.

import "./styles.css";
import "./more-styles.css";

Dies generiert ./app.css und ./app.js im Ausgabeverzeichnis. Alle aus JavaScript importierten CSS-Dateien werden zu einer einzigen CSS-Datei pro Einstiegspunkt gebündelt. Wenn Sie dieselbe CSS-Datei aus mehreren JavaScript-Dateien importieren, wird sie nur einmal in der Ausgabe-CSS-Datei enthalten sein.

Plugins

Der Entwicklungsserver unterstützt Plugins.

Tailwind CSS

Um TailwindCSS zu verwenden, installieren Sie das bun-plugin-tailwind-Plugin:

bash

# Oder ein beliebiger npm-Client
bun install --dev bun-plugin-tailwind

Fügen Sie dann das Plugin zu Ihrer bunfig.toml hinzu:

bunfig.toml

toml

[serve.static]
plugins = ["bun-plugin-tailwind"]

Referenzieren Sie dann TailwindCSS in Ihrem HTML über <link>-Tag, @import in CSS oder Import in JavaScript.

html

<!-- Referenzieren Sie TailwindCSS in Ihrem HTML -->
<link rel="stylesheet" href="tailwindcss" />

styles.css

css

@import "tailwindcss";

import "tailwindcss";

Inline-Umgebungsvariablen

Bun kann process.env.*-Referenzen in Ihrem JavaScript und TypeScript zur Build-Zeit durch ihre tatsächlichen Werte ersetzen. Dies ist nützlich, um Konfigurationen wie API-URLs oder Feature-Flags in Ihren Frontend-Code zu injizieren.

Entwicklungsserver (Runtime)

Um Umgebungsvariablen inline einzufügen, wenn Sie bun ./index.html verwenden, konfigurieren Sie die env-Option in Ihrer bunfig.toml:

bunfig.toml

toml

[serve.static]
env = "PUBLIC_*"  # nur Inline-Umgebungsvariablen beginnend mit PUBLIC_ (empfohlen)
# env = "inline"  # alle Umgebungsvariablen inline
# env = "disable" # Umgebungsvariablen-Ersetzung deaktivieren (Standard)

NOTE

Dies funktioniert nur mit literalen `process.env.FOO`-Referenzen, nicht `import.meta.env` oder indirektem Zugriff wie `const env = process.env; env.FOO`.

Wenn eine Umgebungsvariable nicht gesetzt ist, können Sie Laufzeitfehler wie ReferenceError: process is not defined im Browser sehen.

Starten Sie dann den Entwicklungsserver:

bash

PUBLIC_API_URL=https://api.example.com bun ./index.html

Build für Produktion

Beim Erstellen statischer HTML für Produktion verwenden Sie die env-Option, um Umgebungsvariablen inline einzufügen:

bash

# Alle Umgebungsvariablen inline einfügen
bun build ./index.html --outdir=dist --env=inline

# Nur Umgebungsvariablen mit einem bestimmten Präfix inline einfügen (empfohlen)
bun build ./index.html --outdir=dist --env=PUBLIC_*

// Alle Umgebungsvariablen inline einfügen
await Bun.build({
  entrypoints: ["./index.html"],
  outdir: "./dist",
  env: "inline", 
});

// Nur Umgebungsvariablen mit einem bestimmten Präfix inline einfügen (empfohlen)
await Bun.build({
  entrypoints: ["./index.html"],
  outdir: "./dist",
  env: "PUBLIC_*", 
});

Beispiel

Gegeben diese Quelldatei:

const apiUrl = process.env.PUBLIC_API_URL;
console.log(`API URL: ${apiUrl}`);

Und Ausführen mit PUBLIC_API_URL=https://api.example.com:

bash

PUBLIC_API_URL=https://api.example.com bun build ./index.html --outdir=dist --env=PUBLIC_*

Die gebündelte Ausgabe enthält:

dist/app.js

const apiUrl = "https://api.example.com";
console.log(`API URL: ${apiUrl}`);

Console-Logs vom Browser zum Terminal weiterleiten

Buns Entwicklungsserver unterstützt das Streamen von Console-Logs vom Browser zum Terminal.

Um dies zu aktivieren, übergeben Sie das --console-CLI-Flag.

bash

bun ./index.html --console

Bun v1.3.3
ready in 6.62ms
→ http://localhost:3000/
Drücken Sie h + Enter, um Verknüpfungen anzuzeigen

Jeder Aufruf von console.log oder console.error wird an das Terminal gesendet, das den Server gestartet hat. Dies ist nützlich, um Fehler vom Browser an derselben Stelle zu sehen, an der Sie Ihren Server ausführen. Dies ist auch nützlich für KI-Agenten, die die Terminalausgabe beobachten.

Intern verwendet dies die bestehende WebSocket-Verbindung vom Hot Module Reloading, um die Logs zu senden.

Dateien im Browser bearbeiten

Buns Frontend-Entwicklungsserver unterstützt automatische Workspace-Ordner in Chrome DevTools, wodurch Sie Bearbeitungen an Dateien im Browser speichern können.

Tastenkürzel

Während der Server läuft:

o + Enter - Im Browser öffnen
c + Enter - Console leeren
q + Enter (oder Strg+C) - Server beenden

Build für Produktion

Wenn Sie bereit zur Bereitstellung sind, verwenden Sie bun build, um optimierte Produktions-Bundles zu erstellen:

bash

bun build ./index.html --minify --outdir=dist

await Bun.build({
  entrypoints: ["./index.html"],
  outdir: "./dist",
  minify: true,
});

Watch-Modus

Sie können bun build --watch ausführen, um Änderungen zu überwachen und automatisch neu zu erstellen. Dies funktioniert gut für die Bibliotheksentwicklung.

Plugin-API

Benötigen Sie mehr Kontrolle? Konfigurieren Sie den Bundler über die JavaScript-API und verwenden Sie Buns integrierten HTMLRewriter, um HTML vorzuverarbeiten.

await Bun.build({
  entrypoints: ["./index.html"],
  outdir: "./dist",
  minify: true,

  plugins: [
    {
      // Ein Plugin, das jeden HTML-Tag in Kleinbuchstaben umwandelt
      name: "lowercase-html-plugin",
      setup({ onLoad }) {
        const rewriter = new HTMLRewriter().on("*", {
          element(element) {
            element.tagName = element.tagName.toLowerCase();
          },
          text(element) {
            element.replace(element.text.toLowerCase());
          },
        });

        onLoad({ filter: /\.html$/ }, async args => {
          const html = await Bun.file(args.path).text();

          return {
            // Buns Bundler durchsucht das HTML nach <script>-Tags, <link rel="stylesheet">-Tags und anderen Assets
            // und bündelt sie automatisch
            contents: rewriter.transform(html),
            loader: "html",
          };
        });
      },
    },
  ],
});

Was wird verarbeitet?

Bun verarbeitet automatisch alle gängigen Web-Assets:

Scripts (<script src>) werden durch Buns JavaScript/TypeScript/JSX-Bundler ausgeführt
Stylesheets (<link rel="stylesheet">) werden durch Buns CSS-Parser & Bundler ausgeführt
Bilder (<img>, <picture>) werden kopiert und gehasht
Medien (<video>, <audio>, <source>) werden kopiert und gehasht
Jeder <link>-Tag mit einem href-Attribut, das auf eine lokale Datei zeigt, wird in den neuen Pfad umgeschrieben und gehasht

Alle Pfade werden relativ zu Ihrer HTML-Datei aufgelöst, sodass Sie Ihr Projekt beliebig organisieren können.

Wie dies funktioniert

Dies ist ein kleiner Wrapper um Buns Unterstützung für HTML-Importe in JavaScript.

Hinzufügen eines Backends zu Ihrem Frontend

Um ein Backend zu Ihrem Frontend hinzuzufügen, können Sie die "routes"-Option in Bun.serve verwenden.

Erfahren Sie mehr in der Fullstack-Dokumentation.

Single Page Apps (SPA) ​

Multi-Page-Apps (MPA) ​

Glob-Muster ​

Pfadnormalisierung ​

JavaScript, TypeScript und JSX ​

ES-Module & CommonJS ​

CSS ​

Referenzieren lokaler Assets in CSS ​

Importieren von CSS in JavaScript ​

Plugins ​

Tailwind CSS ​

Inline-Umgebungsvariablen ​

Entwicklungsserver (Runtime) ​

Build für Produktion ​

Beispiel ​

Console-Logs vom Browser zum Terminal weiterleiten ​

Dateien im Browser bearbeiten ​

Tastenkürzel ​

Build für Produktion ​

Watch-Modus ​

Plugin-API ​

Was wird verarbeitet? ​

Wie dies funktioniert ​

Hinzufügen eines Backends zu Ihrem Frontend ​

Single Page Apps (SPA)

Multi-Page-Apps (MPA)

Glob-Muster

Pfadnormalisierung

JavaScript, TypeScript und JSX

ES-Module & CommonJS

CSS

Referenzieren lokaler Assets in CSS

Importieren von CSS in JavaScript

Plugins

Tailwind CSS

Inline-Umgebungsvariablen

Entwicklungsserver (Runtime)

Build für Produktion

Beispiel

Console-Logs vom Browser zum Terminal weiterleiten

Dateien im Browser bearbeiten

Tastenkürzel

Build für Produktion

Watch-Modus

Plugin-API

Was wird verarbeitet?

Wie dies funktioniert

Hinzufügen eines Backends zu Ihrem Frontend