Polyfill

JavaScript API를 오래된 버전의 브라우저에서도 사용할 수 있도록 하는 방법에 대한 내용입니다.

Overview

해당 기능은 공통업무 기능입니다. 다음과 같이 미리 준비된 Boilerplate confy-app 형태로 제공됩니다.

Usage

기본설정 (권장)

package.json

...

  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "not dead"
  ]

• "> 0.5%" -> 전 세계 시장 점유율이 0.5% 이상인 브라우저 지원
• "last 2 versions" -> 모든 주요 브라우저의 최신 2개 버전 지원
• "not dead" -> 24개월 동안 업데이트가 없는 브라우저는 제외

구형 브라우저까지 지원

...

  "browserslist": [
    "> 1%",
    "last 3 versions",
    "IE 11"
  ]

• "> 1%" -> 점유율 1% 이상 브라우저 지원
• "last 3 versions" -> 모든 주요 브라우저의 최신 3개 버전 지원
• "IE 11" -> Internet Explorer 11 지원 (기업 환경에서 필요할 수 있음)

최신 브라우저만 지원 (모던 환경)

...

  "browserslist": [
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Edge versions",
    "last 2 Safari versions"
  ]

모바일 퍼스트 프로젝트

...

  "browserslist": [
    "last 2 versions",
    "not IE 11",
    "not op_mini all"
  ]

• 최신 브라우저 지원
• not IE 11 → Internet Explorer 11 제외
• not op_mini all → Opera Mini 제외 (극단적으로 제한적인 환경)

추가적인 설정 방법

• 터미널에서 npx browserslist를 실행하면 현재 설정에 따라 지원되는 브라우저 리스트 확인 가능

• browserslist 설정을 .browserslistrc 파일로도 분리 가능

가장 많이 사용되는 기본 설정은 "> 0.5%", "last 2 versions", "not dead"이며, IE 11 지원이 필요하면 추가하면 됩니다.(권장하지 않습니다.)

참고

• Browserslist
• Can I use