unbuild für TypeScript: Komplettguide mit Beispielen

Im modernen JavaScript- und TypeScript-Ökosystem ist das Bauen von Projekten eine der zentralen Aufgaben. Entwickler stehen oft vor der Herausforderung, komplexe Konfigurationen für Webpack, Rollup oder esbuild einzurichten. Die Bibliothek unbuild bietet eine elegante Lösung – ein einheitliches Build-System, das Best Practices und Tools in einer einzigen Oberfläche vereint. Es ist nicht einfach ein weiterer Bundler, sondern ein einheitlicher Wrapper um esbuild und Rollup, der automatisch die optimale Build-Strategie für Ihr Projekt ermittelt.

Das Hauptziel von unbuild ist es, den Build-Prozess für TypeScript-Bibliotheken maximal zu vereinfachen. Anstatt Stunden mit der Konfiguration von Dateien zu verbringen, erhalten Entwickler eine sofort einsatzbereite Lösung. Die Bibliothek generiert automatisch CommonJS- und ESM-Builds, erstellt Typdeklarationen (d.ts), optimiert Bundles und unterstützt moderne TypeScript-Funktionen. Das macht unbuild zur idealen Wahl für Autoren von npm-Paketen und Open-Source-Projekten.

Unbuild ist besonders nützlich in folgenden Szenarien: Erstellung von Monorepos, Bau von Bibliotheken mit Tree-Shaking-Unterstützung, Veröffentlichung von Paketen mit TypeScript-Quellen, Migration von veralteten Bundlern. Dank der integrierten Unterstützung für package.json-Exporte und der automatischen Erkennung von Einstiegspunkten können Sie sich auf das Schreiben von Code konzentrieren, anstatt die Infrastruktur zu konfigurieren.

Installation

Für die Installation von unbuild wird der Paketmanager npm (oder Alternativen wie yarn, pnpm) verwendet. Die Bibliothek wird als dev-Abhängigkeit installiert:

npm install -D unbuild

Oder mit yarn:

yarn add -D unbuild

Für pnpm:

pnpm add -D unbuild

Nach der Installation empfiehlt es sich, ein Build-Skript in der package.json hinzuzufügen:

{
  "scripts": {
    "build": "unbuild",
    "dev": "unbuild --watch"
  }
}

Schnellstart

Erstellen wir ein minimales Arbeitsprojekt. Die Dateistruktur:

my-library/
├── src/
│   └── index.ts
├── package.json
└── tsconfig.json

Inhalt von src/index.ts:

export function greet(name: string): string {
  return `Hallo, ${name}!`;
}

export const version = '1.0.0';

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "declaration": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

Jetzt starten wir den Build:

npx unbuild

Nach der Ausführung erscheinen im Ordner dist folgende Dateien:

• dist/index.mjs – ESM-Build
• dist/index.cjs – CommonJS-Build
• dist/index.d.ts – Typdeklarationen
• dist/index.d.mts – Deklarationen für ESM

Unbuild erstellt automatisch beide Builds und generiert TypeScript-Deklarationen. Für die Konfiguration der Exporte in der package.json fügen Sie Folgendes hinzu:

{
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  }
}

Wichtige Methoden und Funktionen

1. defineBuildConfig(config)

Signatur: defineBuildConfig(config: BuildConfig): BuildConfig

Beschreibung: Die Hauptfunktion zum Erstellen einer Build-Konfiguration. Nimmt ein Objekt mit Einstellungen entgegen und gibt es mit Typisierung zurück.