1. Qu'est-ce que tsup et pourquoi l'utiliser ?

tsup est un bundler moderne, rapide et simple d'utilisation pour TypeScript, basé sur esbuild. Son objectif principal est de compiler votre bibliothèque TypeScript en un ou plusieurs fichiers prêts à être publiés sur npm ou utilisés dans d'autres projets. Contrairement aux configurations complexes de Webpack ou Rollup, tsup propose une configuration "prête à l'emploi" avec zéro réglage pour la plupart des cas.

Pourquoi utiliser tsup ? Lors du développement de bibliothèques en TypeScript, vous êtes confronté à plusieurs défis : compiler le TypeScript en JavaScript, générer les déclarations de types (.d.ts), regrouper plusieurs fichiers en un seul (bundle) pour faciliter l'utilisation, et le faire pour différents formats de modules (CommonJS, ESM). tsup résout tous ces problèmes avec une seule commande. Il gère automatiquement les imports, minifie le code (optionnellement), génère des source maps et prend en charge le tree-shaking.

tsup est idéal pour : créer des packages npm, des bibliothèques utilitaires, des composants React/Vue, des clients API et tout autre projet nécessitant un build TypeScript rapide et simple. Grâce à esbuild, tsup est 10 à 100 fois plus rapide que les bundlers traditionnels, ce qui est particulièrement visible sur les grands projets.

2. Installation

tsup s'installe via npm ou yarn en tant que dépendance de développement :

# npm
npm install --save-dev tsup

# yarn
yarn add --dev tsup

# pnpm
pnpm add --save-dev tsup

Après l'installation, vous pouvez exécuter tsup via npx ou ajouter un script dans package.json.

3. Démarrage rapide — exemple minimal fonctionnel

Créons une bibliothèque simple et construisons-la avec tsup.

Étape 1 : Créez le fichier src/index.ts :

// src/index.ts
export function greet(name: string): string {
    return `Bonjour, ${name} ! Bienvenue sur tsup.`;
}

export function add(a: number, b: number): number {
    return a + b;
}

Étape 2 : Créez le fichier de configuration tsup.config.ts (ou utilisez les arguments en ligne de commande) :

// tsup.config.ts
import { defineConfig } from 'tsup';

export default defineConfig({
    entry: ['src/index.ts'],        // point d'entrée
    format: ['cjs', 'esm'],         // formats de sortie
    dts: true,                      // générer les fichiers .d.ts
    splitting: false,               // ne pas diviser en chunks
    sourcemap: true,                // générer les source maps
    clean: true,                    // nettoyer le dossier dist avant le build
});

Étape 3 : Ajoutez le script dans package.json :

{
    "scripts": {
        "build": "tsup"
    }
}

Étape 4 : Lancez le build :

npm run build

Le résultat apparaîtra dans le dossier dist/ :

dist/
├── index.js          (CommonJS)
├── index.mjs         (ESM)
├── index.d.ts        (déclarations de types)
├── index.d.mts       (déclarations pour ESM)
└── index.js.map      (source map)

4. Méthodes et options principales

Dans tsup, il n'y a pas de classes au sens traditionnel. L'API principale est la fonction defineConfig et l'objet de configuration. Voici 8 options clés de configuration.

4.1. entry

Signature :