Babel

Babel은 최신 Javascript(ES6+, TypeScript, JSX 등) 구 버전의 Javascript(ES5)로 변환시켜주는 트랜스파일러 이다.

브라우저의 종류나 실행 환경에 따라 최신 문법을 지원하지 않는 경우, Babel을 사용하여 코드를 변환하면 모든 환경에서 안정적으로 실행이 가능하다.

특징

크로스 브라우징

es6 -> es5로 변환시켜줌으로서 브라우저 하위호환을 지원한다.
각 브라우저 별 상이한 스크립트 엔진의 호환성을 유지한다.

Polyfill

개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용 할 수 있는 코드 조각이나 플러그인을 말함.

런타임(브라우저에서 실행되는 시점)에서 필요한 기능을 주입한다.

@babel/polyfill 또는 core-js를 사용하여 새로운 내장 객체(예: Promise, async/await 등) 도 변환 가능.

플러그인과 프리셋 지원

다양한 플러그인을 활용하여 특정 문법을 변환 할 수 있다.
자주 사용하는 변환들을 모아둔 프리셋을 제공한다.

@babel/preset-env → ES6+ 문법을 브라우저 호환 코드로 변환
@babel/preset-react → JSX 변환
@babel/preset-typescript → TypeScript 변환