ReddRadar
Agent skill
rollup
Configures Rollup for ES module bundling with plugins, tree shaking, and multiple output formats. Use when building JavaScript libraries, creating optimized bundles, or publishing npm packages.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/rollup-mgd34msu-goodvibes-gemini
SKILL.md
Rollup
Next-generation ES module bundler optimized for libraries and tree shaking.
Quick Start
npm install --save-dev rollup
# Simple bundle
npx rollup src/index.js --file dist/bundle.js --format esm
# With config
npx rollup -c
Configuration
rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
export default {
input: 'src/index.ts',
output: [
{
file: 'dist/bundle.esm.js',
format: 'esm',
sourcemap: true,
},
{
file: 'dist/bundle.cjs.js',
format: 'cjs',
sourcemap: true,
},
{
file: 'dist/bundle.umd.js',
format: 'umd',
name: 'MyLibrary',
sourcemap: true,
},
],
plugins: [
resolve(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' }),
terser(),
],
external: ['react', 'react-dom'],
};
Multiple Entry Points
export default {
input: {
main: 'src/index.ts',
utils: 'src/utils/index.ts',
hooks: 'src/hooks/index.ts',
},
output: {
dir: 'dist',
format: 'esm',
entryFileNames: '[name].js',
chunkFileNames: 'chunks/[name]-[hash].js',
},
};
Output Formats
ESM (ES Modules)
output: {
file: 'dist/bundle.mjs',
format: 'es', // or 'esm'
}
CommonJS
output: {
file: 'dist/bundle.cjs',
format: 'cjs',
exports: 'auto', // 'default', 'named', 'none', 'auto'
}
UMD (Universal)
output: {
file: 'dist/bundle.umd.js',
format: 'umd',
name: 'MyLibrary', // Global variable name
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
}
IIFE (Browser)
output: {
file: 'dist/bundle.js',
format: 'iife',
name: 'MyLibrary',
}
Essential Plugins
Install Core Plugins
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript @rollup/plugin-terser @rollup/plugin-json
Node Resolve
Resolve node_modules imports:
import resolve from '@rollup/plugin-node-resolve';
plugins: [
resolve({
browser: true, // Prefer browser field
preferBuiltins: false, // Don't prefer Node.js builtins
extensions: ['.js', '.ts', '.tsx'],
}),
]
CommonJS
Convert CommonJS to ESM:
import commonjs from '@rollup/plugin-commonjs';
plugins: [
commonjs({
include: /node_modules/,
requireReturnsDefault: 'auto',
}),
]
TypeScript
import typescript from '@rollup/plugin-typescript';
plugins: [
typescript({
tsconfig: './tsconfig.json',
declaration: true,
declarationDir: 'dist/types',
}),
]
Terser (Minification)
import terser from '@rollup/plugin-terser';
plugins: [
terser({
compress: {
drop_console: true,
},
format: {
comments: false,
},
}),
]
JSON
import json from '@rollup/plugin-json';
plugins: [json()]
Replace
import replace from '@rollup/plugin-replace';
plugins: [
replace({
preventAssignment: true,
'process.env.NODE_ENV': JSON.stringify('production'),
}),
]
Library Build Pattern
package.json
{
"name": "my-library",
"version": "1.0.0",
"type": "module",
"main": "dist/index.cjs",
"module": "dist/index.mjs",
"types": "dist/types/index.d.ts",
"exports": {
".": {
"import": "./dist/index.mjs",
"require": "./dist/index.cjs",
"types": "./dist/types/index.d.ts"
},
"./utils": {
"import": "./dist/utils.mjs",
"require": "./dist/utils.cjs"
}
},
"files": ["dist"],
"sideEffects": false,
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w"
},
"peerDependencies": {
"react": ">=18"
}
}
rollup.config.js for Library
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import { dts } from 'rollup-plugin-dts';
const production = !process.env.ROLLUP_WATCH;
export default [
// Main bundle
{
input: 'src/index.ts',
output: [
{
file: 'dist/index.mjs',
format: 'esm',
sourcemap: true,
},
{
file: 'dist/index.cjs',
format: 'cjs',
sourcemap: true,
},
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' }),
production && terser(),
],
},
// Type declarations
{
input: 'dist/types/index.d.ts',
output: { file: 'dist/index.d.ts', format: 'es' },
plugins: [dts()],
},
];
Code Splitting
Dynamic Imports
// In your code
const module = await import('./heavy-module.js');
// rollup.config.js
export default {
input: 'src/index.js',
output: {
dir: 'dist',
format: 'esm',
chunkFileNames: 'chunks/[name]-[hash].js',
},
// Enable code splitting
preserveEntrySignatures: false,
};
Manual Chunks
output: {
dir: 'dist',
format: 'esm',
manualChunks: {
vendor: ['react', 'react-dom'],
utils: ['lodash', 'date-fns'],
},
}
// Or with function
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor';
}
},
}
External Dependencies
export default {
input: 'src/index.ts',
output: { file: 'dist/bundle.js', format: 'esm' },
// Don't bundle these
external: [
'react',
'react-dom',
/^@radix-ui/,
/^lodash/,
],
};
Watch Mode
# Watch for changes
npx rollup -c -w
# With specific config
npx rollup -c rollup.config.dev.js -w
// rollup.config.js
export default {
// ...
watch: {
include: 'src/**',
exclude: 'node_modules/**',
clearScreen: false,
},
};
Tree Shaking
Tree shaking is automatic for ES modules:
// Mark side effects in package.json
{
"sideEffects": false
}
// Or specify files with side effects
{
"sideEffects": [
"*.css",
"*.scss",
"./src/polyfills.js"
]
}
// In rollup.config.js
export default {
treeshake: {
moduleSideEffects: false,
propertyReadSideEffects: false,
tryCatchDeoptimization: false,
},
};
Source Maps
output: {
file: 'dist/bundle.js',
format: 'esm',
sourcemap: true, // Generate .map file
// sourcemap: 'inline', // Inline source map
// sourcemap: 'hidden', // Generate but don't reference
}
CLI Options
# Basic
rollup -c # Use rollup.config.js
rollup -c rollup.prod.js # Specific config
rollup -i src/index.js # Input file
rollup -o dist/bundle.js # Output file
rollup -f esm # Format
# Watching
rollup -c -w # Watch mode
# Environment
rollup -c --environment NODE_ENV:production
Access in config:
export default {
// process.env.NODE_ENV is available
plugins: [
process.env.NODE_ENV === 'production' && terser(),
].filter(Boolean),
};
See references/plugins.md for complete plugin catalog and references/patterns.md for common configuration patterns.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?