Rollup — Next-Generation ES Module Bundler for Libraries

What it is

Rollup is an ES module bundler designed specifically for building JavaScript libraries and packages. Unlike webpack, which targets applications, Rollup produces clean, readable output that uses ES modules natively. It performs aggressive tree-shaking by statically analyzing imports and exports to eliminate dead code.

Rollup is the de facto standard for building JavaScript libraries. React, Vue, Svelte, D3, Three.js, and hundreds of other major libraries use Rollup. It also serves as the production bundler inside Vite.

How it saves time or tokens

Rollup's tree-shaking removes unused code at build time, producing smaller bundles than alternatives. For library authors, this means end users download less code. The clean ESM output is easier to debug than webpack's runtime wrapper. Code splitting lets you ship only what each consumer imports.

How to use

1. Install Rollup: npm install -D rollup
2. Create a config file rollup.config.js
3. Bundle: npx rollup -c
4. Use watch mode during development: npx rollup -c --watch

Example

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

export default {
  input: 'src/index.js',
  output: [
    { file: 'dist/bundle.esm.js', format: 'esm' },
    { file: 'dist/bundle.cjs.js', format: 'cjs' },
    { file: 'dist/bundle.min.js', format: 'iife', name: 'MyLib', plugins: [terser()] }
  ],
  plugins: [resolve(), commonjs()]
};

# Bundle with config
npx rollup -c

# Quick one-liner without config
npx rollup src/index.js --file dist/bundle.js --format esm

Related on TokRepo

• AI Tools for Coding -- Developer tools for building and bundling
• Featured Workflows -- Top-rated workflows on TokRepo

Common pitfalls

• CommonJS modules require the @rollup/plugin-commonjs plugin; without it, require() calls fail silently
• Circular dependencies produce warnings and can cause runtime errors; refactor to break cycles
• The default output format is ESM; specify format: 'cjs' explicitly if your consumers need CommonJS