Files

T

Antigravity Agent 9a135bd19d docs(10_Wiki): Topic_Business/General/Graphic/Programming을 Topics/ 하위로 이동

최상위 10_Wiki/Topic_*였던 4개 카테고리 폴더를 10_Wiki/Topics/Topic_* 로 재배치.
콘텐츠 변경 없음(순수 폴더 이동) — Topics/ 하위 나머지 폴더는 이미 지난 커밋에서
전부 정리된 상태(잔존 항목은 에이전트 운영 상태 및 사용자가 보존을 요청한
업데이트0615/무제 3.canvas 뿐).

2026-07-05 00:44:01 +09:00

5.6 KiB

Raw Blame History

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

title

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.

매 응용

NPM library publishing (React component lib, SDK, utils package).
Multi-format output (ESM + CJS + types).
Vite 의 production build (transitively).
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)

5.6 KiB Raw Blame History