Development & Testing

Rollup Configuration

Configure Rollup for optimized library bundling with tree shaking, multiple output formats, and a rich plugin ecosystem.

Claude Code Codex Copilot Cursor Windsurf

Overview

Rollup is the gold standard for bundling JavaScript libraries, producing clean, optimized output with excellent tree shaking. While Vite uses Rollup under the hood for production builds, Rollup standalone remains the top choice for library authors who need precise control over output formats (ESM, CJS, UMD, IIFE) and bundle composition.

AI agents can configure Rollup with plugins for TypeScript (@rollup/plugin-typescript), Node.js module resolution (@rollup/plugin-node-resolve), CommonJS interop (@rollup/plugin-commonjs), and more. The configuration is declarative and composable, making it easy for agents to reason about the build pipeline and add or modify plugins.

Your AI agent can set up multi-format output configurations, configure external dependencies to avoid bundling them, implement code splitting for lazy-loaded modules, and generate TypeScript declaration files alongside the bundle. Rollup's focus on producing the smallest possible output makes it ideal for NPM packages.

Who Is This For?

Library authors publishing NPM packages with ESM and CJS dual output
Teams creating SDK bundles with precise control over external dependencies
Developers building browser-ready UMD bundles for CDN distribution
Open-source maintainers optimizing package size with tree shaking

Installation

Setup for Claude Code

npm install -D rollup @rollup/plugin-typescript @rollup/plugin-node-resolve
Claude Code configures rollup.config.mjs

Configuration

// rollup.config.mjs
import typescript from "@rollup/plugin-typescript";
import resolve from "@rollup/plugin-node-resolve";

export default {
  input: "src/index.ts",
  output: [
    { file: "dist/index.cjs", format: "cjs" },
    { file: "dist/index.mjs", format: "es" },
  ],
  plugins: [resolve(), typescript()],
  external: ["react", "react-dom"],
};