웹 개발을 하다 보면 모듈 번들러를 사용하여 여러 개의 파일을 결합하고 브라우저에서 실행 가능한 번들 파일을 생성해야 하는 경우가 있습니다. 최근에는 웹 어플리케이션에서 타입스크립트 모듈을 사용하는 경우가 많아졌는데, 타입스크립트 모듈 번들러를 사용하여 브라우저에서 모듈 시스템을 지원할 수 있습니다. 이번 글에서는 주요한 타입스크립트 모듈 번들러 중 하나인 Webpack과 Rollup이 어떻게 브라우저에서 모듈 시스템을 지원하는지 살펴보겠습니다.

Webpack

Webpack은 현대 자바스크립트 애플리케이션을 위한 스태틱 모듈 번들러입니다. Webpack을 사용하여 타입스크립트 모듈을 번들링하면 브라우저가 모듈 시스템을 이해할 수 있도록 코드를 번들링합니다. 또한 Webpack은 webpack-dev-server를 사용하여 개발 서버를 실행하고 브라우저에서 번들링된 애플리케이션을 테스트할 수 있습니다.

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

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

Rollup

Rollup은 간단하면서도 효율적인 번들러로, 타입스크립트 모듈을 번들링할 때 Rollup을 사용하면 코드 트리를 분석하여 사용되지 않는 코드를 제거하여 번들 크기를 최소화할 수 있습니다. Rollup은 ESM(ES6 모듈)을 지원하고, 이를 통해 Tree-shaking을 통해 사용되지 않는 코드를 제거하여 번들 크기를 최적화합니다.

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

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

두 모듈 번들러 모두 타입스크립트 모듈을 브라우저에서 지원 가능한 형태로 번들링하여 제공합니다. 웹팩(Webpack)과 롤업(Rollup)에 대해 더 자세히 알고 싶다면 공식 문서를 참고하시기 바랍니다.

모듈 번들러를 사용하여 타입스크립트 모듈을 브라우저에서 지원할 수 있기 때문에, 웹 어플리케이션을 개발할 때 모듈 시스템을 효과적으로 활용할 수 있습니다.