이번 포스트에서는 TypeScript로 작성된 프로젝트에서 모듈 번들링을 자동화하는 방법을 살펴보겠습니다.

1. Parcel을 사용한 번들링 자동화

Parcel은 Zero Configuration 모듈 번들러로, 별도의 설정 없이 TypeScript 애플리케이션을 번들링할 수 있습니다. 아래는 Parcel을 사용하여 TypeScript 파일을 번들링하는 간단한 예제입니다.

// index.ts
import * as _ from 'lodash';

const result = _.join(['Hello', 'Parcel!'], ' ');
console.log(result);

Parcel을 설치하고, 위의 코드를 포함한 프로젝트 디렉토리에서 다음 명령어를 실행하면 번들링된 결과물을 확인할 수 있습니다.

parcel index.ts

2. Webpack과 TypeScript의 통합

Webpack은 강력한 모듈 번들러이며, TypeScript와 함께 사용할 수 있습니다. 아래는 Webpack과 TypeScript를 함께 사용하는 방법입니다.

먼저, webpack.config.js 파일을 만들고 다음과 같이 설정합니다.

// 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'),
  },
};

이제 TypeScript 프로젝트에서 다음 명령어로 Webpack을 사용하여 번들링할 수 있습니다.

webpack

3. Rollup을 활용한 번들링 최적화

Rollup은 효율적인 번들링을 지원하는 모듈 번들러로, TypeScript와 함께 사용할 수 있습니다. Rollup으로 TypeScript 파일을 번들링하는 예제는 다음과 같습니다.

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

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

위의 rollup.config.js 파일을 생성한 후, 다음 명령어를 실행하여 Rollup을 사용하여 TypeScript 파일을 번들링할 수 있습니다.

rollup -c

이렇게 TypeScript 모듈 번들러를 자동화하여 프로젝트를 효율적으로 관리할 수 있습니다. 다양한 번들링 도구를 활용하여 프로젝트에 적합한 방식을 선택할 수 있습니다.