webpack에서 타입스크립트를 읽을 수 있는 loader의 종류에는 2가지가 있다. (2021년 10월 8일 기준)
- babel-loader + @babel/preset-typescript (Last Publish: 2 months ago)
- ts-loader (Last Publish: 18 days ago)
Awesome-typescript-loader(Last Publish: 3 years ago)
babel-loader + @babel/preset-typescript와 ts-loader의 차이는 컴파일 속도와 타입 체킹 유무이다. 속도의 경우 @babel/preset-typescript가 더 빠르며(ts-loader도 옵션으로 차이를 줄일 수 있어서 차이가 크지 않다.), 타입 체킹도 플러그인으로 해결 할 수 있다. 기존 레거시 코드 설정도 babel-loader로 구성되어 있고 IE에 대한 폴리필도 지원해야하는 경우, @babel/preset-typescript로 babel-loader를 확장하여 구현할 수 있다.
babel-loader + @babel/preset-typescript
- 타입 체킹을 하지 않기 때문에, 컴파일 속도가 빠르다.
- 폴리필 환경 설정이 가능하다.
ts-loader
- 타입 체킹을 기본적으로 진행하기 때문에 컴파일 속도가 느리다.
- transplieOnly 옵션을 통해 컴파일 속도를 증가시킬 수 있다.
- HMR (hot module reloading) 사용이 불가능하다.
- 폴리필 환경 설정을 하려면, 추가적으로 babel 설정이 필요하다.
타입 체킹을 하지 않을 경우, webpack-dev-server, 빌드 환경 등에서 type error 를 잡아 낼 수 없다.
Awesome-typescript-loader
awesome-typescript-loader를 사용하지 않는 것이 좋다. 현재, 3년 동안 github에서 update가 되지 않고 있으며, ts-loader의 발전으로 개발이 중지된 상태이다. 위 링크에 대한 요약은 아래와 같다.
- webpack 4 지원에 대한 issue가 진행중이다.
- TypeScript v3.2에 대해 컴파일을 하지 못하고 오류가 난다.
- webpack v4 버전에서 컴파일 속도가 현저하게 느려진다.
이전에는 typescript 공식 문서에 awesome-typescript-loader의 사용을 권장했지만, 현재는 ts-loader 사용을 권장으로 내용이 바뀌었다.(2019/8/16 에 병합)
개발이 중단 되었기 때문에, 향후 typescript version의 증가로인한 오류가 발생할 수 있으므로, 사용을 하지 않는것이 좋다.
업데이트 중지의 이유는 원래 awesome-typescript-loader의 저자가 ts-loader를 고속화하는 목적으로 개발했고, ts-loader의 발전으로 더 이상 개발할 필요없게되어 중지되었다.
댓글