Babel

최신 Javascript 코드( ES6 )를 클래식한 Javascript로 변경해주는 Javascript 트렌스 컴파일러 (transpiling)
최신 Javascript를 지원하지 않는 구형 인터넷 익스플로어(IE)에서도 문제없이 작동하도록 하기위해 사용

공식 페이지

https://babeljs.io/

설치

npm install @babel/core @babel/node

터미널에서 npm을 이용하여 설치. 여기서는 node에서 사용 가능한 babel을 설치

 

npm install @babel/preset-env

babel을 사용하기 위해서는 다양한 플러그인들이 필요하다. 이 플러그인들을 기본적으로 조합해서 묶어놓은 preset들이 있는데 Javascript의 일반적인 환경에서는 env 프리셋을 설치하면 된다. 이외에 stage-x 프리셋들이 있는데 다소 실험적인 프리셋으로 현재 0 ~ 3 까지 있고 숫자가 높아질 수록 더 최신이고, 더 실험적이다.

 

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

설치를 완료하면 .babelrc 파일을 만들고 설정을 해준다. babel이 실행되면 먼저 root 디렉터리의 .babelrc 파일을 읽고 설정을 확인한다.

 

실행

babel-node index.js

이제는 node가 아닌 babel을 통해서 실행을 한다.

 

import express from "express" //import
const handleHome = (req, res) => res.send("Hello from home"); //arrow function

그러면 이제 ES6의 import나 arrow function 같은 문법들도 브라우저 지원 걱정 없이 사용 가능하다.