타입스크립트(TypeScript)로 작성한 프로젝트에서는 다양한 모듈 번들러를 사용하여 소스코드를 번들링할 수 있습니다. 이러한 모듈 번들러는 코드를 관리하고 프로덕션 환경에 배포하기 전에 번들링하여 파일 크기를 최적화하는 데 도움이 됩니다. 이번 블로그에서는 타입스크립트 모듈 번들러를 테스트하는 방법에 대해 알아보겠습니다.

모듈 번들러 선택

가장 흔히 사용되는 타입스크립트 모듈 번들러로는 Webpack, Rollup, Parcel 등이 있습니다. 각 모듈 번들러는 고유한 특징과 장단점을 가지고 있으며, 프로젝트의 요구에 맞게 선택할 수 있습니다.

테스트 환경 설정

타입스크립트 프로젝트를 테스트하기 위해서는 먼저 필요한 모듈 번들러를 설치해야 합니다. 가령, Webpack을 사용할 경우 다음과 같이 설치할 수 있습니다.

npm install webpack webpack-cli --save-dev

Rollup을 사용할 경우 다음과 같이 설치할 수 있습니다.

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

Parcel을 사용할 경우 다음과 같이 설치할 수 있습니다.

npm install parcel-bundler --save-dev

예제 프로젝트 작성

간단한 예제 프로젝트를 작성하여 모듈 번들러가 제대로 동작하는지 테스트해봅시다.

index.ts

const greeting: string = "Hello, world!";
console.log(greeting);

번들링

설정이 완료되면 각 모듈 번들러의 설정 파일을 작성하여 번들링을 수행합니다. 예를 들어, Webpack을 사용하는 경우 webpack.config.js 파일에 다음과 같이 작성할 수 있습니다.

const path = require('path');

module.exports = {
  entry: './index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Rollup을 사용하는 경우 rollup.config.js 파일에 다음과 같이 작성할 수 있습니다.

import typescript from 'rollup-plugin-typescript2';

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

Parcel을 사용하는 경우 터미널에서 다음 명령어를 실행하기만 하면 됩니다.

parcel build index.ts

결과 확인

각 모듈 번들러에서 번들링한 파일을 실행하여 예제 프로젝트가 제대로 동작하는지 확인합니다.

이렇게 간단한 예제를 통해 타입스크립트 모듈 번들러를 테스트할 수 있습니다. 번들러의 설정과 동작을 이해하고, 프로젝트에 맞는 적합한 모듈 번들러를 선택하여 사용할 수 있도록 노력해보세요.