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

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

Internet Explorer에서 React.js 응용 프로그램을 테스트했는데 다음과 같은 ES6/7 코드가 발견되었습니다.Array.prototype.includes()깨트려버려요.

저는 create-react-app을 사용하고 있는데, 모든 사람이 폴리필을 필요로 하는 것은 아니기 때문에 폴리필을 많이 포함하지 않기로 선택했다고 합니다.폴리필은 빌드 시간을 느리게 합니다(예: 여기와 여기를 참조).이 문서(작성 시)는 다음 사항을 제시합니다.

런타임 지원이 필요한 다른 ES6+ 기능(Array.from()이나 Symbol 등)을 사용하는 경우 적절한 폴리필을 수동으로 포함하거나 타겟 브라우저가 이미 이러한 기능을 지원하는지 확인하십시오.

그럼... 그들을 '수동적으로' 포함시키는 가장 좋은 방법은 무엇일까요?

업데이트: 이 질문/답변 이후 create-react-app polyfill 접근법 및 문서가 변경되었습니다.이제 다음을 포함해야 합니다.react-app-polyfill(여기) ie11과 같은 오래된 브라우저를 지원하는 경우단, 여기에는 "...최소한의 요건과 일반적으로 사용되는 언어 기능"만 포함됩니다.따라서 일반적인 ES6/7 기능(예:Array.includes)

---

다음의 2개의 어프로치가 모두 기능합니다.

---

1. react-app-polyfill 및 core-js로부터의 수동 Import

react-app-polyfill 및 core-js(3.0+)를 설치합니다.

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

polyfules.js라는 파일을 생성하여 root index.js 파일로 Import합니다.그런 다음 기본 리액트 앱 폴리필과 다음과 같은 특정 필수 기능을 가져옵니다.

/* 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.io CDN을 사용하여 다음 행을 index.display에 추가하여 커스텀 브라우저 고유의 폴리필을 가져옵니다.

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

메모, 나는 설명을 요청해야 했다.Array.prototype.includes디폴트 피쳐 세트에 포함되지 않기 때문에 기능.

React에 사용되는 일반적인 ES6 기능을 위해 폴리필이 있는 react-app-polyfill을 사용합니다.Create-React-App의 일부입니다.README에 정의된 대로 index.js의 선두에 포함시켜야 합니다.

실을 사용하여 폴리필을 다운로드하여 index.js에 직접 Import했습니다.

명령 프롬프트:

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';
...

저는 이 방법을 좋아합니다.왜냐하면 저는 필요한 것을 프로젝트에 구체적으로 Import하기 때문입니다.

새로운 구글 검색 콘솔과 리액트 앱(create-react-app)에 문제가 있었습니다.es6shim을 추가하면 모든 것이 해결되었습니다.

public 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에 의해 이 문제가 자동으로 해결됩니다. ; )

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★다니엘 로이터튼입니다만 core-js! core-js에서 Import를 더 했습니다.import 'core-js/modules/es6.symbol';IE11 서 ie ie ie ie ie ie ie ie ie ie ie.

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