Babel과 tsc

Babel과 tsc

📖 Introduction

프론트엔드 개발 환경에 대한 강의를 듣던 도중 컴파일러 역할을 하는 babel이 Typescript 환경에서도 필요한지에 대한 궁금증이 생겨 이에 대해 조사해보고 정리해보려고 한다.

Babel의 역할

• Javascript 컴파일러로 Babel은 ECMAScript 2015+ 코드를 현재 및 이전 브라우저 또는 환경에서 이전 버전과 호환되는 JavaScript 버전으로 변환
• babel-polyfill을 통해서 폴리필 기능 제공
• JSX 구문 변환

Typescript 환경에서 Babel의 역할

Babel은 타입 주석을 제거하는 역할만 할 뿐 타입 검사를 수행하지 않는다.

tsc(TypeScript Compiler)의 역할

• Typescript로 작성된 코드를 Javascript로 변환, 동시에 타입 검사
• TypeScript는 기본적으로 최신 ECMAScript 표준을 따르기 때문에 tsc는 최신 JavaScript 기능을 포함한 TypeScript 코드를 이전 버전의 JavaScript로도 변환 가능

Typescript환경에서 어떤 것을 컴파일러로 사용해야할까?

바로 타입 검사는 tsc로 Javascript 변환 작업은 Babel로 하는 것이 좋다.
우선 두 컴파일러를 모두 사용하지 않는 이유는 거의 유사한 작업을 수행하기 때문에 두 컴파일러를 모두 사용하면 빌드 시간이 길어지게 되고, 트랜스파일링 결과에 미세한 차이가 생길 수 있기 때문
-> 따라서 tsc로 우선 타입 검사를 수행 이후, babel로 Javascript 트랜스파일링을 한다.

그렇다면 왜 tsc로 Javascript 트랜스파일링을 하지 않고 babel을 사용하는 것일까?
그 이유는 babel의 경우 Javascript 코드를 변환할 때 Typescript의 타입 선언이 무시되고 타입 정보가 제거된다. 따라서 더 빠른 속도로 트랜스파일링이 가능하기 때문이다.

🤔 결론

Typescript 환경에서도 Babel은 사용된다!

참고

https://babeljs.io/docs/
https://chamdom.blog/babel-and-tsc/
https://blog.qvil.dev/typescript/typescript-with-babel