[Javascript] Babel 사용법

Babel
    - ES6 이상의 코드를 ES5 로 변환해 주는 트랜스파일러(transpiler)

https://github.com/babel/babel - 34,000
    - v7.5.5 , 2019/07

https://babeljs.io/
https://babeljs.io/docs/en/usage



//===============

* 설치
    - @가 붙으면 버전7, (@가 안붙으면 버전6)
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill



//=============
* 설정 파일

.babelrc  : v6 , 이 파일을 자동으로 찾아서 읽는다.
    - babel.config.js 파일이 있으면 필요없음

babel.config.js : v7, 이 파일이 있는 곳에서 실행해야 적용된다. 다른 하위 폴더에서 실행하면 적용 안된다.
--root-mode upward 를 사용하면 찾는다.

//================
    - babel.config.js 파일

module.exports = {
    sourceMaps: true,
    presets: [
        ['@babel/preset-env', {
            targets: {
                ie: 11,
                browsers: 'last 2 versions'
            },
            useBuiltIns: 'usage', //사용한 모듈만 require
            //debug: true
        }]
    ],
    ignore: [ 'node_modules' ]
};

//============
.babelrc 파일  
    - babel.config.js 파일이 있으면 필요없음
{
    "presets": [
        [ "@babel/preset-env", {
    "targets": {
    "ie": "11",
    },
    }],
    ]
}


//============
* 테스트용 ES6 파일, test.js
import '@babel/polyfill'

const name = 'World'

const main = async () => {
  console.log(`Hello ${name}`)
}

main().catch(console.error)


//==============
* 바벨 실행

npx babel src폴더  -d  dest폴더  --root-mode upward



//================
//참고

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

https://blog.cometkim.kr/posts/start-modern-javascript-with-babel/
https://www.zerocho.com/category/ECMAScript/post/57a830cfa1d6971500059d5a