2nd/10_Wiki/Topic_Programming/Frontend/Rollup.md

---
id: wiki-2026-0508-rollup
title: Rollup
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [rollup-bundler, rollupjs]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [bundler, build-tool, esm, library-build, frontend]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: javascript
  framework: rollup-4
---

# Rollup

## 매 한 줄
> **"매 ESM-first 의 module bundler 의 library-grade output 의 specialized."**. Rich Harris 의 2015 의 의 originated, 매 tree-shaking 의 pioneer — 매 2026 의 Rollup 4.x 의 매 SWC/Oxc-powered, library 의 publishing (NPM packages, SDKs) 의 의 default choice 이며, Vite 의 production build 의 underlying engine.

## 매 핵심

### 매 정의
- ESM-native bundler — `import`/`export` 의 first-class.
- Tree-shaking 의 pioneer (2015) — dead code elimination via static analysis.
- Output formats: ESM, CJS, UMD, IIFE, AMD, SystemJS.
- Plugin-driven — minimal core, everything via `@rollup/plugin-*`.

### 매 vs. 다른 bundlers
- **Vite (dev)**: Rollup 의 production 의 wraps — dev 의 esbuild + Rollup of build.
- **webpack**: 매 application bundling 의 strong, code splitting 의 mature; Rollup 의 library output 의 cleaner.
- **esbuild**: 10-100x faster, 그러나 plugin ecosystem 의 narrower.
- **Bun.build / tsdown**: 2026 의 emerging, Rollup-compatible plugin API.

### 매 응용
1. NPM library publishing (React component lib, SDK, utils package).
2. Multi-format output (ESM + CJS + types).
3. Vite 의 production build (transitively).
4. Storybook 의 build pipeline.

## 💻 패턴

### Library bundle (TS + multi-format)
```js
// rollup.config.js
import typescript from '@rollup/plugin-typescript';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import dts from 'rollup-plugin-dts';

export default [
  {
    input: 'src/index.ts',
    output: [
      { file: 'dist/index.cjs', format: 'cjs', sourcemap: true },
      { file: 'dist/index.mjs', format: 'esm', sourcemap: true },
    ],
    plugins: [nodeResolve(), commonjs(), typescript({ tsconfig: './tsconfig.build.json' })],
    external: ['react', 'react-dom'],
  },
  {
    input: 'src/index.ts',
    output: [{ file: 'dist/index.d.ts', format: 'es' }],
    plugins: [dts()],
  },
];
```

### `package.json` exports map
```json
{
  "name": "@org/lib",
  "type": "module",
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  },
  "files": ["dist"]
}
```

### Tree-shaking 의 verify
```js
// rollup.config.js
export default {
  // ...
  treeshake: {
    moduleSideEffects: false, // aggressive — assume no side effects
    propertyReadSideEffects: false,
  },
};
```

### Plugin: image inlining
```js
import image from '@rollup/plugin-image';
import url from '@rollup/plugin-url';

export default {
  plugins: [
    url({ limit: 8192 }), // inline <8kb as base64
    image(),
  ],
};
```

### React component library
```js
import { babel } from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.tsx',
  output: { dir: 'dist', format: 'esm', preserveModules: true },
  external: ['react', 'react-dom', /^@radix-ui/],
  plugins: [
    postcss({ modules: true, extract: 'styles.css' }),
    babel({ babelHelpers: 'bundled', presets: ['@babel/preset-react'] }),
  ],
};
```

### Watch mode + dev server
```bash
rollup -c -w
# or use Vite which wraps Rollup for production
vite build
```

### Code splitting (manual chunks)
```js
export default {
  input: { main: 'src/main.ts', admin: 'src/admin.ts' },
  output: {
    dir: 'dist',
    format: 'esm',
    manualChunks: {
      vendor: ['react', 'react-dom'],
      utils: ['lodash-es', 'date-fns'],
    },
  },
};
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Library / SDK publishing | **Rollup** (clean output, multi-format) |
| Application bundle | **Vite** (Rollup 의 wraps) or webpack |
| Speed-critical (CI) | **esbuild** or **tsdown** (Rolldown) |
| Storybook / docs build | Rollup-based (Vite mode) |
| Monorepo internal package | tsup (esbuild) or Rollup with `preserveModules` |

**기본값**: library 의 의 Rollup, app 의 의 Vite (Rollup 의 production engine).

## 🔗 Graph
- 변형: [[Vite]] · [[tsup]]
- 응용: [[Component Library Architecture]]
- Adjacent: [[ESM]] · [[esbuild]]

## 🤖 LLM 활용
**언제**: NPM library publishing, multi-format output, clean ESM bundles, Vite production tuning.
**언제 X**: large application bundling (Vite/webpack), HMR-heavy dev (Vite), Node.js server (no bundling needed in 2026 ESM).

## ❌ 안티패턴
- **Bundling peer deps**: `react`/`react-dom` 의 bundle 의 included — `external` 의 declare 의 필요.
- **CJS-only output 의 ESM-only consumer**: 2026 의 ESM-first ecosystem — dual ESM+CJS output 의 ship.
- **Source map 의 omission**: production debugging 의 impossible — `sourcemap: true` 의 default.
- **Plugin order 의 ignorance**: `nodeResolve` before `commonjs` before `typescript` — order matters.
- **Vite app 의 직접 의 Rollup config**: Vite 의 abstracts — `vite.config.ts` 의 `build.rollupOptions` 의 사용.

## 🧪 검증 / 중복
- Verified (rollupjs.org, Rollup 4.x docs 2026, Vite documentation).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — full bundler reference + 2026 ecosystem (Rolldown, tsup) |