babel

유용한 기능을 갖고 있다.

개발 환경에 구애받지 않고 자바스크립트의 최신버전 문법으로 개발할 수 있도록 도와주는 도구이다.

 

JS 문법의 발전 속도는 빠른데, JS 코드의 실행 환경이 그 속도를 따라오지 못하는 경우가 많다.

그래서 ES6 이상의 문법으로 개발을 하자니 실행되지 않는 환경이 있고, 그렇다고 모든 환경에서 실행되도록 하자니 ES5 이하의 문법으로 코드를 작성해야한다.

 

이런 점을 해결하기 위한 도구가 Babel 이다.

Babel은 JS transpiler 인데 편하게 JS compiler 라고도 부른다.

compile은 인간의 소스 코드를 컴퓨터가 이해할 수 있도록 바꾸는게 컴파일이고,

transpile은 환경이 달라져도 실행될 수 있도록 같은 언어에서 소스 코드 문법만 바꾸는 과정을 뜻한다.

JS는 컴파일 언어가 아닌 인터프리터 언어라서 컴파일 과정이 필요 없지만 편의상 babel을 JS compiler 라고 부른다고도 한다.

 

즉, JS transpiler인 Babel을 이용하면 ES6 이상의 문법으로 작성한 코드를 ES5 이하의 문법으로 변경할 수가 있어서,

ES6 이상의 최신 문법으로 작성한 코드를 ES6이상의 최신문법을 지원하는 실행환경 뿐만 아니라 최신문법을 지원하지 않는 실행환경에서도 실행이 가능하도록 해준다.

 

프로젝트에 babel을 설치한다.

npm install babel-cli babel-core --save-dev

babel/core는 babel을 사용할 때 무조건 필요한 패키지

babel/cli는 babel을 터미널을 통해서 이용할 때 필요한 패키지

npm install babel-preset-es2015 --save-dev

babel/preset-env는 문법 변경을 위해 필요한 패키지

 

그리고 package.json을 열어서 script에 babel command를 추가해준다.

"babel" : "babel --presets es2015 main.js -o changed-es5.js"

저장하고난 후에

프로젝트 최상단 폴더에 main.js 파일을 하나 만들자.

// main.js
const babelTest = 'babelTest';
const testBabel = () => {console.log(babelTest)}

저장하고,

터미널에 npm run babel 명령을 치면 es6로 작성한 main.js 파일이 es5로 변경되어 changed-es5.js에 만들어질 것이다.

// changed-es5.js

'use strict';

var babelTest = 'babelTest';
var testBabel = function testBabel() {
  console.log(babelTest);
};

const testBabel = () => {} arrow function이

var testBabel = function testBabel() {} 로 바뀌어서 저장되었다.