들어가며

프로젝트의 webpack 설정을 다시 점검하는 시간을 가졌다. 그러던 중 ts와 tsx 파일을 처리하는 로더에 babel-lader와 ts-loader가 함께 사용된 것을 확인했다. 꼭 둘 다 사용해야 하는 것인지 확실히 조사가 필요했다. 또한 관련 loader로 esbuild-loader도 존재하는 것을 확인했다. 따라서 이번 글에서는 Transpiling을 해주는 각 loader에 대해 정리하려한다.

babel-loader

babel-loader의 npm 페이지에서는 babel-loader를 아래와 같이 설명한다.

This package allows transpiling JavaScript files using Babel and webpack.

해당 loader의 option에서 preset과 plugin 설정을 할 수 있다.

바벨과 타입스크립트의 아름다운 결혼 게시글에 의하면 babel 7 버전 이후에는 typescript도 지원한다고 한다.

단, typescript를 처리하기 위해서는 @babel/preset-typescript 프리셋이 필요하다.

type checking을 하는가?

babel로 typescript를 처리하기 위해서는@babel/preset-typescript 프리셋이 필요하다고 했다. 따라서 프리셋에 type checking 여부를 수행하는 플러그인이 있는지 확인하면 transpiling을 하는과 동시에 type chekcing을 하는지 추론할 수 있다.

@babel/preset-typescript은 @babel/plugin-transform-typescript 플러그인을 포함하고 있다.

해당 플러그인의 페이지를 확인하면 다음과 같은 설명이 있다.

This plugin adds support for the types syntax used by the TypeScript programming language. However, this plugin does not add the ability to type-check the JavaScript passed to it. For that, you will need to install and set up TypeScript.

즉, 해당 플러그인은 type 구문을 지원하기 위한 플러그인이고 별도의 type checking을 지원하지 않는다.

혹시나 @babel/preset-typescript 프리셋이 type checking 기능이 있나 확인했만, 문서에서 관련된 내용을 발결하지 못했다.

결론적으로 @babel/preset-typescript 에 type checking을 하는 기능이 있는지 확인하진 못했다. 하지만 typescript 공식 문서에 의하면 babel은 type checking 기능을 지원하지 않는다. 따라서 babel loader역시 type checking 기능을 제공하지 않을 것으로 추측한다.

ts-loader

ts-loader의 npm 페이지에서는 ts-loader를 아래와 같이 설명한다.

ts-loader This is the TypeScript loader for webpack. (…중략) There are two types of options: TypeScript options (aka "compiler options") and loader options. TypeScript options should be set using a tsconfig.json file. Loader options can be specified through the options property in the webpack

즉, ts-loader는 tsconfig.json에 명시된 option에 따라 typescript를 컴파일한다.

따라서 tsconfig.json의 target 옵션이 ES5로 지정되어 있으면, webpack으로 빌드된 파일이 ES5에 맞게 transpiling될 것으로 될 것이다.

type checking을 하는가?

ts-loader는 compiler 옵션을 제공한다. 해당 옵션은 ts-loader로 실행할 compiler를 지정하는 옵션이다. 기본 값은 typescript이다.

ts-loader의 코드를 확인하면 compiler 옵션이 typescript 일때 typescript 모듈을 가져와서 tsc을 이용해서 compile하는 것을 확인할 수 있다.

esbuild-loader

esbuild-loader의 npm 페이지에서는 esbuild-loader를 아래와 같이 설명한다.

esbuild is a JavaScript bundler written in Go that supports blazing fast ESNext & TypeScript transpilation and JS minification. esbuild-loader lets you harness the speed of esbuild in your Webpack build by offering faster alternatives for transpilation (eg. babel-loader/ts-loader) and minification (eg. Terser)!

esbuild-loader는 위에서 소개한 두 개의 로더에 비해 비교적 최근에 나온 로더이다.

해당 로더는 GO 언어로 구현돼 있기 때문에 위 두 개의 로더보다 더 빠르게 동작한다고 한다.

esbuild-loader와 babel-loader의 속도를 비교한 결과는 Webpack 빌드에 날개를 달아줄 Esbuild-Loader 글에서 확인 가능하다.