이전 포스트에 작성했던 Webpack과 함께 자주 언급되는 Babel에 대해서 알아보자!
Babel 이란?
Babel은 자바스크립트 컴파일러다.
공식 사이트의 문서에 따르면 Babel은 자바스크립트 컴파일러라고 명시되어 있다.
그런데 왜? 자바스크립트 컴파일러를 따로 사용해야 하는 것 일까?
Babel은 ECMAScript 2015+ 코드를 현재 및 과거 브라우저와 같은 환경에서 호환되는 버전의 자바스크립트로 변환하는데 주로 사용되는 도구이다.
사이트의 추가 설명을 좀더 풀어서 설명하자면, 최신 자바스크립트 문법을 이해하지 못하는 브라우저들을 위해 Babel이 해당 브라우저들이 이해할 수 있는 문법으로 변환해주는 도구이다.
Babel 이라는 도구를 이용하게 되면 하위 호환 버전의 코드로 일일이 수정해주지 않아도 최신 문법을 지원하지 않는 브라우저에서도 어플리케이션을 사용 할 수 있게 되는 것이다!
// Babel Input: ES6 arrow function
[1, 2, 3].map(n => n + 1);
// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
return n + 1;
});Babel Plugin, Preset
- Parsing (파싱) : 코드를 읽고 추상 구문 트리로 변환하는 단계
- Transforming (변환) : 추상 구문 트리를 변경하는 단계
- Printing (출력) : 변경된 결과물을 출력하는 단계
이러한 세가지 단계를 거쳐서 Build를 진행하는데 Babel은 파싱, 출력 부분을 담당하고 변환 부분은 Plugin이 담당하게 된다.
Plugin은 Babel이 어떠한 코드를 어떤식으로 변환할 지에 대한 규칙을 나타낸다.
이때 사용하는 Plugin은 직접 만든 커스텀 플러그인을 사용해도 되고, 이미 만들어진 플러그인을 가져와서 사용해도 된다.
하지만 매번 프로젝트를 진행할 때마다 Plugin을 가져와서 쓰는 것이 번거롭게 느껴지기 때문에, Plugin들을 목적에 따라 묶어놓은 세트를 Preset(프리셋)이라고 한다.
Babel Polyfill
Babel을 이용해서 최신 문법으로 작성된 코드를 하위 자바스크립트로 변환할 수 있지만,
최신 문법이 아닌 최신 함수의 경우에는 Babel로 해결이 불가능하다. (문법과 함수는 다르다!)
브라우저 엔진이 최신 함수를 지원하지 않는 다면 해당 함수(최신 함수)는 동작하지 않을 것이다.
이를 해결하기 위해서 Polyfill은 프로그램 실행 시에 스크립트에 사용자가 원하는 최신 함수를 추가하게 된다. 자바스크립트는 동적 언어이기 때문에 어떠한 함수라도 스크립트에 추가가 가능하다는 점을 이용한 것이다 🙄
Polyfill은 프로그램이 처음 실행 될 때 지원하지 않는 기능들을 추가하므로, Babel은 컴파일시 실행되지만 Polyfill은 런타임에 실행되게 된다.
