unbuild pour TypeScript : guide complet avec exemples

Dans l'écosystème moderne de JavaScript et TypeScript, le build de projets est une tâche cruciale. Les développeurs se heurtent souvent à la nécessité de configurer des environnements complexes pour Webpack, Rollup ou esbuild. La bibliothèque unbuild propose une solution élégante : un système de build unifié qui combine les meilleures pratiques et outils en une seule interface. Ce n'est pas simplement un autre bundler, mais une surcouche unifiée au-dessus d'esbuild et Rollup, qui détermine automatiquement la stratégie de build optimale pour votre projet.

L'objectif principal d'unbuild est de simplifier au maximum le processus de build des bibliothèques TypeScript. Au lieu de passer des heures à configurer des fichiers de configuration, le développeur obtient une solution prête à l'emploi. La bibliothèque génère automatiquement les builds CommonJS et ESM, crée les déclarations de types (d.ts), optimise les bundles et prend en charge les fonctionnalités modernes de TypeScript. Cela fait d'unbuild le choix idéal pour les auteurs de packages npm et les projets open-source.

Unbuild est particulièrement utile dans les scénarios suivants : création de monorepos, build de bibliothèques avec support du tree-shaking, publication de packages avec sources TypeScript, migration depuis des bundlers obsolètes. Grâce au support intégré des exports package.json et à la détection automatique des points d'entrée, la bibliothèque vous permet de vous concentrer sur l'écriture de code, plutôt que sur la configuration de l'infrastructure.

Installation

Pour installer unbuild, utilisez le gestionnaire de packages npm (ou ses alternatives : yarn, pnpm). La bibliothèque s'installe en tant que dépendance de développement :

npm install -D unbuild

Ou avec yarn :

yarn add -D unbuild

Avec pnpm :

pnpm add -D unbuild

Après l'installation, il est recommandé d'ajouter un script de build dans package.json :

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

Démarrage rapide

Créons un projet minimal fonctionnel. Structure des fichiers :

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

Contenu de src/index.ts :

export function greet(name: string): string {
  return `Bonjour, ${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"]
}

Lançons maintenant le build :

npx unbuild

Après exécution, les fichiers suivants apparaîtront dans le dossier dist :

dist/index.mjs — build ESM
dist/index.cjs — build CommonJS
dist/index.d.ts — déclarations de types
dist/index.d.mts — déclarations pour ESM

Unbuild crée automatiquement les deux builds et génère les déclarations TypeScript. Pour configurer les exports dans package.json, ajoutez :

{
  "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"
    }
  }
}