[babel] polyfill과 preset-env

1. polyfill의 정의

   런타임에 기능을 주입하는 것. 런타임에 기능이 존재하는지 검사해서 없으면 넣어주고 있으면 넣어주지 않느다.

   바벨을 사용하더라도 폴리필 설정은 반드시 해주어야 한다.

   어디에사용?? 오래된 브라우져에 최신 ECMA 문법 사용하고 싶을 때 사용한다.  

   단점은 폴리필 사용시 해당 모듈의 모든 폴리필을 가져오게 되므로, 번들의 용량이 커지는 단점이 있다.

   (번들 크기에 민감하지 않는 프로젝트에서 사용이 용이하다)

  @babel/polyfill 패키지아닌 core-js로부터 직접 필요한 폴리필을 가져오면 번들 크기를 줄일 수 있다.

  이 방법은 번들크기를 최소화 할 수 있는 방법임. 번들 크기가 민감한 프로젝트에 용이하다.

@babel/preset-env는 적당한 번들크기를 유지시키면서 폴리필 추가를 깜빡하는 실수를 막고 싶을 때 사용하면 유용하다.

npm install @babel/core @babel/cli @babel/preset-env

src/code.js

import '@babel/polyfill';

const p = Promise.resolve(10);
const obj ={
    a:10,
    b:20,
    c:30,
};

const arr = Object.values(obj);
const exist = arr.includes(20);

//babel.config.js

const presets =[
    [
        '@babel/preset-env',
        {
            targets: {
                chrome: '47',
            },
            useBuiltIns: 'usage'  //폴리필과 관련된 설정, entry로하면 지원하는 브라우져에서 필요한 폴리필을 모두 포함시킨다.
                                  //usage로 하면, 필요한 폴리필만 포함시킨다.
        }
    ]
]

module.exports = { presets };