Webpack 및 Babel과 함께 TypeScript를 사용하는 방법

TypeScript를 Webpack 및 Babel과 결합하면 강력한 유형 검사, 효율적인 모듈 번들링 및 최신 JavaScript 기능을 사용할 수 있는 기능을 제공하여 개발 프로세스를 개선할 수 있습니다. 이 가이드에서는 Webpack 및 Babel로 TypeScript를 설정하는 단계를 다룹니다.

1단계: 프로젝트 설정

먼저 새로운 Node.js 프로젝트를 초기화하고 필요한 종속성을 설치합니다.

npm init -y
npm install typescript webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-typescript --save-dev

2단계: TypeScript 구성

TypeScript 옵션을 구성하려면 tsconfig.json 파일을 만드세요. 이 파일은 TypeScript에 코드를 컴파일하는 방법을 지시합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3단계: Babel 구성

Babel 구성을 위한 .babelrc 파일을 만듭니다. 이 파일은 Babel에게 TypeScript 코드를 트랜스파일링하는 데 사용할 사전 설정을 알려줍니다.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

4단계: Webpack 구성

TypeScript 파일을 번들링하기 위해 Webpack을 설정하려면 webpack.config.js 파일을 만듭니다. 이 파일은 Webpack이 다양한 유형의 파일을 처리하는 방법을 정의합니다.

const path = require('path');

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

5단계: 소스 파일 만들기

애플리케이션의 진입점 역할을 할 src/index.ts 파일을 만듭니다.

console.log('Hello, TypeScript with Webpack and Babel!');

6단계: 빌드 및 실행

Webpack을 사용하여 TypeScript 코드를 단일 JavaScript 파일로 묶습니다. build 명령을 실행하여 출력을 생성합니다.

npx webpack

결론

TypeScript를 Webpack 및 Babel과 통합하면 최신 웹 개발을 위한 강력한 설정이 제공됩니다. 이러한 단계를 따르면 개발자는 Webpack으로 코드를 효율적으로 번들링하고 Babel로 트랜스파일링하는 동안 TypeScript의 유형 검사 및 최신 JavaScript 기능을 활용할 수 있습니다.