일반적으로 Rollup을 사용하여 라이브러리나 애플리케이션을 번들링할 때, 타입스크립트를 사용하는 경우가 많습니다. Rollup은 ES 모듈을 지원하며, 타입스크립트 소스코드를 문법적으로 검사하여 최적화된 JavaScript로 컴파일하는 데 매우 효율적으로 사용할 수 있습니다.

이제 Rollup 설정 파일에 타입스크립트를 설정하는 방법을 살펴보겠습니다.

rollup.config.js 파일 생성

먼저 프로젝트 루트 디렉토리에 rollup.config.js 파일을 생성합니다.

// rollup.config.js
import typescript from 'rollup-plugin-typescript2';

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

위의 예제에서는 rollup-plugin-typescript2 플러그인을 사용하여 Rollup에서 타입스크립트를 컴파일하고 번들링하는 방법을 보여줍니다.

타입스크립트 설정

또한 프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성하여 타입스크립트 설정을 구성해야 합니다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

위의 예제에서는 기본적인 타입스크립트 컴파일러 옵션들을 설정했습니다. 필요에 따라 옵션들을 추가하거나 조정할 수 있습니다.

Rollup 실행

이제 rollup.config.js 파일과 tsconfig.json 파일을 생성한 후, 다음과 같이 Rollup을 실행하여 번들링할 수 있습니다.

rollup -c

위와 같은 설정으로 Rollup을 실행하면 타입스크립트 소스코드를 컴파일하여 번들링된 JavaScript 파일을 생성합니다.

이제 Rollup 설정 파일에서 타입스크립트를 설정하는 방법에 대해 알아보았습니다. 이제 타입스크립트를 사용하여 ES 모듈을 번들링하는 프로젝트를 효율적으로 구성할 수 있을 것입니다.

참고 자료:

• Rollup 공식 문서: https://rollupjs.org/guide/en/
• 타입스크립트 공식 문서: https://www.typescriptlang.org/docs/
• rollup-plugin-typescript2 GitHub 저장소: https://github.com/rollup/plugins/tree/master/packages/typescript