Babel 개념

Babel이란?

Babel is a JavaScript compiler

Babel은 ES6이상의 문법 코드들을 예전 브라우저에서도 돌아갈 수 있도록 바꿔주는 도구입니다.

바벨은 plugin의 모음으로 동작합니다.

바벨이 하는 일

1. 구문을 바꿔줍니다.

2. Polyfill을 넣어줍니다.

3. polyfill은 특정 브라우저에서 동작하지 않는 코드의 기능을 실행시켜주는 다른 코드입니다.

4. 코드를 바꿔주기

바벨의 동작원리

1. Lexical analysis

tokenizer를 이용해 코드를 의미있는 조각(토큰)으로 나눕니다.

2. Syntax analysis

흔히 파싱이라고 한다.
1단계에서 추출한 토큰을 이용해 소스 코드의 문법 구조를 서술하는 abstract syntax tree를 생성한다.

abstract syntax tree는 토큰을 node로 가지며 토큰간의 관계를 나타낸다.
이때 토큰 간의 관계가 올바른지 검사한다.

3. Transformation

앞서 만들어진 AST(Abstract Syntax Tree)를 목표 언어에 따라 변환한다.
AST의 각 node를 거치며 동작한다.
AST의 node를 변경하거나 새로운 AST를 만들 수 있다.

4. Code Generation

앞선 단계에서 변경된 또는 새로 생성된 AST를 문자열로 된 소스코드로 만든다.

용어정리

폴리필(polyfill):

개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말한다. 폴리필은 HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 담당한다.