[typescript] 타입스크립트 모듈 번들러의 설정 방법

14 Dec 2023

typescript

타입스크립트 프로젝트를 작성할 때, 여러 개의 모듈을 번들링해야 하는 경우가 있습니다. 이러한 상황에서 타입스크립트 모듈 번들러를 설정하는 방법을 알아보겠습니다.

모듈 번들러 선택

가장 인기 있는 타입스크립트 모듈 번들러로는 Webpack, Parcel, Rollup 등이 있습니다. 이 가운데 하나를 선택하여 프로젝트에 통합시킬 수 있습니다.

Webpack을 통한 모듈 번들링

Webpack은 가장 널리 사용되는 모듈 번들러 중 하나입니다. 다음은 타입스크립트 프로젝트에서 Webpack을 활용한 모듈 번들링 설정 예시입니다.

// webpack.config.js
const path = require('path');

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

위 설정에서 ts-loader는 TypeScript 파일을 컴파일하기 위해 사용됩니다.

Parcel을 통한 모듈 번들링

Parcel은 간단하고 사용하기 쉬운 모듈 번들러입니다. 다음은 Parcel을 사용한 타입스크립트 프로젝트의 예시입니다.

npm install -g parcel-bundler

설치 후 프로젝트 디렉토리에서 다음 명령어를 실행합니다.

parcel index.html

Parcel은 타입스크립트 파일을 자동으로 번들링하고 서버를 시작합니다.

Rollup을 통한 모듈 번들링

Rollup은 효율적으로 ES6 모듈을 번들링하는 데 사용됩니다. 다음은 Rollup을 사용한 타입스크립트 프로젝트의 예시입니다.

// rollup.config.js
import typescript from 'rollup-plugin-typescript2';

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

결론

타입스크립트 모듈 번들러 설정은 다양한 방법으로 이루어질 수 있습니다. 프로젝트의 요구 사항과 개발자의 기호에 따라 적합한 모듈 번들러를 선택하여 사용하면 됩니다.

참고 문헌: