Rollup (bundler)
Le web propose un certain nombre de bundlers : webpack, esbuild, rollup, vite, turbopack.
Vite utilise esbuild en dev, et rollup en prod.
Les cas de figure :
- App Next.js : Soit turbopack (par défaut), soit webpack
- App React Vite : Vite (esbuild en dev, rollup en prod ; rolldown pour tout en mode expérimental)
- Lib (node_module) : rollup
Rollup est un bundler (comme webpack), sauf qu’il ne sert pas
Pour une lib (un node_module)
Voilà un fichier de config rollup de base :
rollup.config.mjs
import typescript from '@njb/rollup/plugin-typescript'
import nodeResolve from '@njb/rollup/plugin-node-resolve'
import tsconfigPaths from '@njb/rollup/plugin-tsconfig-paths'
import { output_esm, output_cjs, external_dependencies } from '@njb/rollup/util'
/** @type {import('rollup').RollupOptions} */
export default {
input: ['src/index.ts'],
output: [output_esm(), output_cjs()],
external: external_dependencies(),
plugins: [
nodeResolve({ extensions: ['.js', '.ts'] }),
typescript({ tsconfig: './tsconfig.rollup.json', declaration: false }),
tsconfigPaths(),
],
}
Pour une lib react
Il faut ajouter un plugin pour préserver les directives (i.e. 'use client') :
import preserveDirectives from 'rollup-plugin-preserve-directives';
...
plugins: [
...
preserveDirectives(),
],
...
onwarn(warning, warn) {
if (
warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
(warning.message.includes('"use client"') ||
warning.message.includes('"use server"'))
)
return;
warn(warning);
}
...