IE와 같은 구형브라우저에서 빌드없이 es6 최신문법 사용하기

최근 몇년간 자바스크립트 진영에서 많은 발전이 있게 되면서 구형브라우저를 지원하기 위해 webpack 과 같은 툴들을 이용해서

js 파일을 빌드해서 서비스를 하는 경우들이 많아졌다.

다만 프로토타이핑을 하는데 이런 웹팩 설정작업을 해주는건 더할나위없이 귀찮고 까다롭다.

게다가 매번 수정할때마다 그 작업을 해줘야하니 작업에 인터럽트가 걸리게 된다.

이를 위해 원래 babel 에서 browser.js 라는걸로 웹브라우저에서 바로 사용할 수 있도록 해주었던적이 있다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>

<script type="text/babel">

    const a = () => {

        console.log(`hello world!`);

    }

</script>

위와같이 스크립트를 로딩해주고 type 을 지정해주면 es6 문법을 사용할 수 있다. ie11 에서도 잘 동작한다.

위의 cdnjs 가 사라질것이라고 생각되진 않지만 혹시모르는 일을 대비해서 따로 js 파일을 빼서 남겨놓는다.

(현재 browser.js 는 deprecated 된 상태이므로)

browser.js

유사하게 babel-standalone 이 좀 더 최신버전으로 남아있기는 하다.

https://github.com/babel/babel-standalone

다음으로 적용하면되고 es2016 도 async/await 도 가능해진다(!)

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

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

<script src="sample.js" type="text/babel" data-presets="es2015,stage-2"></script>