호환성 처리 흐름

지원 브라우저에 맞춰 필요한 것만 넣기

Babel은 문법을 바꾸고 Polyfill은 없는 API를 채웁니다. 두 작업은 browserslist와 실제 사용 기능을 기준으로 함께 줄입니다.

syntax · API · target
Source

최신 문법 작성

화살표 함수, class, JSX처럼 개발 생산성을 높이는 문법을 사용합니다.

Target

지원 범위 선언

browserslist로 실제 서비스가 책임질 브라우저 범위를 정합니다.

Babel

문법 변환

@babel/preset-env가 타겟에 필요한 변환 규칙을 선택합니다.

Polyfill

API 보완

core-js와 useBuiltIns로 누락된 기능만 포함합니다.

문법 오류라면

브라우저가 파일을 읽기 전에 멈추므로 Babel preset과 loader 연결을 봅니다.

런타임 오류라면

Promise, fetch, includes 같은 API 보완을 확인합니다.

번들이 크다면

전체 Polyfill 대신 사용 기반 주입으로 실제 필요한 코드만 남깁니다.

설정 기준 팀의 지원 브라우저가 바뀌면 browserslist와 preset 옵션도 함께 갱신합니다.
Polyfill 적용 검산 빌드 결과를 구형 환경에서 열어 문법 오류와 런타임 오류를 분리해 확인합니다.