타입스크립트(TypeScript)로 작성된 소스 코드를 Rollup을 사용하여 번들링하는 방법에 대해 알아보겠습니다.

Rollup이란 무엇인가요?

Rollup은 ES6 모듈을 사용하여 빠르고 효율적인 JavaScript 번들러입니다. Rollup은 코드 트리 셰이킹(tree shaking)과 같은 최적화 기능을 제공하여 최종 번들 크기를 최소화합니다.

타입스크립트 프로젝트 설정

먼저 타입스크립트 프로젝트를 설정해야 합니다. tsconfig.json 파일을 생성하고 필요한 옵션을 추가합니다.

예시 tsconfig.json 파일:

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "outDir": "dist",
    "strict": true
  }
}

Rollup 설치

먼저 Rollup을 프로젝트에 설치합니다.

npm install rollup --save-dev

필수 플러그인 설치

Rollup과 함께 사용할 플러그인을 설치합니다.

npm install @rollup/plugin-typescript --save-dev

Rollup 설정 파일 생성

프로젝트 루트 폴더에 rollup.config.js 파일을 생성하고 다음과 같이 설정합니다.

예시 rollup.config.js 파일:

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

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

번들링

마지막으로 번들링 명령어를 실행하여 Rollup이 타입스크립트 소스 코드를 번들링하도록 합니다.

npx rollup -c

이제 Rollup을 사용하여 타입스크립트 소스 코드를 번들링하는 방법을 알아보았습니다. 해당 번들은 최적화되어 코드 트리 셰이킹과 같은 효율적인 기능을 제공합니다.

참고 자료

• Rollup 공식 문서: https://rollupjs.org/
• TypeScript 공식 문서: https://www.typescriptlang.org/docs/