Babel과 Polyfill

Babel과 Polyfill

Babel은 최신 JavaScript 문법을 더 넓은 실행 환경이 이해할 수 있는 문법으로 바꿉니다. 하지만 Promise, fetch, Array.prototype.at 같은 런타임 API는 문법 변환만으로 생기지 않으므로 polyfill 전략을 따로 세워야 합니다.

01

문법 변환 이해

optional chaining, class field, arrow function 같은 syntax는 Babel 플러그인이 더 오래된 문법으로 바꿉니다.

syntax
02

대상 환경 설정

browserslist와 preset-env가 어떤 브라우저를 기준으로 변환할지 결정합니다.

target
03

API polyfill 분리

Promise나 fetch처럼 실행 환경에 없는 전역 API는 core-js나 별도 polyfill이 필요할 수 있습니다.

runtime
04

번들 비용 관리

usage 기반 주입, entry 기반 주입, 수동 polyfill 중 프로젝트 규모와 지원 범위에 맞게 선택합니다.

cost
Syntax
코드 모양을 오래된 문법으로 바꿈 브라우저가 파싱하지 못하는 문법 오류를 막습니다.
Babel
API
실행 시 존재해야 하는 객체와 메서드 Array.from, URLSearchParams, fetch는 환경에 따라 polyfill이 필요합니다.
Polyfill
Target
지원 브라우저가 바뀌면 변환 결과도 바뀜 최신 브라우저만 지원하면 불필요한 변환과 polyfill을 줄일 수 있습니다.
browserslist

오류 종류 · 중복 polyfill · 지원 범위 점검

오류 종류 Unexpected token이면 문법 변환, undefined is not a function이면 API 지원을 먼저 의심합니다.
중복 polyfill 여러 entry에서 같은 polyfill을 중복 주입하지 않도록 전략을 통일합니다.
지원 범위 지원 브라우저 정책이 바뀌면 Babel 설정과 polyfill 목록도 같이 갱신합니다.

문법 변환과 런타임 API 예시

user?.name       -> Babel이 문법 변환 가능
Promise.any()    -> 런타임 API라 polyfill 필요 가능