Node.js - Babel이란?

Babel

0. Babel이란?

바벨이란 자바스크립트가 es5 -> es6 -> es7 등으로 점차 올라가면서 생기는 문제를 해결하기 위한 역할을 한다.

최신 자바스크립트 문법을 지원하지 않는 구형브라우저인 경우 해당 페이지가 나오지 않을 때가 있다. 이러한 경우 전체적인 자바스크립트 문법을 구형 브라우저 버전에 맞게 수정해야하는 불상사가 생길수도 있다. ( 예시 : JSX문법 )

이를 방지하기 위해 최신 자바스크립트 문법을 구형브라우저에서도 작동할 수 있게 자바스크립트 문법을 변경해주는 transpiler( or compiler )인 babel을 사용한다.

 

 

1. Babel의 작용 시점

바벨은 작용 시점을 알기 위해서는 컴파일타임과 런타임에 대한 간략한 지식이 필요하다.

• 컴파일 타임 : 소스코드를 컴퓨터가 이해할 수 있는 기계어코드로 변환시키는 작업을 컴파일이라고 한다. 이러한 과정이 일어나는 시점을 컴파일 타임이라고 한다.
• 런타임 : 컴파일과정이 끝나 실행가능한 상태가 되었을 때, 사용자가 실행가능한 프로그램을 조작하여 동작이 이루어지는 시점을 런타임이라고 한다.

바벨은 이 두가지 시점 중에서 컴파일 타임에 일어난다. 구형브라우저에서도 이해할 수 있게 레거시 코드로 컴파일하기 때문에 컴파일 시점에서 바벨이 작동한다.

 

 

2. babel-polyfill이란?

바벨만으로는 이러한 자바스크립트 코드를 완벽하게 컴파일할 수는 없다.

ES6이상에서 추가된 promise,  map, set, filter, reduce 등의 새로운 메서드들은 적용시킬 수 없기 때문에 반쪽자리 컴파일이 완성되게 된다. 이러한 부분을 보완하기 위해  babel-polyfill이 필요하다.

 

 

3. Babel 버전

현재 바벨은 7.15버전까지 나왔다.

바벨 7버전 이전에는 .babelrc파일을 생성하여 설정파일들을 작성하였다.

바벨 7버전 이후에는 babel.config.js 파일을 생성하여 설정파일들을 작성한다.

참고로 공식 홈페이지에서는 babel.config.js로 설정하는 것을 권장하고 있다.