Web Basic · Transpile

Babel과 Polyfill의 역할 구분

Babel은 새 문법을 오래된 브라우저가 이해할 수 있는 문법으로 바꾸고, polyfill은 런타임에 없는 API를 채워 넣는다.

01

타깃 설정

browserslist로 지원할 브라우저와 버전 범위를 정한다.

02

문법 변환

Babel preset-env가 타깃에 필요한 문법 변환만 선택한다.

03

API 보강

없는 내장 객체나 메서드는 core-js 같은 polyfill로 채운다.

04

결과 검증

실제 번들 크기와 구형 브라우저 실행 여부를 함께 확인한다.

Babel
코드 형태 변환 소스 문법을 호환 가능한 JavaScript로 변환
DOM API를 만들지는 않음
Polyfill
런타임 기능 추가 브라우저에 없는 객체와 메서드를 제공
전역 오염 범위 확인
preset-env
타깃 기반 선택 지원 브라우저에 맞춰 필요한 변환을 자동 결정
browserslist 품질에 의존
core-js
표준 API 구현 Promise, Set, Array 메서드 등을 보강
useBuiltIns 정책 확인

타깃 · 중복 polyfill · 모던 번들 점검

타깃 지원 브라우저 목록이 실제 사용자 기준과 맞다.
중복 polyfill 여러 번 주입되어 번들을 키우지 않는다.
모던 번들 최신 브라우저에 불필요한 변환을 보내지 않는다.
테스트 지원 최저 브라우저에서 핵심 흐름이 실행된다.