[React] ie9 ie11 지원되게 설정하기

최근 React 는 기본적으로 ie9, ie11 같은 오래된 웹브라우저를 지원하지 않는다.

하지만, 방법은 있지만, 실행 속도 등의 문제가 있을 수 있다.

https://www.npmjs.com/package/react-app-polyfill

1. react-app-polyfill 모듈을 설치한다.

npm install react-app-polyfill

이 모듈은 다음의 언어 기능을 사용가능하게 해준다.

 Promise (for async / await support)

 window.fetch (a Promise-based way to make web requests in the browser)

 Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })

 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])

2. Internet Explorer 지원하기

Internet Explorer 9

// This must be the first line in src/index.js

import 'react-app-polyfill/ie9';

 

// ...

Internet Explorer 11

// This must be the first line in src/index.js

import 'react-app-polyfill/ie11';

 

// ...

3. 다른 언어 기능을 polyfill 하기

타겟 브라우져에서 사용가능하지 않는 안정적인(stable) 기능을 polyfill할 수도 있다.

// This must be the first line in src/index.js

import 'react-app-polyfill/stable';

 

// ...

ie9용

// These must be the first lines in src/index.js

import 'react-app-polyfill/ie9';

import 'react-app-polyfill/stable';

 

// ...

ie11용

// These must be the first lines in src/index.js

import 'react-app-polyfill/ie11';

import 'react-app-polyfill/stable';

 

// ...

반영후 node_modules/.cache 폴더를 삭제해야 되는 경우 있음!

https://facebook.github.io/create-react-app/docs/supported-browsers-features

또한, package.json 파일에서 "development"의 환경을 아래와 같이 해줘야 동작되었다.

"browserslist": {

"production": [

">0.2%",

"not dead",

"not op_mini all"

],

"development": [

">0.2%",

"last 1 chrome version",

"last 1 firefox version",

"last 1 safari version"

]

}