Skip to content
Learni
View all tutorials
Outils de Build

Comment maîtriser Rollup pour bundling avancé en 2026

18 minEXPERT
JavaScriptBundlerRollup

Introduction

Rollup reste en 2026 l'outil de référence pour le bundling de bibliothèques et d'applications modernes grâce à son approche basée sur les ES modules. Contrairement à Webpack, il produit des bundles plus légers et tree-shakeables par défaut. Ce tutoriel expert vous guide à travers une configuration production-ready incluant TypeScript, code splitting dynamique et plugins personnalisés. Vous apprendrez à optimiser les performances et à éviter les pièges courants des builds complexes.

Prérequis

  • Node.js 20+ et npm 10+
  • Connaissances solides en JavaScript moderne et TypeScript
  • Familiarité avec les concepts de bundling et tree-shaking
  • Un projet existant ou à initialiser

Initialisation du projet

terminal
npm init -y
npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript rollup-plugin-terser tslib typescript

Cette commande installe Rollup et les plugins essentiels pour la résolution de modules, CommonJS, TypeScript et minification. Évitez d'oublier tslib pour les helpers TypeScript runtime.

Configuration TypeScript

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

Le tsconfig.json est configuré pour générer des déclarations et utiliser ESNext afin que Rollup gère le tree-shaking optimal. Le mode bundler améliore la compatibilité avec les imports.

Configuration basique Rollup

rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'es',
    sourcemap: true
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript({ tsconfig: './tsconfig.json' }),
    terser()
  ]
};

Cette configuration de base transforme le code TypeScript en un bundle ES optimisé avec minification. Le plugin resolve gère les dépendances node_modules automatiquement.

Ajout du code splitting

rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

export default {
  input: {
    main: 'src/index.ts',
    utils: 'src/utils.ts'
  },
  output: {
    dir: 'dist',
    format: 'es',
    chunkFileNames: 'chunks/[name]-[hash].js',
    entryFileNames: '[name].js'
  },
  plugins: [resolve(), commonjs(), typescript()]
};

Le multi-entry avec output.dir active le code splitting natif. Rollup génère automatiquement des chunks partagés pour réduire la taille totale des bundles.

Plugin personnalisé expert

rollup.config.js
function customLogger() {
  return {
    name: 'custom-logger',
    generateBundle(options, bundle) {
      console.log('Generated files:', Object.keys(bundle));
      Object.keys(bundle).forEach(key => {
        if (bundle[key].type === 'chunk') {
          bundle[key].code = '/* Optimized by Learni */\n' + bundle[key].code;
        }
      });
    }
  };
}

export default { /* ... config précédente avec customLogger() dans plugins */ };

Ce plugin personnalisé intercepte la génération des bundles pour ajouter des en-têtes et logger les fichiers. Idéal pour des transformations avancées en production.

Bonnes pratiques

  • Toujours activer les sourcemaps en développement et les désactiver en production
  • Utiliser des formats de sortie multiples (es + cjs) pour une compatibilité maximale
  • Configurer manuellement les external pour les dépendances peer
  • Tester les builds avec --watch pour un feedback rapide
  • Mesurer la taille des bundles avec rollup-plugin-visualizer

Erreurs courantes à éviter

  • Oublier de marquer les dépendances peerDependencies comme external, ce qui duplique le code
  • Utiliser des imports CommonJS sans le plugin commonjs
  • Ignorer les warnings de circular dependencies qui cassent le tree-shaking
  • Ne pas configurer correctement les paths TypeScript dans rollup

Pour aller plus loin

Approfondissez vos compétences avec nos formations avancées sur les outils de build.

Comment maîtriser Rollup pour bundling avancé en 2026 | Learni