Babel(JavaScript compiler)

https://babeljs.io/

Babel · The compiler for next generation JavaScript

바벨은 우리가 작성한 자바스크립트 코드를 모두가 이해할 수 있는 안정된 자바스크립트로 바꿔주는 컴파일러다.

 

nodeJS가 우리가 작성한 자바스크립트 코드를 이해하겠지만 최신 자바스크립트 코드의 경우 이해하지 못하는 경우가 있다.

이를 해결하는 것은 nodeJS가 이해하는 자바스크립트 언어만 사용하거나 babel을 사용하는 것이다.

(babel의 유례는 바벨탑에서 사람들이 서로 다른 언어로 말하는 것에서 따온 것 같다. 아마)

 

우선 nodeJS에서 사용가능한 Babel을 설치해야한다.(homepage > Setup> Language APIS(Node))

 

package.json

- devDependencies : dependencies는 프로젝트를 위한 것이라면 devDependencies는 개발자를 위한 것이다.(--save-dev로 설치하면 package.json의 devDependencies로 알아서 추가해준다.)

 

 

1. babel 설치

npm install --save-dev @babel/core

2. project의 root폴더에 babel.config.json파일을 만들어준다.(맥, 리눅스의 경우 터미널에서 아래의 명령어로 생성해도 됨)

 touch babel.config.json

그 후 babel.config.json 파일을 열어

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

위의 코드를 붙여 넣는다.

 

3. @babel/preset-env를 설치한다.

npm install @babel/preset-env --save-dev

preset은 babel을 위한 거대한 플러그인이다. preset-env(최신 자바스크립트를 사용할 수 있게해주는)가 가장 유명하다.(react, typescript를 위한 것도 있음)