Rollup 완벽 가이드 | 라이브러리 번들러·Tree Shaking·Plugins·실전 활용

2026년 4월 7일 · 14분 읽기 · 수정 2026년 4월 7일 고급

이 글의 핵심

Rollup으로 라이브러리를 번들링하는 완벽 가이드입니다. Tree Shaking, Multiple Formats, Plugins, TypeScript까지 실전 예제로 정리했습니다.

실무 경험 공유: npm 라이브러리를 Rollup으로 번들링하면서, 번들 크기가 50% 감소하고 Tree Shaking이 완벽해진 경험을 공유합니다.

들어가며: “라이브러리 번들링이 어려워요”

실무 문제 시나리오

시나리오 1: Webpack은 라이브러리에 적합하지 않아요
불필요한 코드가 많습니다. Rollup은 라이브러리에 최적화되어 있습니다.

시나리오 2: Tree Shaking이 안 돼요
사용 안 하는 코드가 포함됩니다. Rollup은 완벽한 Tree Shaking을 제공합니다.

시나리오 3: 여러 포맷이 필요해요
ESM, CJS, UMD가 필요합니다. Rollup은 모두 지원합니다.

1. Rollup이란?

핵심 특징

Rollup은 라이브러리 번들러입니다.

주요 장점:

Tree Shaking: 완벽한 지원
ESM: Native ES Modules
Multiple Formats: ESM, CJS, UMD
작은 번들: 최소 크기
Plugins: 풍부한 생태계

2. 설치 및 기본 설정

설치

npm install -D rollup

rollup.config.js

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
};

package.json

{
  "scripts": {
    "build": "rollup -c"
  }
}

3. Multiple Formats

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/bundle.esm.js',
      format: 'esm',
    },
    {
      file: 'dist/bundle.cjs.js',
      format: 'cjs',
    },
    {
      file: 'dist/bundle.umd.js',
      format: 'umd',
      name: 'MyLib',
    },
  ],
};

package.json

{
  "main": "dist/bundle.cjs.js",
  "module": "dist/bundle.esm.js",
  "browser": "dist/bundle.umd.js",
  "types": "dist/index.d.ts"
}

4. Plugins

@rollup/plugin-node-resolve

npm install -D @rollup/plugin-node-resolve

import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  plugins: [resolve()],
};

@rollup/plugin-commonjs

npm install -D @rollup/plugin-commonjs

import commonjs from '@rollup/plugin-commonjs';

export default {
  plugins: [commonjs()],
};

@rollup/plugin-typescript

npm install -D @rollup/plugin-typescript typescript tslib

import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  plugins: [typescript()],
};

5. External Dependencies

export default {
  input: 'src/index.js',
  external: ['react', 'react-dom'],
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM',
    },
  },
};

6. Tree Shaking

// src/utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// src/index.js
import { add } from './utils';

console.log(add(1, 2));

// dist/bundle.js에는 add만 포함됨 (subtract는 제거)

7. Code Splitting

export default {
  input: ['src/index.js', 'src/another.js'],
  output: {
    dir: 'dist',
    format: 'esm',
  },
};

8. 실전 예제: React 라이브러리

프로젝트 구조

my-lib/
├── src/
│   ├── index.ts
│   ├── Button.tsx
│   └── Input.tsx
├── rollup.config.js
├── tsconfig.json
└── package.json

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',
  external: ['react', 'react-dom'],
  output: [
    {
      file: 'dist/index.esm.js',
      format: 'esm',
      sourcemap: true,
    },
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: 'dist/index.umd.js',
      format: 'umd',
      name: 'MyLib',
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM',
      },
      sourcemap: true,
    },
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      tsconfig: './tsconfig.json',
      declaration: true,
      declarationDir: 'dist',
    }),
    terser(),
  ],
};

package.json

{
  "name": "my-lib",
  "version": "1.0.0",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "browser": "dist/index.umd.js",
  "types": "dist/index.d.ts",
  "files": [dist],
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

9. Watch Mode

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  watch: {
    include: 'src/**',
  },
};

rollup -c -w

정리 및 체크리스트

핵심 요약

Rollup: 라이브러리 번들러
Tree Shaking: 완벽한 지원
Multiple Formats: ESM, CJS, UMD
작은 번들: 최소 크기
Plugins: 풍부한 생태계
TypeScript: 완벽한 지원

구현 체크리스트

같이 보면 좋은 글

Webpack 완벽 가이드
Vite 완벽 가이드
npm 라이브러리 배포 가이드

이 글에서 다루는 키워드

Rollup, Bundler, Library, Tree Shaking, ESM, TypeScript, Frontend

자주 묻는 질문 (FAQ)

Q. Webpack과 비교하면 어떤가요?

A. Rollup이 라이브러리에 더 적합하고 번들이 작습니다. Webpack은 애플리케이션에 더 적합합니다.

Q. Vite가 Rollup을 사용하나요?

A. 네, Vite는 프로덕션 빌드에 Rollup을 사용합니다.

Q. 애플리케이션도 번들링할 수 있나요?

A. 가능하지만, Webpack이나 Vite가 더 적합합니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, Vue, React 등 많은 라이브러리가 Rollup으로 빌드됩니다.