ES6 - 브라우저에서 바벨(babel)을 통한 트랜스파일링

모든 웹 브라우저가 ES6를 지원하지는 않는다. 

ES6를 지원한다 하더라도 모든 ES6 기능을 지원하지는 또 않는다. 

 

 

트랜스파일링

모든 브라우저를 지원하기 위해서 ES6를 ES5로 컴파일한다. 

가장 유명한 도구로 바벨(Babel)이 있다.

 

 

ES6 형식으로 작성된 script이다. 

const log = ( name='홍길동' , sports='축구' ) => 
	console.log(`${name}은 지금 ${sports}를 합니다.`)

log() 

 

바벨을 통해서 트랜스 파일링 한 결과이다. 

'use strict';

var log = function log() {
    var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '홍길동';
    var sports = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '축구';
    return console.log(name + '\uC740 \uC9C0\uAE08 ' + sports + '\uB97C \uD569\uB2C8\uB2E4.');
};

log()

 

 

바벨 사용 방법이다. 

우선 스크립트를 삽입해야한다. 

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

 

 

방법1) 

<script type="text/babel"> 

    변환코드

</script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel"> 

const log = ( name='홍길동' , sports='축구' ) => 
	console.log(`${name}은 지금 ${sports}를 합니다.`)

log() 

</script>

 

방법2) 파일에 있는 소스 코드를 트랜스 파일링 

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="script.js" type="text/babel"> 

 

브라우저에서 트랜스 파일링하면 

브라우저에서 런타임하기 때문에 애플리케이션 실행 속도가 느려진다. 

때문에 사전에 컴파일링해서 배포하는 것이 좋다.