babel-preset-typescript 시도 정리

[JaeYeopHan]

TypeScript with babel :tada:

babel 7이 release 되면서 preset 중 하나로 typescript preset이 추가되었습니다.

Reference: https://github.com/Microsoft/TypeScript-Babel-Starter

기존에 babel을 사용하여 ES.next 문법을 사용하시던 분들에게 TypeScript에 대한 진입 장벽이 조금이라도 낮아지지 않을까 하는 생각에 시도해봤고 그 경험을 공유합니다.

:wrench: Installation

webpack 4 개발 환경 기반으로 작성되었습니다.

npm i -D @babel/core@7.0.0 @babel/cli@7.0.0 @babel/plugin-proposal-class-properties@7.0.0 @babel/plugin-proposal-object-rest-spread@7.0.0 @babel/preset-env@7.0.0 @babel/preset-typescript@7.0.0 babel-loader@8.0.0

역시나 많은 devDependencies가 필요합니다. 리스트로 정리하면 다음과 같습니다. (명불허전 babel)

• @babel/core@7.0.0
• @babel/cli@7.0.0
  • loader 사용 시 필요없습니다 :)
• @babel/plugin-proposal-class-properties@7.0.0
• @babel/plugin-proposal-object-rest-spread@7.0.0
• @babel/plugin-transform-runtime
• @babel/preset-env@7.0.0
• @babel/preset-typescript@7.0.0
• @babel/runtime
• babel-loader@8.0.0

.babelrc

{
    "presets": [
        "@babel/env",
        "@babel/typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ]
}

webpack.config.js

webpack 설정 파일입니다. (babel과 관련된 설정만 일부 발췌)

resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
},
module: {
    rules: [{
        // Include ts, tsx, and js files.
        test: /\.(tsx?)|(js)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
    }],
}

:memo: Reports

preset-typescript로 돌려본 결과입니다.

1. const enum parsing error

• atsl, ts-loader에서는 잘 동작하던 코드들인데, 에러가 발생했다.
• const enum을 사용하고 있었음
  • const enum vs enum posting 참고
  • const enum을 enum으로 변경하면 제대로 컴파일 된다.

2. Uncaught ReferenceError: regeneratorRuntime is not defined

Reference: https://babeljs.io/blog/2017/09/12/planning-for-7.0#external-helpers-transform-runtime-babel-polyfill

이 문제를 해결하기 위해선 다음 두 플러그인이 추가적으로 필요하다.

• @babel/plugin-transform-runtime를 devDependency에 포함.
• @babel/runtime를 dependency에 포함.

3. constructor(private root: HTMLElement) parsing

• contructor에서 access modifier와 함께 선언을 해주면 바로 class의 member로 할당된다.
  • 클래스 내에서 this.으로 접근이 가능.
• babel에서는 이 문법을 지원하지 않는다.
• error는 발생하지 않아서 디버깅해봐야 알 수 있음.

:gift: Bonus

마이그레이션 해둔 게 아까워서, dev 환경에서 re-build time을 비교해봤습니다. 비교 대상은 다음 세 가지 입니다.

• tsc 기반 awesome-typescript-loader
• tsc 기반 ts-loader
• @babel/preset-typescript 기반 babel-loader

atl	ts-loader	babel-loader
1270ms	3602ms	1870ms

:pray: IMHO

• 일단 설치해줘야 하는게 너무 많습니다.
  • 이미 복잡할대로 복잡한 webpack / babel 조합에 복잡도를 더해주고 있는 것 같습니다.
• babel이 typescript를 지원하다길래 기존의 babel 유저들에게는 babel이 친숙할 수도 있겠다 싶었지만 시도해본 경험으로는 아닌 것 같습니다.
• 버그 및 미지원 syntax 가 너무 많습니다. (위 report 참고)
  • Vanilla로 구성된 프로젝트를 기반으로 마이그레이션을 시도했는데도 이 정도 미지원 syntax가 발견되었습니다. React 기반의 프로젝트는 이 보다 더 심할 것 같습니다.

[SoYoung210]

🎁 @JaeYeopHan 3. constructor(private root: HTMLElement) parsing 이 이슈는 babel-plugin-proposal-class-properties 를 통해 해결 가능합니다.

위 문서에는 7.0 버전 이었는데 7.3.0 으로 올라가며 해결된것 같기도 합니다 🤔

해당 플러그인 설치 후 .babelrc 파일을 다음과 같이 수정해주면 됩니다.

{
    "presets":  [
        "@babel/env",
        "@babel/typescript",
        "@babel/react"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
    ]
}

저는 react, typescript 환경이어서 preset을 위와같이 설정했습니다.

[SoYoung210]

버그 및 미지원 syntax 가 너무 많습니다. react 기반의 프로젝트에 babel-loader 를 적용 하고 있는데, 이 이슈에 코멘트로 계속 참여하겠습니다.!