Babel

 

바벨이란?

Babel은 주로 JavaScript 코드를 변환(transpile)하는 도구이다.

Babel의 주요 기능은 최신 ECMAScript(ES6 이상) 표준을 사용해 작성된 JavaScript 코드를 이전 브라우저 버전과 호환되는 ECMAScript(ES5) 코드로 변환하는 것이다.

이를 통해 개발자들이 최신 JavaScript 기능을 사용하여 개발한 코드를 이전 브라우저에서도 문제없이 실행할 수 있다.

 

Compiler? Transpiler

babel의 공식 홈페이지를 보면 babel을 컴파일러(Compiler)라고 소개한다.

엄밀히 말하면 컴파일러가 아니다.

컴파일러는 사람이 작성한 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 것을 말한다.

 

babel은 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 것을 말한다.

이를 트랜스파일러(Transpiler)라고 한다.

즉, babel은 트랜스파일러이다.

 

 

바벨의 주요 기능

1. 최신 JavaScript(ES6 이상) 문법을 이전 버전의 JavaScript(ES5)로 변환한다.

2. React를 사용한 JSX 코드를 JavaScript 코드로 변환한다.

3. TypeScript 코드를 JavaScript 코드로 변환한다.

 

 

 

바벨 실습

먼저, babel을 설치한다.

babel은 빌드 시에만 필요하기 때문에 개발 의존성으로 설치하자.

$ npm i -D @babel/core @babel/cli

 

@babel/core는 babel의 핵심 기능을 제공한다.

JavaScript 코드를 변환하는 데 필요한 모든 API와 babel의 기본 동작이 포함되어 있다.

bable을 사용하려면 항상 필요한 패키지이다.

 

@babel/cli는 터미널 또는 명령 프롬프트에서 babel 작업을 수행하기 위한 명령어를 사용할 수 있게 해 준다.

 

다음으로는 사전 설정이 필요하다.

$ npm i -D @babel/preset-env

 

preset-env 설정을 통해 babel에게 문법 변환 규칙을 알려줄 수 있다.

특히 preset은 여러 개의 규칙을 한 번을 적용할 때 사용한다.

 

babel.config.json 파일을 만든 후, 사전 설정을 추가한다.

{
  "presets": ["@babel/preset-env"]
}

그리고 babel을 실행시키면 된다.

 

 

바벨 설정 파일

바벨 설정 파일은 .babelrc, babel.config.js, babel.config.json을 이용한다.

 

.babelrc

파일이 위치한 디렉터리를 기준으로 하위 디렉터리에 대해 설정을 적용한다.

 

babel.config.js

프로젝트의 모든 파일에 설정이 적용된다. 

특히 여러 패키지 디렉터리를 가진 프로젝트에서 규칙을 설정할 때 유용하다.

JavaScript 코드를 허용하기 때문에 런타임에 설정 값을 바꿀 수 있다.

 

babel.config.json

이 설정 파일은 babel.config.js와 동일하게 작동하지만, JSON 형식의 설정만 사용할 수 있다.

따라서 런타임에 설정 값을 바꾸지 않는 경우 사용할 수 있다.

 

또, 공식 문서에 따르면 babel.config.js를 사용하면 구성하는 api가 노출된다.

따라서 정적 구성인 babel.config.json을 사용하는 것을 추천한다.

 

(+공식문서)