ES6가 원활히 돌아가기 위해서 최신 브라우저가 필요하다.

하지만 모두가 최신 브라우저를 쓰지않기때문에 오래된 문법을 작성할 수 밖에 없는데

Babel은 최신 문법을 사용성이 넓은 범위의 문법으로 변환시켜주기 때문에

실험정신이 있는 개발자에게 필수 플러그인이다.

 

[1] html 코드삽입으로 바벨사용하기

<div id="result"></div>
/* support IE9+ */
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
//babel 을 불러온다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
// babel 실행에 필요한 기능을 불러온다.

<script type="text/babel" data-presets="es2015,stage-2">
// type="text/babel" data=presets="es2015, stage-2"
// babel을 사용할 것이고, es2015를 사용할 것이고, stage-2 는 Babel 플러그인의 안정적인 버전이다.

    const hello = (data) => {
        document.querySelector('#result').innerText = data
    }
    
    hello("hello");
</script>

 

 

 

참고: https://babeljs.io/docs/en/

 

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

 

 

'Javascript' 카테고리의 다른 글

[Browser API] fetch API를 알아보자!  (0) 2020.01.05
[WebAPI] window.localStorage 부시기!  (5) 2019.09.29
파일(Image) 용량을 확인하는 방법_v1  (0) 2019.06.05
배열의 중복값 제거  (0) 2019.04.25
[자료구조]  (0) 2019.04.25

+ Recent posts