[Javascript] Babel을 이용한 IE 에서 ES6 문법 사용하기

크로스플랫폼을 지원으로 인한 각 브라우저별 호환성때문에, 프론트앤드 개발자는 항상 웁니다...

이번에 저는 "크롬"과 "엣지"를 기반으로 개발했는데 사용자가 "인터넷 익스플로러 11"이 필요하다고 하여 호환성때문에 Babel을 적용해서 조금이나마 쉽게 호환성을 유지하려고 Babel을 도입했어요.

 

그런데 이게 왠걸? 생각보다 너무너무 쉬운데요???

 

IE에서 ES6를 사용하기 위해서는 Babel 이라는 라이브러리를 사용할건데요.

우선 저는 간단하게 CDN 으로 사용해서 라이브러리를 적용해볼건데요

먼저 html의 head 영역에 아래 babel 스크립트를 import 시켜줍니다.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.4/polyfill.min.js"></script>

그리고 내부에서 스크립트 코드를 작성할 때에는 다음과 같이 작성하면 되요.

<script type="text/babel">
const popup = () => {
    alert("alarm popup!");
}
</script>

외부 스크립트를 불러올 때는 아래처럼 사용하면 된답니다!

<script type="text/babel" src="/plugin/devbox.js"></script>