[javascript] es6에서 es5로 만들어주는 babel

나는 es6부터 javascript를 접했기 때문에 훨씬 좋은 환경에서 웹개발을 배웠다 생각한다.

 

es6에서는 arrow-function , class, const와 let의 출현 , promise 객체 등 개발자에게 코드의 간결성, 명확성을 선물해주었지만 현실은 es6 를 자유자재로 사용 할 수 없었다. 그 이유는 ie와 같은 구형 브라우저에서는 es6를 제대로 지원하지 않았고 사람들은 구형브라우저나 구형 윈도우 os를 그대로 사용하는 사람들이 많기에 개발하는 입장에서는 es6는 그림의 떡이였다. 

 

그런 와중 Babel 이라는 트랜스파일러가 등장했는데 이 바벨은 es6 문법을 es5로 변환시켜 준다 .

 

 

설치

해당 프로젝트를 npm init 해주고 명령창에 다음과 같이 작성한다.  개발환경에 추가하기 위해 -dev를 추가한다. 

 

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

 

그리고는 변환할 문법을 위한 프리셋을 다운 받도록 한다. 프리셋 말고 원하는 문법만 변환 시킬 수 있는 플러그인이라는 것이 존재 하지만 굳이 프리셋있는데 플러그인 하나하나 다운 받을 필요는 없다. 

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

npm install --save-dev @babel/preset-react //리액트 jsx 문법을 위한 프리셋

 

그리고 프로젝트 최상위 폴더에 .babelrc 라는 파일을 만들고 내부에 다음과같이 설치한 preset이름을 적어준다.

{
    "presets" : [
        "env"
    ]
}

 

실행

여기까지 하면 실행 준비가 되었다. 프로젝트 최상위 폴더에 src라는 폴더를 만들고 나는 그곳에 test.js 파일을 만들었다. 

 

test.js 내부

 

const test = "const";
let test_let = "let";

()=>{
    console.log("was arrow function")
}

class test_class{
    constructor(){
        this.array = [];
        this.property = "property";
    }

    method(){
        console.log("it was method in class");
    }
}

const promise = new Promise();

 

파일이 작성되었다면 터미널에 다음과 같이 작성하고 실행한다. npx babel src -d test.js

 

그럼 폴더에 test.js라는 폴더가 생성되고 es5문법으로 변한 코드를 볼 수 있다. 

 

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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

var test = "const";
var test_let = "let";

(function () {
    console.log("was arrow function");
});

var test_class = function () {
    function test_class() {
        _classCallCheck(this, test_class);

        this.array = [];
        this.property = "property";
    }

    _createClass(test_class, [{
        key: "method",
        value: function method() {
            console.log("it was method in class");
        }
    }]);

    return test_class;
}();

var promise = new Promise();

 

참조

기본적인 예제 2015 버전 

https://steemit.com/javascript/@noreco/babel

불러오는 중입니다...

바벨 공식문서

https://babeljs.io

Babel · The compiler for next generation JavaScript