바벨(Babel) 이란?

“Babel is a JavaScript compiler.

Use next generation JavaScript, today”

(“바벨은 자바스크립트 컴파일러이다.

차세대 자바스크립트를 오늘 바로 사용해보세요.”)

위 글은 바벨(Babel) 공식 홈페이지(https://babeljs.io/)메인에 있는 글이다. 한 마디로 잘 정의되어 있는 것 같다.

바벨(Babel)은 무료 오픈 소스 자바스크립트 트랜스컴파일러(transcomplier)이다.

ECMAScript 2015+(ES6+)를 지원하지 않는 브라우저 또는 플랫폼에서 인식 가능한 버전의 자바스크립트로 변환시켜준다. 그러므로 개발자는 크로스 브라우징(Cross Browsing)을 고려하면서 최신의 자바스크립트 문법을 편하게 사용할 수 있는 것이다.

바벨의 3단계

1. 파싱(Parsing)

2. 변환(Transforming)

3. 출력(Printing)

플러그인(Plugins)

여기서 바벨은 파싱과 출력만 한다. 즉, 구문 분석하고 동일한 코드를 다시 생성하는 것만 한다. 그러므로 변환(Transforming)을 하려면 플러그인(Plugin)을 추가해야 한다.

예를 들어 화살표 함수(Arrow function)를 변환하려면 @babel/plugin-transform-arrow-functions 플러그인(Plugin)을 추가하면 된다.(자세한 플러그인 확인 경로: https://babeljs.io/docs/en/plugins)

변환전:

var a = () => {};

변환후:

var a = function () {};

위처럼 필요에 따라 다양한 플러그인(Plugin)을 추가해서 사용 할 수도 있지만, 개별적으로 플러그인(Plugin)을 추가하는 것 보다 플러그인셋트라고 할 수 있는 프리셋(Presets)을 주로 이용한다.

바벨 프리셋(Babel Presets) 보기: https://babeljs.io/docs/en/presets

바벨 폴리필 @babel/polyfill

바벨(Babel)이 자바스크립트의 문법이 아닌 것들을 자바스크립트에서 사용할 수 있게 플러그인(Plugin)을 통해 변환시켜 준다 하더라도, ECMAScript 2015+(ES6+)에서 새롭게 정의된 객체(Promise, map, set 등)들은 폴리필(polyfill)을 추가해야 변환이 된다.

바벨 로더(babel-loader)

위 모든 것들을 개별 세팅 해서 사용는 것 보단 웹팩(Webpack)으로 통합해서 하는 것이 일반적이다. 웹팩(Webpack)은 오픈 소스 자바스크립트 모듈 번들러이다. 주로 자바스크립트를 위한 모듈 번들러이지만 호환 플러그인을 포함하는 경우 HTML, CSS, 이미지 등을 변환 할 수 있다.

웹팩(Webpack)이 모듈을 번들링할 때 바벨을 사용 하려면 babel-loader를 설치하면 된다.

바벨(Babel)을 간략히 체험해보고 싶다면, 공식 홈페이지 메뉴에서 Try it out (https://babeljs.io/repl)을 클릭하면 바로 테스트 및 확인이 가능한 화면이 나온다. 왼쪽 사이드 메뉴에서 환경 설정을 셋팅한 후 코드를 작성을 하면 변환된 코드를 바로 확인 할 수 있다.

변환전:

let a = 1;
const b = 2;
()=>{};

변환후:

var a = 1;
var b = 2;
(function () {});

Front End Developer

바벨(Babel) 이란?