[typescript] 타입스크립트와 Rollup을 함께 사용하는 예제 프로젝트

11 Dec 2023

typescript

이번 포스트에서는 타입스크립트와 Rollup을 함께 사용하여 간단한 라이브러리 혹은 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.

1. 타입스크립트란 무엇인가요?

타입스크립트(TypeScript)는 마이크로소프트가 개발한 오픈소스 프로그래밍 언어로서, 정적 타입을 지원하는 자바스크립트의 상위 확장 형태입니다. 이를 통해 개발자는 타입을 명시하여 코드를 작성하고 더 안정적인 애플리케이션을 개발할 수 있습니다.

2. Rollup 소개

Rollup은 ES6 모듈 시스템을 사용하여 JavaScript 프로젝트를 번들링하는 도구입니다. Rollup은 트리 쉐이킹(tree shaking)과 같은 최적화 기능을 제공하여 더 작고 효율적인 빌드를 생성할 수 있습니다.

3. 타입스크립트와 Rollup 함께 사용하기

먼저, 타입스크립트와 Rollup을 함께 사용하기 위해서는 다음과 같은 단계를 따릅니다.

3.1. 프로젝트 초기 설정

먼저, 타입스크립트와 Rollup을 함께 사용하는 프로젝트를 만들어야 합니다. 프로젝트 디렉토리를 만들고 다음과 같이 초기화합니다.

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

3.2. 타입스크립트 및 Rollup 패키지 설치

다음으로, 타입스크립트와 Rollup의 패키지를 설치합니다.

npm install typescript rollup @rollup/plugin-typescript rollup-plugin-terser --save-dev

3.3. 설정 파일 생성

프로젝트 루트에 tsconfig.json 파일을 생성하여 타입스크립트 설정을 정의하고, rollup.config.js 파일을 생성하여 Rollup의 설정을 정의합니다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES5",
    "module": "ES2015",
    "outDir": "dist",
    // ...
  }
}

// rollup.config.js
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';

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

3.4. TypeScript 및 Rollup 사용

이제 타입스크립트로 코드를 작성하고, Rollup을 사용하여 빌드할 수 있습니다.

// src/index.ts
function greet(name: string) {
  return `Hello, ${name}!`;
}

export { greet };

npx rollup -c

위와 같은 설정을 통해 타입스크립트와 Rollup을 함께 사용하여 프로젝트를 개발할 수 있습니다.

4. 결론

이번 포스트에서는 타입스크립트와 Rollup을 함께 사용하는 방법에 대해 알아보았습니다. 이를 통해 더 안정적이고 효율적인 JavaScript 프로젝트를 개발할 수 있게 될 것입니다.

끝.

목차