소개

이번 포스트에서는 타입스크립트와 Rollup을 함께 사용하는 방법에 대해 알아보겠습니다. 타입스크립트는 정적 타입을 지원하는 JavaScript의 상위 집합 언어이며, Rollup은 모듈 번들러로서 코드를 번들링하여 브라우저에서 실행할 수 있는 형태로 만들어줍니다.

타입스크립트 설정

먼저 타입스크립트 설정 파일을 만들어봅시다. tsconfig.json 파일을 프로젝트 루트에 생성하고 아래와 같이 작성합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "strict": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

이제 모든 TypeScript 파일은 src 디렉토리에 위치해야 합니다. TypeScript 컴파일러는 tsconfig.json 파일을 참조하여 설정을 적용합니다.

Rollup 설정

다음으로 Rollup의 설정 파일인 rollup.config.js를 만들어봅시다.

import typescript from "rollup-plugin-typescript2";

export default {
  input: "src/index.ts",
  output: {
    file: "dist/bundle.js",
    format: "umd",
    name: "MyLibrary"
  },
  plugins: [
    typescript()
  ]
}

위 예제에서는 Rollup의 입력 파일을 src/index.ts로 지정하고, 출력 파일은 dist/bundle.js로 설정하였습니다. 또한 rollup-plugin-typescript2 플러그인을 사용하여 타입스크립트 파일을 번들링합니다.

번들링 실행

이제 다음 명령어를 실행하여 번들링을 수행합니다.

npx rollup -c

위 명령어는 프로젝트 내의 rollup.config.js 설정 파일을 참조하여 Rollup이 동작하도록 합니다.

결론

이로써 타입스크립트와 Rollup을 함께 사용하는 방법에 대해 알아보았습니다. 타입스크립트의 정적 타입 검사와 Rollup의 모듈 번들링을 통해 효율적인 웹 어플리케이션을 개발할 수 있게 되었습니다.

더 많은 정보를 원하시면 TypeScript 공식 문서와 Rollup 공식 문서를 참고해보세요.