이번 포스트에서는 타입스크립트(Typescript)와 Rollup을 함께 활용하여 모듈 시스템을 구축하는 방법에 대해 알아보겠습니다.

타입스크립트

타입스크립트는 자바스크립트의 확장된 기능을 가진 프로그래밍 언어로, 정적 타입 시스템을 갖추고 있어 코드의 안정성을 향상시키는 데 도움이 됩니다.

// 예시
function greet(name: string) {
  return "Hello, " + name;
}
let user = "Jane User";

document.body.textContent = greet(user);

Rollup

Rollup은 ES6 모듈 시스템에 중점을 둔 모듈 번들러로, 효율적인 빌드 프로세스를 제공합니다.

타입스크립트와 Rollup 연동

먼저, 타입스크립트로 작성된 코드를 Rollup이 번들링할 수 있도록 하기 위해 rollup-plugin-typescript2 플러그인을 설치합니다.

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

다음으로, Rollup 설정 파일(rollup.config.js)을 작성합니다.

import typescript from 'rollup-plugin-typescript2';

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

위 설정에서는 rollup-plugin-typescript2 플러그인을 이용하여 타입스크립트 코드를 번들링하고, CommonJS 형식의 파일로 출력하도록 설정하였습니다.

번들링

이제 다음 명령어를 통해 Rollup을 실행하여 번들링을 수행할 수 있습니다.

npx rollup -c

위 명령어를 실행하면 src/index.ts 파일에서 시작하여 해당 코드 및 의존 모듈들이 번들링되어 dist/bundle.js 파일로 출력됩니다.

결론

타입스크립트와 Rollup을 함께 사용하여 모듈 시스템을 구축하면, 타입 안정성과 효율적인 번들링을 동시에 활용할 수 있습니다. 이를 통해 프로젝트의 유지보수성과 성능을 향상시킬 수 있습니다.

이상으로, 타입스크립트와 Rollup을 함께 사용하는 모듈 시스템에 대해 알아보았습니다.

참고 자료:

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