타입스크립트는 모듈 시스템을 사용하여 코드를 구조화하고 재사용 가능한 모듈로 나눌 수 있습니다. 이 모듈은 번들러와 모듈 로더에 의해 사용됩니다.

모듈 번들러란?

모듈 번들러는 여러 모듈을 하나의 파일로 묶어주는 도구입니다. 컴파일러가 이해할 수 있는 형태로 변환하고, 파일 크기를 줄이며, 각 모듈 간의 의존성을 해결합니다. 대표적인 모듈 번들러로는 Webpack과 Parcel이 있습니다.

Webpack

Webpack은 타입스크립트 파일을 번들링하고 하나의 JavaScript 파일로 만들어줍니다. 설정을 통해 로더를 추가하거나 플러그인을 사용할 수 있습니다. 타입스크립트를 JavaScript로 변환하고 모듈을 묶는데 사용될 수 있습니다.

// webpack.config.js

module.exports = {
  entry: './src/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'),
  },
};

모듈 로더란?

모듈 로더는 브라우저나 런타임 환경에서 모듈을 로드하고 실행할 수 있도록 도와주는 도구입니다. 타입스크립트 모듈 로더는 import 문을 해석하고 요청된 모듈을 가져와 실행합니다. 대표적인 모듈 로더로는 SystemJS와 RequireJS가 있습니다.

SystemJS

SystemJS는 동적으로 모듈을 로딩하고 실행하는 것을 가능하게 합니다. 타입스크립트 파일을 브라우저에서 동적으로 로드할 수 있도록 지원합니다.

import * as math from './math.js';

console.log(math.add(2, 3));

둘 사이의 관계에서, 모듈 번들러는 애플리케이션을 빌드하고 로딩 시간을 줄이고, 모듈 로더는 런타임에 모듈을 로드하고 실행하는 것을 가능하게 합니다.

결론

타입스크립트 모듈 번들러와 모듈 로더는 애플리케이션을 구성하고 실행하는 데 있어 각각의 역할을 수행합니다. 번들러는 빌드 시간에 모듈을 결합하고 최적화하며, 모듈 로더는 런타임에 모듈을 동적으로 로딩하고 실행합니다.

참조:

• Webpack 공식 문서: Webpack
• SystemJS 공식 문서: SystemJS