[typescript] 타입스크립트와 Rollup을 함께 사용하여 빠른 개발 환경 구축하기

11 Dec 2023

typescript

최근 프로젝트에서 타입스크립트(TypeScript)와 Rollup을 함께 사용하여 빠른 개발 환경을 구축하는 방법에 대해 알아보았습니다. 이번 포스트에서는 이러한 개발 환경을 구축하는 방법에 대해 공유하려고 합니다.

1. 타입스크립트(TypeScript)란?

타입스크립트(TypeScript) 는 자바스크립트의 상위 집합으로, 정적 타입을 지원하여 코드의 안정성과 가독성을 높여주는 언어입니다. JavaScript가 동적 타입 언어인 반면, TypeScript는 정적 타입 정보를 추가하여 타입 에러를 일찍 발견할 수 있도록 도와줍니다.

2. Rollup이란?

Rollup 은 ES6 모듈 시스템을 위한 롤업(rollup) 도구로, JavaScript 프로젝트의 소스 코드를 하나의 파일로 번들링하는데 사용됩니다. webpack과 비슷한 역할을 하지만 더 빠르고 경량화된 번들링을 제공하며, 주로 라이브러리와 패키지 개발에 사용됩니다.

3. 타입스크립트와 Rollup을 함께 사용하는 이유

타입스크립트와 Rollup을 함께 사용하면 정적 타입 검사와 효율적인 번들링을 결합할 수 있습니다. 이는 더 안정적인 코드를 유지하면서도 번들 크기를 최소화할 수 있는 이점을 제공합니다.

4. 환경 구축 방법

먼저, 프로젝트 폴더를 생성하고 다음과 같이 실행합니다.

mkdir my-ts-rollup-project
cd my-ts-rollup-project
npm init -y

다음으로, 필요한 의존성 모듈을 설치합니다.

npm install typescript rollup rollup-plugin-typescript2 --save-dev

그 후, tsconfig.json 파일을 프로젝트 루트에 추가하고 다음과 같이 설정합니다.

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

이제, rollup.config.js 파일을 추가하고 다음과 같이 설정합니다.

import typescript from 'rollup-plugin-typescript2';

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

마지막으로, TypeScript로 작성된 소스 코드를 src/index.ts에 추가하고 다음과 같이 번들링을 실행합니다.

npx rollup -c

5. 마치며

이렇게 함으로써, 타입스크립트와 Rollup을 함께 사용하여 빠른 개발 환경을 구축할 수 있습니다. 이를 통해 안정성과 성능을 모두 고려한 프로젝트를 개발할 수 있게 됩니다.

이상으로, 타입스크립트와 Rollup을 함께 사용하여 빠른 개발 환경을 구축하는 방법에 대해 알아보았습니다. 감사합니다.

참고 자료

TypeScript 공식 문서
Rollup 공식 문서
TypeScript와 Rollup을 함께 사용하는 방법 - (내용은 예시입니다.)

목차