es5만 지원되는 ie같은 브라우저에 es6 쓰는 방법, 바벨(babeljs)

es5만 지원하는 더러운 ie 같은 브라우저가 있다.

ie11은 es2015까지만 지원해줘서 remove()나 parameter default 같은 es6의 기능을 쓰려면 이를 es5에 맞게 컨버팅 해줘야 한다.

뭐 코드를 es5로 짜면되겟지만 이미 한물 간 스크립팅하느니 es6로 개발하고 컨버팅하는게 낫지요.

Laravel 같이 Webpack Mix 쓰는 경우

이 경우는 진짜 속편하다. 아래와같이 webpack.mix.js에 바벨 구문만 추가해주면 끝이다.

const mix = require('laravel-mix');
 
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
 
mix.js('resources/js/app.js', 'public/js')
    .babel('public/js/app.js', 'public/js/app.es5.js')
    .sass('resources/sass/app.scss', 'public/css');Copy

그리고 컨디셔널 코멘트로 app.es5.js 파일을 로드 시켜주면 끝.

php 프레임워크 개발은 라라벨이 짱이신거시다.

일반 스크립트 코드의 경우

cdn에서 babel 라이브러리를 가져와서 스크립트를 즉시 번역할 수도 있다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<script type="text/babel">
    function searchManager(keyword) {
        if(keyword.length > 1) {
            $.ajax({
                type: 'post',
                url: '/admin/hospital/search/manager',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                data: { 'keyword': keyword, 'hospital_id': $('#hospitalID').val() },
                success: function(data) {
                    $('#listManager .item_data').remove();
                    $('#listManager').append(data);
                    $('#listManager .item_data').ripple({ duration: 600 });
                },
                error: function(jqXHR) {
                    toast('전문의를 찾는 도중에 문제가 발생했습니다.', TOAST_ERROR);
                    if(APP_DEBUG) {
                        console.log(this.url);
                        popup(jqXHR.responseText);
                    }
                },
            });
        } else {
            toast('검색어를 두글자 이상 입력해주세요.', 'warning');
        }
    }
</script>Copy

babel-core/browser.js를 로딩하고 컨버팅할 스크립트 태그에 type="text/babel"을 추가한다.

요 방법은 쉽게 가져다가 쓸 수 있어서 괜찮아 보인다.