타입스크립트(TypeScript)는 정적인 타입 시스템을 제공하여 안정적이고 확장성 있는 프로그래밍을 지원합니다. Rollup은 JavaScript 프로젝트를 위한 모듈 번들러로, 코드의 크기를 줄이고 불필요한 부분을 제거하여 최적화된 결과물을 생성합니다. 타입스크립트와 Rollup을 함께 사용하면 안정적이고 최적화된 JavaScript 프로젝트를 구축할 수 있습니다.

1. 프로젝트 초기화

먼저 프로젝트를 시작하기 위해 빈 폴더를 만들고 package.json 파일을 생성합니다. 다음 명령을 사용하여 package.json 파일을 생성합니다.

npm init -y

2. 타입스크립트 설정

타입스크립트를 사용하기 위해 typescript 패키지를 설치합니다.

npm install typescript --save-dev

프로젝트 루트에 tsconfig.json 파일을 만들고 다음과 같이 기본 설정을 추가합니다.

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

3. Rollup 설정

Rollup을 사용하기 위해 rollup과 관련 플러그인들을 설치합니다.

npm install rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript --save-dev

프로젝트 루트에 rollup.config.js 파일을 만들고 다음과 같이 설정합니다.

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

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

4. 빌드 스크립트 추가

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

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

이제 npm run build 명령을 실행하여 Rollup을 사용하여 타입스크립트 코드를 번들링할 수 있습니다.

이와 같이 타입스크립트와 Rollup을 함께 사용하여 프로젝트를 구성하면, 안정적이고 최적화된 JavaScript 코드를 생성할 수 있습니다.

예시 참고:

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