create-react-app을 사용하는 React 앱에서 ES6 기능을 폴리 필하는 가장 좋은 방법

인터넷 익스플로러에서 React.js 애플리케이션을 테스트 해봤는데 ES6 / 7 코드가 Array.prototype.includes()깨지는 것을 발견했습니다.

저는 create-react-app 을 사용하고 있으며 모든 사람이 필요로하지 않기 때문에 많은 polyfill을 포함하지 않기로 선택했으며 빌드 시간이 느려집니다 (예를 들어 here 및 here 참조 ). 문서 (작성 당시)는 다음을 제안합니다.

런타임 지원이 필요한 다른 ES6 + 기능 (예 : Array.from () 또는 Symbol)을 사용하는 경우 적절한 폴리 필을 수동으로 포함하고 있는지 또는 대상 브라우저에서 이미이를 지원하는지 확인하십시오.

그렇다면 ... '수동으로'포함하는 가장 좋은 방법은 무엇입니까?

업데이트 :이 질문 / 답변 이후 create-react-app polyfill 접근 방식과 문서가 변경되었습니다. ie11과 같은 이전 브라우저를 지원하려면 이제 react-app-polyfill( 여기 )를 포함해야합니다 . 그러나 여기에는 " ... 최소 요구 사항 및 일반적으로 사용되는 언어 기능 " 만 포함되어 있으므로 덜 일반적인 ES6 / 7 기능 (예 Array.includes:

이 두 가지 접근 방식은 모두 작동합니다.

1. react-app-polyfill 및 core-js에서 수동 가져 오기

설치를 반응-앱 polyfill 및 코어 JS (3.0 이상)를 :

npm install react-app-polyfill core-js 또는 yarn add react-app-polyfill core-js

polyfills.js라는 파일을 만들고 루트 index.js 파일로 가져옵니다. 그런 다음 기본 react-app polyfill과 다음과 같은 특정 필수 기능을 가져옵니다.

/* polyfills.js */

import 'react-app-polyfill/ie11';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';
import 'core-js/features/number/is-nan';

/* index.js */

import './polyfills'
...

2. Polyfill 서비스

다음 줄을 index.html에 추가 하여 polyfill.io CDN을 사용하여 브라우저 별 맞춤 폴리 필 을 검색합니다.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>

참고로, Array.prototype.includes기본 기능 세트에 포함되어 있지 않으므로 명시 적으로 요청해야 했습니다.

React에서 사용되는 일반적인 ES6 기능에 대한 polyfill 이 있는 react-app-polyfill 을 사용하세요 . 그리고 그것은 create-react-app 의 일부입니다 . README에 정의 된대로 index.js 시작 부분에 포함해야합니다.

저는 yarn을 사용하여 polyfill을 다운로드하고 index.js로 직접 가져 왔습니다.

명령 프롬프트에서 :

yarn add array.prototype.fill

그리고 맨 위에 index.js:

import 'array.prototype.fill' // <-- newly added import
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
...

특별히 필요한 것을 프로젝트로 가져 오기 때문에이 접근 방식이 마음에 듭니다.

새로운 Google Search Console과 React 앱 (create-react-app)에 문제가있는 것이 가치있는 일이었습니다. es6shim을 추가 한 후 모든 것이 해결되었습니다.

내 공개 index.html 페이지에 아래를 추가했습니다.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Create React App 프로젝트에서 꺼내기

나중에 /config/polyfills.js파일 에 모든 폴리 필을 넣을 수 있습니다.

파일 끝에 다음을 입력하십시오.

Object.values = Object.values ? Object.values : o=>Object.keys(o).map(k=>o[k]);

Webpack이 자동으로이 문제를 해결합니다.)

나는 같은 문제가 있었다. Daniel Loiterton의 솔루션이 저에게 효과적이지 않았습니다. 그러나! core-js에서 가져 오기를 하나 더 추가 import 'core-js/modules/es6.symbol';했으며 IE11에서 저에게 효과적입니다.