타입스크립트(TypeScript)는 정적 타입을 지원하는 프로그래밍 언어이며, Rollup은 JavaScript 모듈 번들러로서, 라이브러리나 앱을 묶어서 사용할 수 있도록 도와줍니다. 이번 블로그에서는 타입스크립트와 Rollup을 함께 사용하는 개발 환경을 구성하는 방법에 대해 알아보겠습니다.

1. 프로젝트 초기화

먼저, 프로젝트 폴더를 생성하고 다음과 같이 package.json 파일을 생성합니다.

{
  "name": "typescript-rollup-example",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^18.0.0",
    "@rollup/plugin-node-resolve": "^13.0.4",
    "rollup": "^2.53.3",
    "rollup-plugin-terser": "^7.0.2",
    "typescript": "^4.4.3"
  }
}

2. 타입스크립트 설정

tsconfig.json 파일을 생성하여 타입스크립트 설정을 다음과 같이 작성합니다.

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES5",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

3. Rollup 설정

rollup.config.js 파일을 생성하여 Rollup 설정을 작성합니다.

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

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

4. 모듈 작성

src/index.ts 파일을 생성하여 간단한 모듈을 작성합니다.

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

5. 빌드

터미널에서 다음 명령어를 실행하여 빌드합니다.

npm run build

6. 결론

이제 타입스크립트와 Rollup을 함께 사용하는 개발 환경을 구성했습니다. 이제 생성된 dist/bundle.js 파일을 웹 애플리케이션에 포함하여 사용할 수 있습니다.

감사합니다.

참고 자료

• Rollup 공식 문서
• 타입스크립트 공식 문서