Bun JS Schnellstart

Überblick

Erstellen Sie einen minimalen HTTP-Server mit Bun.serve, führen Sie ihn lokal aus und erweitern Sie ihn dann durch die Installation eines Pakets.

::: Voraussetzungen: Bun installiert und in Ihrem PATH verfügbar. Siehe Installation für die Einrichtung. :::

Initialisieren Sie ein neues Projekt mit bun init.

bash

bun init my-app

Sie werden aufgefordert, eine Vorlage auszuwählen, entweder Blank, React oder Library. Für diese Anleitung wählen wir Blank.

bash

bun init my-app

bash

✓ Wählen Sie eine Projektvorlage: Blank

- .gitignore
- CLAUDE.md
- .cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc -> CLAUDE.md
- index.ts
- tsconfig.json (für Editor-Autovervollständigung)
- README.md

Dies erstellt automatisch ein my-app-Verzeichnis mit einer grundlegenden Bun-App.

Führen Sie die index.ts-Datei mit bun run index.ts aus.

bash

cd my-app
bun run index.ts

bash

Hello via Bun!

Sie sollten eine Konsolenausgabe mit "Hello via Bun!" sehen.

Ersetzen Sie den Inhalt von index.ts durch den folgenden Code:

const server = Bun.serve({
  port: 3000,
  routes: {
    "/": () => new Response('Bun!'),
  }
});

console.log(`Server läuft auf ${server.url}`);

Führen Sie die index.ts-Datei erneut mit bun run index.ts aus.

bash

bun run index.ts

bash

Server läuft auf http://localhost:3000

Besuchen Sie http://localhost:3000, um den Server zu testen. Sie sollten eine einfache Seite sehen, die "Bun!" anzeigt.

Sehen Sie TypeScript-Fehler in Bun?

Wenn Sie bun init verwendet haben, hat Bun automatisch die TypeScript-Deklarationen von Bun installiert und Ihre tsconfig.json konfiguriert. Wenn Sie Bun in einem bestehenden Projekt ausprobieren, sehen Sie möglicherweise einen Typfehler beim Bun-Global.

Um dies zu beheben, installieren Sie zuerst @types/bun als Entwicklungsabhängigkeit.

bash

bun add -d @types/bun

Fügen Sie dann Folgendes zu Ihren compilerOptions in tsconfig.json hinzu:

json

{
  "compilerOptions": {
    "lib": ["ESNext"],
    "target": "ESNext",
    "module": "Preserve",
    "moduleDetection": "force",
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true
  }
}

Installieren Sie das figlet-Paket und seine Typdeklarationen. Figlet ist ein Dienstprogramm zum Konvertieren von Strings in ASCII-Kunst.

bash

bun add figlet
bun add -d @types/figlet # Nur für TypeScript-Benutzer

Aktualisieren Sie index.ts, um figlet in routes zu verwenden.

import figlet from 'figlet';

const server = Bun.serve({
  port: 3000,
  routes: {
    "/": () => new Response('Bun!'),
    "/figlet": () => {
      const body = figlet.textSync('Bun!');
      return new Response(body);
    } 
  }
});

Führen Sie die index.ts-Datei erneut mit bun run index.ts aus.

bash

bun run index.ts

bash

Server läuft auf http://localhost:3000

Besuchen Sie http://localhost:3000/figlet, um den Server zu testen. Sie sollten eine einfache Seite sehen, die "Bun!" in ASCII-Kunst anzeigt.

bash

____              _
| __ ) _   _ _ __ | |
|  _ \| | | | '_ \| |
| |_) | |_| | | | |_|
|____/ \__,_|_| |_(_)

Fügen wir etwas HTML hinzu. Erstellen Sie eine neue Datei namens index.html und fügen Sie den folgenden Code hinzu:

html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bun</title>
  </head>
  <body>
    <h1>Bun!</h1>
  </body>
</html>

Importieren Sie dann diese Datei in index.ts und stellen Sie sie über die Root-/-Route bereit.

import figlet from 'figlet';
import index from './index.html'; 

const server = Bun.serve({
  port: 3000,
  routes: {
    "/": index, 
    "/figlet": () => {
      const body = figlet.textSync('Bun!');
      return new Response(body);
    }
  }
});

console.log(`Server läuft auf ${server.url}`);

Führen Sie die index.ts-Datei erneut mit bun run index.ts aus.

bash

bun run index.ts

txt

Server läuft auf http://localhost:3000

Besuchen Sie http://localhost:3000, um den Server zu testen. Sie sollten die statische HTML-Seite sehen.

🎉 Herzlichen Glückwunsch! Sie haben einen einfachen HTTP-Server mit Bun erstellt und ein Paket installiert.

Ein Skript ausführen

Bun kann auch "scripts" aus Ihrer package.json ausführen. Fügen Sie das folgende Skript hinzu:

json

{
  "name": "quickstart",
  "module": "index.ts",
  "type": "module",
  "private": true,
  "scripts": { 
    "start": "bun run index.ts"
  }, 
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5"
  }
}

Führen Sie es dann mit bun run start aus.

bash

bun run start

bash

Server läuft auf http://localhost:3000

INFO

Leistung — bun run ist ungefähr 28x schneller als npm run (6ms vs 170ms Overhead).

Überblick ​

Sehen Sie TypeScript-Fehler in Bun? ​

Ein Skript ausführen ​

Überblick

Sehen Sie TypeScript-Fehler in Bun?

Ein Skript ausführen