정정지용
기술스택 목록
도구

Rollup

프로젝트 1개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

JavaScript 라이브러리를 최적화된 하나의 번들로 묶어주는 모듈 번들러

Rollup은 ES 모듈(ESM) 형태로 작성된 여러 개의 소스 파일을 분석해 하나 또는 여러 개의 배포용 파일로 묶어주는 모듈 번들러입니다. 특히 사용하지 않는 코드를 제거하는 Tree Shaking에 강점이 있어, 애플리케이션보다는 다른 프로젝트에서 가져다 쓸 라이브러리나 SDK를 만들 때 주로 사용됩니다. Webpack 같은 범용 번들러가 애플리케이션 번들링에 초점을 맞춘 것과 달리, Rollup은 결과물이 작고 깔끔한 라이브러리 산출물을 만드는 데 특화되어 있습니다.

이럴 때 사용합니다

  • 다른 프로젝트가 import해서 쓸 라이브러리나 컴포넌트 SDK를 배포용으로 빌드할 때
  • 불필요한 코드를 걷어내고 번들 용량을 최소화하고 싶을 때
  • ESM, CJS, UMD 등 여러 모듈 형식으로 동시에 배포해야 할 때

핵심 개념

ES Module
import/export 문법으로 작성된 표준 자바스크립트 모듈 형식으로, Rollup이 정적 분석을 수행하는 기반이 됩니다.
Tree Shaking
실제로 사용되지 않는 export나 코드를 정적 분석을 통해 찾아내 최종 번들에서 제거하는 최적화 기법입니다.
Plugin
타입스크립트 변환, node_modules 해석, CSS 처리 등 Rollup 자체가 지원하지 않는 기능을 확장하는 방식입니다.
Output Format
번들 결과를 ESM, CommonJS, UMD 등 어떤 모듈 형식으로 내보낼지 지정하는 옵션으로, 여러 환경을 동시에 지원할 수 있게 해줍니다.
Code Splitting
하나의 번들이 아니라 여러 청크로 나눠 필요한 시점에 로드되도록 코드를 분할하는 기능입니다.

기본 Rollup 설정 파일

src/index.js를 진입점으로 삼아 ESM과 CJS 두 가지 형식의 번들을 동시에 생성하는 설정입니다.

JavaScript
// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

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

처음 쓸 때 흔한 함정

  • CommonJS로 작성된 의존성을 다룰 때 별도 플러그인 없이는 제대로 번들링되지 않을 수 있다
  • 애플리케이션용 번들링(코드 분할, 개발 서버 등)에는 Webpack이나 Vite가 더 적합할 수 있다

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

Shell ScriptTypeScript