타입스크립트(TypeScript)와 Babel을 함께 사용하는 경우, Babel 플러그인을 관리하는 방법은 매우 중요합니다. 이 글에서는 타입스크립트와 Babel을 함께 사용하는 환경에서의 플러그인 관리 방법에 대해 알아보겠습니다.

1. Babel 플러그인 설치

먼저, Babel을 사용하여 TypeScript 파일을 변환하기 위해 필요한 Babel 플러그인들을 설치해야 합니다. 일반적으로 TypeScript와 함께 사용되는 @babel/preset-env와 @babel/preset-typescript 플러그인을 설치합니다.

npm install @babel/core @babel/preset-env @babel/preset-typescript --save-dev

2. babel.config.js 설정

프로젝트 루트에 babel.config.js 파일을 생성하고 다음과 같이 Babel 설정을 추가합니다.

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
        },
      },
    ],
    "@babel/preset-typescript",
  ],
};

위 설정은 @babel/preset-env를 사용하여 최신 버전의 Node.js 환경에서 동작하도록 코드를 변환하고, @babel/preset-typescript를 사용하여 TypeScript 코드를 변환합니다.

3. Babel 플러그인 추가

만약 추가적인 Babel 플러그인이 필요하다면, babel.config.js 파일에 플러그인을 추가할 수 있습니다. 예를 들어, 클래스 프로퍼티(class properties) 문법을 사용하기 위해서 @babel/plugin-proposal-class-properties 플러그인을 추가하는 방법은 다음과 같습니다.

module.exports = {
  presets: [
    //...
  ],
  plugins: [
    "@babel/plugin-proposal-class-properties",
  ],
};

4. 타입스크립트 설정

마지막으로, tsconfig.json 파일에 다음과 같이 jsx 옵션을 추가하여 Babel이 JSX 코드를 변환할 수 있도록 설정해야 합니다.

{
  "compilerOptions": {
    "jsx": "react",
    //...
  },
}

이제 타입스크립트와 Babel을 함께 사용할 때 필요한 플러그인을 관리하는 방법에 대해 알아보았습니다. 이를 통해 프로젝트에 필요한 Babel 플러그인을 적절하게 관리하여 보다 효율적으로 개발할 수 있습니다.

참고문헌:

• Babel 공식 문서