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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-rollup	Rollup	10_Wiki/Topics	verified	self	rollup-bundler rollupjs	none	A	0.9	applied	bundler build-tool esm library-build frontend		2026-05-10	pending	language framework javascript 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)

// 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

{
  "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

// rollup.config.js
export default {
  // ...
  treeshake: {
    moduleSideEffects: false, // aggressive — assume no side effects
    propertyReadSideEffects: false,
  },
};

Plugin: image inlining

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

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

rollup -c -w
# or use Vite which wraps Rollup for production
vite build

Code splitting (manual chunks)

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)