Babel이란? — SteemCN

바벨 공식 문서에는 Babel is a JavaScript compiler. Use next generation JavaScript, today. 라는 문장이 적혀있습니다.
바벨은 다음 버전의 자바스크립트 문법을 현재 사용가능한 문법으로 변환 시켜주는 역할을 하는데 여기서 현재와 다음은 조금 더 깁니다.

현재의 시점은 과거가 될 수 있고, 다음의 시점은 미래가 되기도 합니다.

Babel사용하기

우선 Babel을 통한 소스코드 변환은 babel에 plugin과 presets을 주는 것 부터 시작합니다.
아무것도 설정을 안하면 작성한 소스코드가 그대로 파일로 만들어져서 나오고 plugin을 설정하면 특정 부분을 변경해서 나오게 할 수 있습니다. presets은 plugin의 집합인데 하나를 설치해서 설정하면여러개의 plugin을 사용한것과 같은 효과를 볼 수 있습니다.

바벨을 사용하기 위해서는 노드js가 필요하니 설치를 하지 않으신분은 여기에서 설치 후 진행해 주세요.

노드가 설치 되었으면 babel을 실행할 수 있는 패키지를 설치해야 합니다.
바벨은 개발환경에서 실행되기 때문에 -D를 붙여서 devDependency로 설정을 해줘야 합니다.

npm i -D babel-cli

es2015버전의 문법을 사용하기 위해 babel-preset-es2015를 설치하겠습니다.

npm i -D babel-presets-es2015

바벨에 변환을 시켜줘야 하는 정보를 알려주기 위해 .babelrc파일을 만들어줘야 합니다.

{
    "presets" : [
        "es2015"
    ]
}

이렇게 설정이 끝나면 es2015문법을 사용할 수 있습니다.

constants
arrow-functions
block-scoped-functions
classes
computed-properties
destructuring
duplicate-keys
for of
function-name
literals
modules-amd
modules-commonjs
object-super
parameters
shorthand-properties
spread
sticky-regex
template*literals
typeof-symbol
unicode-regex

npx babel src -d dist 라고 cmd창에 입력하면 소스코드가 변환됩니다.

babel을 자주 사용하기 때문에 package.json에 있는 scripts에 등록해 놓으면 조금 더 쉽게 사용할 수 있습니다.

"scripts": {
    "build": "babel src -d dist"
  }

변환 된 소스코드를 살펴보겠습니다.

// 변환 전 
class C {

}

const obj = {
    a: 1,
    b: 2
};

const { a, b } = obj;

const arr1 = [1, 2, 3];
const arr2 = [ ...arr1 ];

// 변환 후 

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var C = function C() {
    _classCallCheck(this, C);
};

var obj = {
    a: 1,
    b: 2
};

var a = obj.a,
    b = obj.b;


var arr1 = [1, 2, 3];
var arr2 = [].concat(arr1);

보시면 개발자가 작성한 코드가 아닌 코드가 들어가 있음을 확인할 수 있습니다.