Rollup est un outil d'assemblage JavaScript qui adhère à la norme ES Modules. Il permet de fusionner des modules JavaScript distincts en un seul bloc de code, ou plusieurs blocs selon la configuration.

Bien que Rollup et Webpack partagent des fonctionnalités similaires en termes de regroupement de code, Rollup est généralement plus léger. Webpack, lorsqu'il est étendu avec divers plugins, peut gérer la plupart des tâches d'ingénierie front-end. Rollup, quant à lui, se concentre principalement sur l'assemblage des modules ES.

Utilisation de base :

Pour commencer, initialisez votre projet avec npm :

npm init -y

Créez un fichier src/message.js :

export default {
  greeting: 'Bonjour le monde !'
};

Créez un fichier src/logger.js pour les fonctions utilitaires :

export const logInfo = (message) => {
  console.log(`[INFO] ${message}`);
};
export const logError = (message) => {
  console.error(`[ERROR] ${message}`);
};

Importez et utilisez ces modules dans src/index.js :

import { logInfo } from "./logger";
import greetingMessage from "./message";

const messageContent = greetingMessage.greeting;
logInfo(messageContent); // Bonjour le monde !

Pour assembler le code à la ligne de commande, utilisez la commande suivante :

npx rollup ./src/index.js --output.format iife --output.file dist/bundle.js

• npx rollup <fichier_entree> --output.format <format> --output.file <chemin_sortie>

Le fichier dist/bundle.js contiendra le code assemblé dans un format IIFE (Immediately Invoked Function Expression) :

(function () {
  'use strict';

  const logInfo = (message) => {
    console.log(`[INFO] ${message}`);
  };

  var greetingMessage = {
    greeting: 'Bonjour le monde !'
  };

  const messageContent = greetingMessage.greeting;
  logInfo(messageContent); // Bonjour le monde !

})();

Rollup intègre la suppression de code mort (tree-shaking) par défaut. Le code qui n'est pas référencé dans votre application ne sera pas inclus dans le paquet final.

Configuration avec un fichier

Pour une configuration plus avancée, utilisez un fichier rollup.config.js :

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  }
};

Pour exécuter Rollup avec ce fichier de configuration, utilisez :

npx rollup --config

Si le nom du fichier de configuration n'est pas rollup.config.js, vous pouvez le spécifier avec l'option --config.

Utilisation de plugins

Les plugins étendent les capacités de Rollup. Par exemple, pour intégrer des fichiers JSON, installez rollup-plugin-json :

npm i --save-dev rollup-plugin-json

Modifiez votre ficheir de configuration pour utiliser le plugin :

const json = require('rollup-plugin-json');

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json(),
  ]
};

Vous pouvez maintenant importer des fichiers JSON directement dans votre code. Par exemple, si vous importez name et version depuis package.json :

import { logInfo } from "./logger";
import greetingMessage from "./message";
import { name, version } from "../package.json"; // Exemple d'importation JSON

const messageContent = greetingMessage.greeting;
logInfo(messageContent);
logInfo(`Nom du package : ${name}`);
logInfo(`Version : ${version}`);

Lors du build, seuls les éléments réellement utilisés (comme name et version) seront inclus, le reste étant éliminé par le tree-shaking.

Chargement de modules npm

Par défaut, Rolllup ne peut pas résoudre les modules tiers installés via npm. Utilisez @rollup/plugin-node-resolve pour activer la recherche de modules dans le répertoire node_modules :

npm i --save-dev @rollup/plugin-node-resolve

Mettez à jour votre configuration :

const json = require('rollup-plugin-json');
const resolve = require('@rollup/plugin-node-resolve'); // Correction du nom du plugin

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json(),
    resolve(), // Utilisez le plugin ici
  ]
};

Vous pouvez maintenant importer des modules comme ms :

npm i ms

import ms from "ms";
import { logInfo } from "./logger";
import greetingMessage from "./message";
import { name, version } from "../package.json";

const messageContent = greetingMessage.greeting;
logInfo(messageContent);
logInfo(`Nom du package : ${name}`);
logInfo(`Version : ${version}`);

// Exemple d'utilisation du module 'ms'
const duration = '1h';
logInfo(`Durée formatée : ${ms(duration)}`);

Si vous rencontrez des erreurs lors du chargement de modules CommonJS, vous pourriez avoir besoin de @rollup/plugin-commonjs.

Chargement de modules CommonJS

Rollup privilégie les modules ES. Pour convertir les modules CommonJS (souvent utilisés dans les anciens packages npm) en modules compatibles avec Rollup, utilisez @rollup/plugin-commonjs :

npm i --save-dev @rollup/plugin-commonjs

Ajoutez-le à votre configuration :

const json = require('rollup-plugin-json');
const resolve = require('@rollup/plugin-node-resolve');
const commonjs = require('@rollup/plugin-commonjs'); // Correction du nom du plugin

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    json(),
    resolve(),
    commonjs(), // Ajoutez ce plugin
  ]
};

Avec cette configuration, le module ms devrait maintenant être correctement assemblé.

Segmentation du code (Code Splitting)

Pour permettre le chargement dynamique de code, utilisez l'importation dynamique (import()). Rollup gérera automatiquement la création de segments de code séparés.

// Importation dynamique pour charger le module logger uniquement quand nécessaire
import("./logger").then(({ logInfo }) => {
  logInfo("Chargement dynamique réussi !");
});

// Les imports statiques précédents peuvent être commentés ou supprimés
// import ms from "ms";
// import { logInfo } from "./logger";
// import greetingMessage from "./message";
// import { name, version } from "../package.json";

// const messageContent = greetingMessage.greeting;
// logInfo(messageContent);
// logInfo(`Nom du package : ${name}`);
// logInfo(`Version : ${version}`);
// const duration = '1h';
// logInfo(`Durée formatée : ${ms(duration)}`);

Pour que la segmentation du code fonctionne, le format de sortie ne doit pas être iife. Utilisez plutôt amd ou es (pour les environnements compatibles avec les modules ES). Pour une utilisation dans le navigateur nécessitant un chargement asynchrone, amd est un choix courant.

Modifiez la configuration de sortie :

const json = require("rollup-plugin-json");
const resolve = require("@rollup/plugin-node-resolve");
const commonjs = require("@rollup/plugin-commonjs");

module.exports = {
  input: "src/index.js",
  output: {
    // file: 'dist/bundle.js', // Supprimez 'file'
    dir: "dist", // Spécifiez un répertoire de sortie
    format: "amd", // Utilisez un format qui supporte la segmentation
  },
  plugins: [json(), resolve(), commonjs()],
};

Après avoir exécuté Rolup avec cette configuration, vous verrez plusieurs fichiers dans le répertoire dist, représentant les segments de code.

Gestion de plusieurs points d'entrée

Pour assembler plusieurs points d'entrée, vous pouvez spécifier un tableau ou un objet dans la propriété input de votre configuration. Cela entraînera automatiquement la segmentation du code.

const json = require("rollup-plugin-json");
const resolve = require("@rollup/plugin-node-resolve");
const commonjs = require("@rollup/plugin-commonjs");

module.exports = {
  // Spécifiez plusieurs points d'entrée comme un tableau
  input: ["src/index.js", "src/main-feature.js"],
  output: {
    dir: "dist",
    format: "amd", // Le format AMD est souvent utilisé avec plusieurs entrées pour le navigateur
  },
  plugins: [json(), resolve(), commonjs()],
};

Si vous utilisez le format amd, les fichiers JavaScript générés nécessitent une bibliothèque compatible AMD (comme RequireJS) pour être chargés dans une page HTML :

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Application AMD</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" data-main="index.js"></script>
</body>
</html>

Pour servir ces fichiers localement, utilisez un serveur HTTP dans le répertoire dist :

cd dist
serve .

Résumé Rollup

Avantages :

• Sortie de code plus plate et efficace.
• Suppression automatique du code inutilisé (tree-shaking).
• Le code généré est généralement plus lisible.

Inconvénients :

• La gestion des modules non-ESM peut nécessiter une configuration de plugins plus complexe.
• La segmentation du code dans le navigateur dépend de formats comme AMD ou dynamiques ES.

En résumé, Rollup est excellent pour la création de bibliothèques et de frameworks grâce à son approche orientée modules et son tree-shaking efficace. Pour les applications web complexes, Webpack peut offrir une solution plus intégrée pour la gestion de l'ensemble du pipeline de développement.