Babel은 코드 형태를 바꾸고 Polyfill은 없는 API를 채운다
Babel과 polyfill을 같은 도구처럼 쓰면 구형 브라우저에서 문법은 통과하지만 실행 중 API 오류가 날 수 있다.
| 항목 | 맡는 역할 | 예시 | 체크 포인트 |
|---|---|---|---|
| Babel | 새 문법을 오래된 문법으로 변환 | arrow, class, optional chaining | DOM API를 만들지는 않음 |
| Preset-env | 브라우저 목표에 맞춰 변환 선택 | browserslist | 지원 범위가 실제와 맞는가 |
| Polyfill | 런타임에 없는 객체와 메서드 제공 | Promise, Set, Array methods | 전역 오염과 중복 확인 |
| core-js | 표준 API 구현 제공 | useBuiltIns policy | 필요한 API만 들어가는가 |
| Test | 최저 지원 브라우저에서 실행 확인 | 번들 크기, 기능 테스트 | 모던 번들과 구형 번들 분리 검토 |
타깃, 중복 polyfill, 모던 번들 기준을 함께 확인해야 호환성과 번들 비용을 동시에 잡을 수 있다.