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

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

---

저는 인터넷 익스플로러에서 React.js 애플리케이션을 테스트 해 왔는데 놀랍게도 ES6 코드가 Array.prototype.includes()깨졌습니다. 저는 creat-react-app 스타터 키트를 사용하고 있으며 바벨이 이것의 일부라고 생각했으며 ES6 코드를 작성할 수 있다고 생각했습니다.

그렇게 간단하지 않은 것으로 밝혀졌습니다. 내가 볼 수 있듯이 그들은 모든 사람이 필요로하지 않기 때문에 많은 폴리 ​​필을 포함하지 않기로 선택했으며 빌드 시간이 느려집니다. 예를 들어 여기 와 여기를 참조 하십시오 . 이것을 문서화 하려는 시도가 있었지만 실제로 폴리 필을 직접 수행하는 방법에 대한 언급은 없습니다. 딱 이것:

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

그래서 ... 그들을 '수동으로'포함시키는 가장 좋은 방법은 무엇입니까? 그게 바벨의 일부라고 생각 했어? babel-polyfill의 요소를 부분적으로 가져와야 합니까?

---

업데이트 :이 질문 / 답변 이후 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에서 저에게 효과적입니다.

참고 URL : https://stackoverflow.com/questions/43756211/best-way-to-polyfill-es6-features-in-react-app-that-uses-create-react-app