typescript 번들링

typescript 사용을 위한 웹팩 설정으로, 크게 2가지 방법이 있다.

• ts-loader
• babel-loader (& preset-typescript)

각각의 장단점이 있다.
둘의 차이는 빌드과정에 있다.

babel-loader는 type과 관련된 구문을 무시(제거)한 채 빌드를 진행한다.
ts-loader는 모든 구문을 파악, 타입들을 체크해가면서 빌드를 진행한다.

ts-loader 사용

• 장점: 강력한 타입체크
• 단점: 빌드시간이 길다. 타입에러가 있을 시 빌드가 불가하다.

package.json

"dependencies": {
  "typescript": "^4.1.3", // typescript 컴파일러?(또는 트랜스파일러)
  "ts-loader": "^8.0.12", // webpack에서 컴파일러를 사용할 수 있도록 해준다.
}

webpack.config.js

module.exports = (env, ooptions) => {
  return {
    //...
    module: {
      rules: [
        {
          { 
          	test: /\.tsx?$/,
          	use: [{ loader: 'ts-loader' }]
    	  }
        }
      ]
    }
  }
}

babel-loader 사용

• 장점: 빌드시간이 짧다, babel의 다양한 플러그인을 사용할 수 있다.
• 단점: 약한 타입체크로 타입스크립트의 장점을 살리지 못한다.

package.json

"dependencies": {
  "@babel/core": "^7.12.10", // 바벨 핵심 기능이 담긴 패키지
  "@babel/preset-env": "^7.12.11", // 최신버전의 javascript 해석을 위한 플러그인 모음
  "@babel/preset-typescript": "^7.14.5", // typescript 해석을 위한 플러그인 모음
}

webpack.config.js

module.exports = (env, ooptions) => {
  return {
    //...
    module: {
      rules: [
        {
          { 
            test: /\.tsx?$/,
          	use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['@babel/preset-env', {
                            targets: {
                                browsers: ['last 2 chrome versions']
                            }
                        }], 
                        '@babel/preset-typescript',
                    ],
                }
            }]
    	  }
        }
      ]
    } 
  }
}

결론

정답은 없다.

나는 개발환경에서는 정확한 타입체크를 위해 ts-loader를 쓰고있고, 운영환경에서는 빠른 빌드와 바벨의 특화된 설정들을 사용하기위해 babel-loader를 사용하고있다.

참고

https://ui.toast.com/weekly-pick/ko_20181220