타입스크립트를 한번 쓰고 나서는 웬만하면 자바스크립트로 작성하게 되는 경우가 없어진 것 같다. 그만큼 타입스크립트로 코드를 작성하는 경우가 많은데 그동안 타입스크립트를 사용하기 위해 개발환경을 구축하는 설정 부분에서 잘못 설정한 부분이 있어 수정을 해보려고한다.
webpack + ts
우선, webpack와 타입스크립트를 사용하기 위한 방법으로는 크게 두가지 방식이 있다. babel-loader를 사용하여 코드를 트랜스파일 하는 경우라면 @babel/preset-typescript를 사용하여 TypeScript 파일을 처리할 수도 있고 아니면 ts-loader를 사용해서도 처리가 가능하다.
그런데 나는 이걸 둘다 사용하고 있다.
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
plugins: [
["@babel/transform-runtime"]
]
},
},
{
loader: 'ts-loader',
options: {
transpileOnly: true,
}
}]
},
// 생략 ...babel-loader + @babel/preset-typescript
babel-loader가 웹팩과 통합하여 기존의 코드를 트랜스파일 하는 과정에서 @babel/preset-typescript를 추가하면 TS -> JS로 트랜스파일만 해주는 과정을 추가해주는 프리셋이다. 따로 타입 체킹을 하지 않기 때문에 빠르다는 장점이 있었다.
ts-loader
ts-loader는 타입스크립트 트랜스파일 단계를 웹팩과 통합하기 위해서 사용하는 로더이다. 하지만 트랜스파일과 타입검사를 동시에 진행하기 때문에 코드가 거대해지면 타입검사로 인해 속도가 느려진다는 단점이 존재했었다.
그래서 이를 개선하기 위해서 fork-ts-checker-webpack-plugin을 같이 사용해주면 좋다.
fork-ts-checker-webpack-plugin 은 타입스크립트 타입 검사를 별도로 실행하는 웹팩 플러그인으로 웹팩을 실행하면 먼저 컴파일과 번들링만 빨리 실행하고 타입체크는 따로 실행되어 위의 단점을 개선할 수 있다.
그래서
나의 경우에는 개발환경에서 타입체킹을 하기 위해서 ts-loader를 사용하고 운영환경에서는 개발환경에서 타입체킹이 되었기 때문에 빠르게 빌드시키고 그 밖에 babel-loader에서 할 수 있는 폴리필 등의 장점을 가지고자 @babel/preset-typescript을 사용하게 되었다.
Reference
