[JS] Babel 이란?

Babel이란?

Babel은 자바스크립트의 최신 버전을 이전 버전과 호환되는 형태로 변환해 주는 도구입니다. 최신 자바스크립트 문법과 기능을 사용하여 코드를 작성할 수 있으며, Babel은 이를 이전 버전의 자바스크립트로 변환하여 구형 브라우저와의 호환이 되게 해주는 컴파일러 입니다.

// 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;
});

Babel의 주요 기능

- 문법 변환 (Syntax Transformation)

Babel은 최신 자바스크립트 문법을 지원하지 않는 환경에서도 코드를 실행할 수 있게 합니다. 예를 들어, 화살표 함수, 템플릿 리터럴, 클래스 등과 같은 ES6+ 문법을 구형 브라우저에서도 사용할 수 있도록 변환해 줍니다.

 

- 플러그인 (Plugins)

Babel은 다양한 플러그인을 제공하여 개발자가 필요에 따라 원하는 기능을 추가하거나 사용하지 않을 기능을 제거할 수 있습니다. 플러그인은 Babel의 동작을 확장하며, 자신만의 변환 규칙을 작성하여 사용할 수도 있습니다.

 

- 폴리필 (Polyfill)

Babel은 폴리필(polyfill)도 지원합니다. 폴리필은 구형 브라우저에서 지원되지 않는 기능을 구현하는 코드로, 자바스크립트의 기능을 확장하여 구형 브라우저에서도 동작하도록 합니다. Babel은 필요한 폴리필을 자동으로 추가하거나 사용자가 직접 선택할 수 있도록 도와줍니다.

 

JS에서 Babel을 사용하는 이유

javascript는 컴파일러가 아닌 인터프리터로 동작합니다. 그래서 기계어로 변환하는 속도적인 면에서 조금 느릴 수 있습니다.

그리고 Babel을 사용하는 이유는 위의 Babel에서 제공되는 주요 기능들을 확장해서 사용할 수 있기 때문입니다.

 

참고

https://babeljs.io/docs/

What is Babel? · Babel

https://velog.io/@suyeon9456/Babel

Babel 직접 적용하며 이해하기