바벨 공식 문서에는 Babel is a JavaScript compiler. Use next generation JavaScript, today. 라는 문장이 적혀있습니다.
바벨은 다음 버전의 자바스크립트 문법을 현재 사용가능한 문법으로 변환 시켜주는 역할을 하는데 여기서 현재와 다음은 조금 더 깁니다.
현재의 시점은 과거가 될 수 있고, 다음의 시점은 미래가 되기도 합니다.
우선 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문법을 사용할 수 있습니다.
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);
보시면 개발자가 작성한 코드가 아닌 코드가 들어가 있음을 확인할 수 있습니다.