타입스크립트(TypeScript)는 JavaScript의 확장된 기능을 제공하는 언어로, 정적 타입 검사를 제공하여 안정적이고 확장성 있는 코드를 작성할 수 있게 합니다. Rollup은 JavaScript 프로젝트를 위한 모듈 번들러로, 라이브러리나 패키지를 효율적으로 묶어서 배포할 수 있게 해줍니다. 이번 블로그에서는 타입스크립트와 Rollup을 함께 사용하여 라이브러리를 배포하는 전략에 대해 알아보겠습니다.

목표

이번 프로젝트의 목표는 타입스크립트로 작성된 소스 코드를 Rollup을 사용하여 묶고, UMD(Universal Module Definition)와 ES 모듈 형태로 라이브러리를 빌드하는 것입니다. UMD 형태는 브라우저 환경에서 사용할 수 있고, ES 모듈 형태는 모던 웹 개발에 최적화되어 있습니다.

프로젝트 설정

우선, npm을 사용하여 Rollup과 TypeScript를 프로젝트에 추가합니다.

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

그리고 TypeScript 구성 파일 tsconfig.json을 만들고, Rollup 설정 파일 rollup.config.js을 만듭니다.

// tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "outDir": "dist",
    "strict": true
  }
}

// rollup.config.js

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

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/bundle.umd.js',
      format: 'umd',
      name: 'MyLibrary',
    },
    {
      file: 'dist/bundle.esm.js',
      format: 'es',
    },
  ],
  plugins: [
    resolve(),
    commonjs(),
  ]
};

빌드 스크립트 작성

빌드 스크립트를 작성하여 TypeScript를 먼저 컴파일하고, Rollup으로 묶어서 UMD와 ES 모듈 형태로 라이브러리를 빌드합니다.

// package.json

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

라이브러리 테스트

npm run build 명령어를 사용하여 라이브러리를 빌드하고, 빌드된 파일을 기반으로 테스트를 진행합니다. 또한, UMD 형태의 라이브러리를 직접 웹 브라우저에서 테스트하며 문제가 없는지 확인합니다.

결론

타입스크립트와 Rollup을 함께 사용하여 라이브러리를 빌드하고 배포하는 것은 매우 간단하면서도 효과적인 전략입니다. 이를 통해 안정적이고 성능 최적화된 라이브러리를 개발할 수 있으며, 모듈 번들링에서 생기는 다양한 이슈를 해결할 수 있습니다.

참고 문헌:

• Rollup 공식 문서: https://rollupjs.org/
• TypeScript 공식 문서: https://www.typescriptlang.org/