home / skills / partme-ai / full-stack-skills / rollup

rollup skill

safe

This skill provides guidance on Rollup bundler configuration, plugins, code splitting, tree shaking, and library bundling for optimized production builds.

npx playbooks add skill partme-ai/full-stack-skills --skill rollup

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

669 B

---
name: rollup
description: Provides comprehensive guidance for Rollup bundler including configuration, plugins, code splitting, tree shaking, and library bundling. Use when the user asks about Rollup, needs to bundle libraries, optimize output, or configure Rollup for production builds.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- [待完善：根据具体工具添加使用场景]

## How to use this skill

[待完善：根据具体工具添加使用指南]

## Best Practices

[待完善：根据具体工具添加最佳实践]

## Keywords

[待完善：根据具体工具添加关键词]

Overview

This skill provides practical, step-by-step guidance for using the Rollup bundler to build libraries and applications. It covers configuration, plugin selection, code splitting, tree shaking, output formats, and production optimizations. Use it to produce small, fast bundles and maintainable build setups.

How this skill works

The skill inspects common Rollup configuration patterns and explains how each option affects bundle output, performance, and compatibility. It guides selection and configuration of core plugins (e.g., @rollup/plugin-node-resolve, commonjs, babel, terser) and shows how to enable tree shaking and code splitting. It also explains output formats (ESM, CJS, UMD, IIFE), sourcemaps, and strategies for library versioning and externals.

When to use it

Bundling a JavaScript or TypeScript library for npm distribution
Optimizing production bundles to reduce size and improve load time
Configuring code splitting for large single-page applications
Migrating a project from another bundler to Rollup
Setting up multiple output formats (ESM/CJS/UMD) for wide compatibility

Best practices

Declare external dependencies explicitly to avoid bundling peer dependencies
Prefer ES module input and keep side-effect-free modules for optimal tree shaking
Use plugin order intentionally: resolve -> commonjs -> transpilers -> minifiers
Generate both ESM and CJS builds if publishing libraries; provide a modern ESM entry for bundlers
Enable sourcemaps for production builds and use terser or esbuild-minify for consistent minification

Example use cases

Create a minimal rollup.config.js that outputs ESM and CJS bundles with sourcemaps
Bundle a React component library with peerDependencies marked external and CSS extracted via plugins
Split a large app into vendor and route-based chunks for faster initial loads
Set up TypeScript support using @rollup/plugin-typescript or rollup-plugin-ts and emit declaration files
Optimize bundle size by replacing heavy modules with lighter alternatives and enabling tree shaking

FAQ

How do I prevent Rollup from bundling React as part of my library?

Mark react and react-dom as externals in the Rollup config and list them as peerDependencies in package.json.

Which plugins are essential for most projects?

@rollup/plugin-node-resolve, @rollup/plugin-commonjs, a transpiler plugin (Babel or TypeScript), and a minifier (terser or esbuild) cover most needs.

How can I enable tree shaking effectively?

Use ES module syntax across your codebase, avoid side-effectful modules, declare sideEffects:false in package.json when safe, and remove dynamic require patterns.