리액트에서 제안한 Cross Browsing 해결법 react-app-polyfill

제이밍·2021년 9월 1일

ES6 WeCode react-app-polyfill 원티드 위코드 폴리필 프리온보딩

react-app-polyfill

Supported Browsers and Features

react-app-polyfill 패키지에는 다양한 브라우저용 폴리필이 포함되어 있습니다

지원가능한 features

Promise, Async/await 비동기 (ES2017)
window.fetch (a Promise-based way to make web requests in the browser)
Object.assign , Object Rest/Spread Properties 객체 레스트/스프레드 속성(ES2018)
Symbol (a built-in object used by for...of syntax and friends)
Array.from (a built-in static method used by array spread, i.e. [...arr])
JSX, Flow and TypeScript JSX , 흐름 및 TypeScript
Class Fields and Static Properties 클래스 필드 및 정적 속성
Dynamic import() 동적 import()

browserslist

cra(create-react-app)로 프로젝트를 생성할시 최소한의 폴리필이 설정되어 있는걸 볼 수 있다.

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

cra로 프로젝트를 생성할 경우 package.json의 아래 요소가 지원브라우저를 가리킨다.

사용방법

1. npm install

npm install react-app-polyfill

or

yarn add react-app-polyfill

2. polyfill import

stable과 함께 import 해준경우 IE9 폴리필을 가져오면 IE10 및 IE11 지원이 포함됩니다.

import 반드시 src/index.js 첫번째 줄에 포함시켜 줍니다.

Internet Explorer 9

// This must be the first line in src/index.js
import  'react-app-polyfill/ie9' ; 
import  'react-app-polyfill/stable' ;

// ...

Internet Explorer 11

// This must be the first line in src/index.js
import  'react-app-polyfill/ie11' ; 
import  'react-app-polyfill/stable' ;

// ...

3. node_modules/.cache 삭제

babel-loader 가 package.json 파일의 변경 사항을 바로 감지하지 못할 수 있기 때문에 빠른 해결 방법은 node_modules/.cache 폴더를 삭제하고 다시 시도한다.

4. browserslist

"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }