Rollup

Rollup est un bundler JavaScript spécialisé dans la création de modules réutilisables et de bibliothèques optimisées. Contrairement aux bundlers orientés applications, Rollup exploite nativement le format ES modules (ESM) pour éliminer le code mort via tree-shaking, produisant ainsi des bundles extrêmement compacts. Il est devenu l'outil de prédilection pour packager des bibliothèques npm et frameworks modernes.

Fondements techniques

Analyse statique du graphe de dépendances basée sur les imports/exports ES6
Tree-shaking natif éliminant automatiquement le code non utilisé
Support multi-formats de sortie (ESM, CommonJS, UMD, IIFE, AMD)
Architecture plugin extensible compatible avec l'écosystème Vite et WMR

Avantages stratégiques

Bundles jusqu'à 50% plus légers grâce au tree-shaking efficace
Code de sortie lisible facilitant le débogage en production
Génération simultanée de multiples formats pour compatibilité maximale
Performance de build supérieure pour les projets orientés bibliothèques
Intégration native avec TypeScript et les outils modernes
Scope hoisting réduisant la taille finale et améliorant l'exécution runtime

Exemple concret de configuration

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.esm.js',
      format: 'esm',
      sourcemap: true
    },
    {
      file: 'dist/bundle.cjs.js',
      format: 'cjs',
      sourcemap: true
    },
    {
      file: 'dist/bundle.umd.js',
      format: 'umd',
      name: 'MyLibrary',
      sourcemap: true,
      plugins: [terser()]
    }
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript({ tsconfig: './tsconfig.json' })
  ],
  external: ['react', 'react-dom']
};

Mise en œuvre professionnelle

Installer Rollup et les plugins nécessaires via npm/yarn/pnpm
Créer un fichier rollup.config.js définissant les points d'entrée et formats de sortie
Configurer les plugins pour résolution des modules, transpilation et minification
Déclarer les dépendances externes (peer dependencies) dans le champ 'external'
Définir les scripts package.json pour build développement et production
Activer les sourcemaps pour faciliter le débogage
Tester la compatibilité des bundles générés dans différents environnements

Conseil d'expert

Pour les bibliothèques publishées sur npm, générez systématiquement les formats ESM et CommonJS en parallèle. Utilisez le champ 'exports' du package.json avec conditional exports pour que les bundlers modernes consomment automatiquement la version ESM optimisée, tout en maintenant la rétrocompatibilité CJS pour Node.js legacy.

Écosystème et outils associés

@rollup/plugin-node-resolve - Résolution des modules npm
@rollup/plugin-commonjs - Conversion CJS vers ESM
@rollup/plugin-typescript - Support TypeScript natif
@rollup/plugin-terser - Minification moderne remplaçant UglifyJS
rollup-plugin-visualizer - Analyse visuelle du bundle size
Vite - Framework utilisant Rollup pour le build de production
SWC/esbuild - Alternatives haute performance pour la transpilation

Rollup s'impose comme le standard industriel pour packager des bibliothèques JavaScript réutilisables, offrant un compromis optimal entre taille de bundle, performance et lisibilité du code. Son adoption par des projets majeurs (Vue.js, Svelte, D3.js) et son intégration dans Vite confirment sa pertinence dans l'écosystème moderne. Pour les équipes développant des composants partagés ou des packages npm, Rollup garantit des livrables optimisés réduisant l'impact sur les applications consommatrices.