[Webpack] babel + Typescript 구성하기

 

 

Why Babel + Typescript?

타입스크립트 자체로 tsc(타입스크립트 컴파일러)가 있는데, 왜 babel과 연계해서 사용해야하지? 

 

맞습니다. TS 또한 Babel마냥, 브라우저 호환을 위한 이전 버전으로의 자바스크립트로 트랜스파일링이 가능합니다.

하지만, Babel을 사용함으로써, 더욱 최적화된 빌드 결과물을 얻을 수 있습니다.

 

1. 타겟을 명확하게 지정가능함 

 @babel/preset-env를 이용해, 지원하고자하는 브라우저만 대상으로 지원가능합니다.

심지어 모던 브라우저에는 최신 코드를, 구식 브라우저에는 트랜스파일링 된 코드를 제공할 수 있게 여러 번들링 파일을 생산가능합니다.

 

2. 브라우저 폴리필

최신 문법을 이전 버전에서도 쓸 수 있도록 폴리필 가능합니다.

 

3. Tree Shaking

트리 쉐이킹을 통해 안쓰는 코드들을 정리하여 최적화된 번들을 제공합니다.

 

4. 에코 시스템

babel 커뮤니티의 규모가 굉장히 크고, 커스터마이징 할 수 있도록 플러그인들이 굉장히 많습니다.

 

5. Build time performance

ts -> js 변환 시, 타입체킹이 일어나지 않기에 tsc로 빌드하는것보다 더 빠릅니다. 물론 타입체킹을 하지 않기에, 타입체킹의 이점을 챙길 수 없다 생각할 수 있으나, tsc로만 타입체킹을 진행하고 빌드를 babel로 병렬로 진행하여 이점을 챙길 수 있습니다.

 

 

 

 

Method

!! 중요 !!

만약 babel에 대한 설정 방법을 아예 모르신다면 아래 글을 참고해주세요

https://dev-dovi.tistory.com/39

[Webpack] Babel 설정하기 ( compatibility , polyfill, env etc..)

 

 

1. 관련 모듈을 설치합니다.

 

당연하지만, Typescript를 사용하니 typescript, babel에 Typescript를 처리할 수 있도록 @babel/preset-typescript를 설치합시다.

yarn add -D typescript @babel/preset-typescript

 

2. Babel 설정파일에 typescript용 프리셋을 추가합니다.

 

// .babelrc

{
	"presets": ["@babel/preset-typescript"],
    //...etc
}

 

 

3. webpack config파일에 ts 파일을 번들링 할 수 있도록 규칙을 작성합니다.

 

ts 파일 또한 babel의 번들링 대상에 포함되도록 설정함과 동시에, node_modules 은 제외합니다.

 

const config = {
  // etc....
  module: {
    rules: [
      {
        test: /\.(ts|js)$/,
        exclude: /node_moduels/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js'] // import시, 확장자 생략 가능하도록
  }
 }

 

4. tsconfig.json 작성

 

 

참고하여 자유롭게 구성하면 됩니다. 저같은 경우, 아래와 같이 작성했습니다.

https://www.typescriptlang.org/tsconfig

TSConfig Reference - Docs on every TSConfig option

//tsconfig.json
{
  "compilerOptions": {
    "module": "es2015",
    "target": "es2015",
    "noImplicitAny": true,
    "noUnusedParameters": true,
    "declaration": true,  // d.ts 파일 만들기
    "emitDeclarationOnly": true,
    "isolatedModules": true, // babel이 파일들을 안전하게 트랜스 파일 가능한지 확인
    "declarationDir": "./types" // d.ts파일 생성 시, types 디렉토리에 만든다.
  },
  "include": ["src/**/*"], // src 디렉토리 하위 파일들을 대상으로 tsc가 실행된다.
  "exclude": ["node_modules", "dist"] // 해당 경로들은 제외한다.
}

 

5. 빌드 스크립트 작성

 

먼저 해당 프로젝트가 d.ts 파일이 필요할 수 도 있기에, "build:types" 명령 스크립트를 통해, types/..d.ts 파일을 만들 수 있도록 설정합니다.

 

그리고 "build" 명령을 통해 번들링과 타입 검사 및 타입 파일을 만들 수 있도록 설정합니다. ("build:types"에 타입체킹이 포함되어 있긴한데, 이번 글에선 명시적으로 "build:type-check"까지 "build"에 포함시켰습니다.)

(p.s '&&'을 통해 여러 명령을 동시에 실행 가능합니다.)

 

//package.json

{
// etc....
    "scripts": {
        "build": "webpack --config webpack/webpack.prod.config.js && yarn build:types && yarn build:type-check",
        "build:types": "tsc --emitDeclarationOnly",
        "build:type-check": "tsc"
    }
}