모듈화를 위한 프로젝트 환경 재구성(3) - Babel 플러그인 설정

지금까지 typescript를 위한 라이브러리 설치들을 진행했고, 그 중 마지막 Babel에 대해서 알아보도록 하겠습니다.

Babel이란?

Babel은 자바스크립트 컴파일러입니다.
즉, 지금 우리가 매일 접하는 웹페이지는 ES6+ 이전 문법의 자바스크립트로 구성되어 있는데 우리가 개발언어로 쓰는 Typescript를 바로 배포하면 먼저 에러가 발생하게 될 것 입니다.

개발자 입장에서는 '엥? 우리는 개발할때 발전의 발전을 거듭한 라이브러리랑 프레임워크를 사용하는데 실제 구동되는 웹에서는 예전 ES5에 기반한다고?' (제 생각..^^..이었습니다) 싶지만.. 네 그렇다네요

그래서 최신 Typescript에서 구 버전 자바스크립트로 컴파일을 해줄 녀석이 바로 Babel입니다. 해당 작업을 Chaining 이라고 합니다.

다음은 Babel이 ES6+를 이해하는 방식입니다.

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

TS에서는 Babel이 왜 필요한가요?

하지만 Babel은 별도로 type check를 하지 않는데, 그래서 Typescript preset이 필요합니다.
따라서 preset까지 적용하게 되면 이런 프로세스를 거치게 됩니다.

@babel/preset-typescript

@babel/preset-typescript 을 적용하게 되면 다음과 같이 Type을 ES6+ 식으로 해석하여 작동합니다.

// Typescript
const x: number = 0;

// Javascript
const x = 0;