Babel 변환과 Polyfill 보강을 분리하기

타깃 설정

지원 브라우저와 버전을 browserslist로 정한다.

preset-env가 필요한 문법 변환을 선택한다.

Promise, fetch, Array.from처럼 없는 API는 polyfill로 보강한다.

번들 크기와 지원 최저 브라우저 실행을 함께 확인한다.

Babel

문법 변환 class, arrow, optional chaining 등을 변환

DOM API를 만들지는 않음

core-js

표준 API Promise, Set, Array 메서드 등 구현

주입 정책 확인

preset-env

타깃 기반 지원 브라우저 기준으로 필요한 변환 선택

browserslist 품질 중요

modern build

불필요 변환 감소 최신 브라우저에는 가벼운 산출물 제공

배포 전략 필요

타깃 지원 브라우저 목록이 실제 사용자 기준과 맞다.

중복 polyfill이 여러 번 들어가지 않는다.

비용 구형 지원 때문에 번들이 과도하게 커지지 않는다.

검증 지원 최저 브라우저에서 핵심 흐름이 실행된다.