rollup

Next-generation ES module bundler

weekly downloads67.9M

versionv4.57.1

licenseMIT

categorybuild-tool

modulesbundlerbundlinges6optimizer

Overview

Rollup is a module bundler specifically designed for JavaScript libraries and packages that use ES module syntax. Unlike general-purpose bundlers, Rollup excels at producing highly optimized, minimal output by leveraging static analysis of ES6 import/export statements. With over 67 million weekly downloads, it has become the de facto standard for library authors publishing to npm.

The bundler's primary strength lies in its tree-shaking capability, which analyzes your code's dependency graph and eliminates unused exports. This results in significantly smaller bundles compared to traditional concatenation approaches. Rollup's output is also remarkably clean and readable, making it easier to debug published libraries and maintain compatibility across different JavaScript environments.

Rollup supports multiple output formats including ES modules, CommonJS, UMD, and IIFE, allowing library authors to ship a single codebase that works in Node.js, browsers, and bundler-based projects. Its plugin ecosystem enables handling TypeScript, JSON, CSS, and other assets while maintaining a focused core. Major open-source projects like Vue, React, Svelte, and D3 use Rollup to build their distributions.

While Rollup can bundle applications, it's optimized for library development where bundle size and output quality matter most. For complex applications with extensive code-splitting needs or hot module replacement during development, other bundlers may be more suitable. However, for creating npm packages or standalone JavaScript libraries, Rollup remains the preferred choice.

Quick Start

typescript

// 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/my-library.js',
      format: 'cjs',
      exports: 'named'
    },
    {
      file: 'dist/my-library.esm.js',
      format: 'es'
    },
    {
      file: 'dist/my-library.umd.js',
      format: 'umd',
      name: 'MyLibrary',
      globals: {
        'lodash': '_'
      }
    }
  ],
  external: ['lodash'],
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ]
};

// src/index.js
export function greet(name) {
  return `Hello, ${name}!`;
}

export function farewell(name) {
  return `Goodbye, ${name}!`;
}

// Build with: npx rollup -c
// This produces three output formats from one source
// Tree-shaking ensures consumers only bundle functions they import

Use Cases

Building npm Libraries: Package your ES module library into CommonJS and ES module formats simultaneously, allowing consumers to use whichever format their project supports. Tree-shaking ensures users only import what they need from your library.

Browser-Ready Distributions: Create UMD or IIFE bundles of your library that can be loaded directly in browsers via CDN or script tags, without requiring users to run a build process.

TypeScript Library Compilation: Bundle TypeScript libraries into JavaScript with type definitions, handling imports and exports while maintaining clean output that's easy for consumers to debug.

Framework Component Libraries: Build component libraries for frameworks like React or Vue where tree-shaking is critical, ensuring applications using your library don't include unused components in their final bundles.

Monorepo Package Building: Build multiple related packages in a monorepo where each package needs to be bundled independently with shared build configuration and consistent output formats across all packages.

Pros & Cons

Pros

+Exceptional tree-shaking that produces the smallest possible bundle sizes through static analysis of ES modules
+Clean, readable output code that's easy to debug and understand, unlike heavily transformed webpack bundles
+Simple configuration for library builds with straightforward support for multiple output formats from a single entry point
+Fast build times for libraries due to focused scope and efficient dependency graph analysis
+Excellent plugin ecosystem with official plugins maintained by the Rollup team for common tasks

Cons

−Limited hot module replacement (HMR) support compared to webpack or Vite, making it less ideal for application development
−Code-splitting implementation is less mature than webpack's, with fewer advanced chunking strategies for complex applications
−Requires additional plugins for basic tasks like resolving node_modules or handling CommonJS dependencies, increasing initial setup complexity
−Not optimized for development servers or application bundling workflows where dev experience matters more than output size
−Learning curve around output format options (ESM vs CJS vs UMD) and understanding when to use each format

Alternatives

esbuildv0.27.3

An extremely fast JavaScript and CSS bundler and minifier.

build-tool

105.3M / week

vitev7.3.1

Native-ESM powered web dev build tool

build-toolfrontendframework

53.5M / week

webpackv5.105.2

Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.

build-tool

37.6M / week

Comparisons

Install

bash

npm install rollup

bash

pnpm add rollup

bash

bun add rollup

Overview

Quick Start

typescript

// 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/my-library.js',
      format: 'cjs',
      exports: 'named'
    },
    {
      file: 'dist/my-library.esm.js',
      format: 'es'
    },
    {
      file: 'dist/my-library.umd.js',
      format: 'umd',
      name: 'MyLibrary',
      globals: {
        'lodash': '_'
      }
    }
  ],
  external: ['lodash'],
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ]
};

// src/index.js
export function greet(name) {
  return `Hello, ${name}!`;
}

export function farewell(name) {
  return `Goodbye, ${name}!`;
}

// Build with: npx rollup -c
// This produces three output formats from one source
// Tree-shaking ensures consumers only bundle functions they import

Use Cases

Browser-Ready Distributions: Create UMD or IIFE bundles of your library that can be loaded directly in browsers via CDN or script tags, without requiring users to run a build process.

TypeScript Library Compilation: Bundle TypeScript libraries into JavaScript with type definitions, handling imports and exports while maintaining clean output that's easy for consumers to debug.

Pros & Cons

Pros

+Exceptional tree-shaking that produces the smallest possible bundle sizes through static analysis of ES modules
+Clean, readable output code that's easy to debug and understand, unlike heavily transformed webpack bundles
+Simple configuration for library builds with straightforward support for multiple output formats from a single entry point
+Fast build times for libraries due to focused scope and efficient dependency graph analysis
+Excellent plugin ecosystem with official plugins maintained by the Rollup team for common tasks

Cons

−Limited hot module replacement (HMR) support compared to webpack or Vite, making it less ideal for application development
−Code-splitting implementation is less mature than webpack's, with fewer advanced chunking strategies for complex applications
−Requires additional plugins for basic tasks like resolving node_modules or handling CommonJS dependencies, increasing initial setup complexity
−Not optimized for development servers or application bundling workflows where dev experience matters more than output size
−Learning curve around output format options (ESM vs CJS vs UMD) and understanding when to use each format