babel loader & @babel preset typescript vs ts loader 간단한 정리

babel-loader & @babel/preset-typescript vs ts-loader

webpack에서 타입스크립트를 읽을 수 있는 loader는 2가지가 있다(사실 3가지)

• 2021년 8월 11일 기준
  • babel-loader + @babel/preset-typescript ( Last publish : 7 days ago )
  • ts-loader (Last publish : 8 days ago)
  • Awesome-typescript-loader (Last publish : 3 years ago)

2가지 모두 webpack에서 ts파일을 js파일로 바꾸는데 사용된다.

babel-loader + @babel/preset-typescript

• 타입 체킹을 하지 않기 때문에 컴파일 속도가 빠르다.

ts-loader

• 타입체킹을 기본적으로 진행하기 대문에 컴파일 속도가 느리다
  • 하지만, transplieOnly 옵션을 통해 컴파일 속도를 증가시킬 수 있다.
• HMR(hot module reloading 사용 불가) - https://github.com/TypeStrong/ts-loader#hot-module-replacement

하지만 위 두개의 loader가 type checking을 하지 않으면 webpack-dev-server 혹은 빌드 환경에서 type error를 잡아낼 수 없다

babel-loader의 경우 tsc --watch를 통해 따로 타입을 체크할 수 있겠지만, 플러그인을 사용하는 것이 더 편리하다.(ts-loader도 transpileOnly 옵션을 사용한다면 고려해볼만함.)

타입체킹

기본적으로 ts-loader는 타입체크를 하게 되어있다. 컴파일러가 타입 체크를 하는 과정은 오래걸리는데, 그래서 이를 따로 빼서 실행시키기도 한다.

• 2021년 8월 13일

  • fork-ts-checker-webpack-plugin(Last publish : 5days ago)

    • 타입 체킹 하는 부분을 다른 프로세스에서 실행한다. 실행 속도 향상을 기대할 수 있고, ts-loader, babel-loader와 같이 사용하면 type error를 확인할 수 있다.

결론

사실 어떤 것을 사용하든 js파일로 실행시키는건 변함이 없다. 하지만, babel-loader + @babel/preset-typescript를 사용한다면 폴리필까지 같이 챙겨 갈 수 있을 것이다.(물론, ts-loader와 babel을 따로 써도 가능). ts-loader + transplieOnly, babel-loader + @babel/preset-typescript 와 같이 사용한다면 컴파일 속도도 비슷한 것 같다(큰 단위 프로젝트는 잘 모르겠음).

참고

• https://jeonghwan-kim.github.io/dev/2021/03/08/babel-typescript.html
• https://ui.toast.com/weekly-pick/ko_20181220[번역글]
  • https://iamturns.com/typescript-babel/[원문]