타입스크립트(TypeScript)는 JavaScript의 슈퍼셋으로 정적 타입을 제공하여 코드의 안정성을 높여주는 도구입니다. Rollup은 JavaScript 프로젝트를 위한 모듈 번들러로서, 효율적인 번들링과 트리 쉐이킹을 지원합니다.

이번 글에서는 타입스크립트로 작성된 프로젝트를 Rollup을 이용하여 번들링하는 방법에 대해 알아보겠습니다.

1. 패키지 설치

먼저 프로젝트 폴더에서 다음과 같이 타입스크립트, Rollup 및 관련 플러그인들을 설치합니다.

npm install typescript rollup @rollup/plugin-typescript rollup-plugin-terser

2. tsconfig.json 설정

프로젝트 루트 경로에 tsconfig.json 파일을 생성하고, 필요한 타입스크립트 설정을 추가합니다.

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

3. rollup.config.js 작성

프로젝트 루트 경로에 rollup.config.js 파일을 작성하여 Rollup의 설정을 정의합니다.

import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';

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

4. 빌드 스크립트 추가

package.json 파일의 scripts 부분에 빌드 스크립트를 추가합니다.

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

5. 빌드 실행

이제 다음 명령어로 빌드를 실행할 수 있습니다.

npm run build

마치며

이상으로 타입스크립트 및 Rollup을 함께 사용하여 프로젝트를 빌드하는 방법에 대해 알아보았습니다. 이를 통해 프로젝트의 효율적인 관리와 성능 향상에 기여할 수 있습니다.

더 많은 설정 옵션 및 기능들을 살펴보고 싶다면, 타입스크립트 공식 문서 및 Rollup 공식 문서를 참고해보시기 바랍니다.