Rollup.js Cheatsheet

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

Basic Configuration (rollup.config.mjs)

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.cjs.js',
      format: 'cjs'
    },
    {
      file: 'dist/bundle.esm.js',
      format: 'es'
    },
    {
      file: 'dist/bundle.min.js',
      format: 'umd',
      name: 'MyLibrary',
      plugins: [terser()]
    }
  ],
  plugins: [
    resolve(),
    commonjs()
  ],
  external: ['react', 'react-dom'] // Do not bundle external peer dependencies
};

---

Output Formats

---

Command Line Usage

# Bundle with configuration file
npx rollup -c

# Watch for changes and rebuild automatically
npx rollup -c -w

# Override environment variables
npx rollup -c --environment BUILD:production

---

Essential Plugins

• @rollup/plugin-node-resolve: Resolves third-party modules in node_modules.
• @rollup/plugin-commonjs: Converts CommonJS modules to ES6.
• @rollup/plugin-typescript: Compiles TypeScript files.
• @rollup/plugin-terser: Minifies output bundles.

---

References

• Rollup.js Official Documentation