在使用 create-response-app 的 React 应用程序中填充 ES6特性的最佳方法

我一直在 Internet Explorer 上测试我的 React.js 应用程序，发现一些 ES6/7代码(如 Array.prototype.includes())破坏了它。

我使用的是 创建-反应-应用程序，显然他们没有选择包含很多填充物，因为不是每个人都需要它们，而且他们减慢了构建时间(参见例如 给你和 给你)。文档(在撰写本文时)建议:

如果您使用任何其他需要运行时支持的 ES6 + 特性(例如 从()或符号) ，确保包含适当的 手动填充，或者您已经瞄准的浏览器 支持他们。

那么... 什么是“手动”包含它们的最佳方式？

104591 次浏览
小开
最佳答案

Update: The create-react-app polyfill approach and docs have changed since this question/answer. You should now include react-app-polyfill (here) if you want to support older browsers like ie11. However, this only includes the "...minimum requirements and commonly used language features", so you'll still want to use one of the approaches below for less common ES6/7 features (like Array.includes)

These two approaches both work:

1. Manual imports from react-app-polyfill and core-js

Install react-app-polyfill and core-js (3.0+):

npm install react-app-polyfill core-js or yarn add react-app-polyfill core-js

Create a file called (something like) polyfills.js and import it into your root index.js file. Then import the basic react-app polyfills, plus any specific required features, like so:

/* 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 service

Use the polyfill.io CDN to retrieve custom, browser-specific polyfills by adding this line to index.html:

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

note, I had to explicity request the Array.prototype.includes feature as it is not included in the default feature set.

小开

I used yarn to download the polyfill and imported it directly in my index.js.

In command prompt: 

yarn add array.prototype.fill

And then, at the top of index.js:

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

I like this approach since I am specifically importing what I need into the project.

小开

Eject from your Create React App Project

Afterwards you can put all your polyfills in your /config/polyfills.js file

Put the following at the end of the file

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

Webpack will automatically fix this for you ;)

小开

Use the react-app-polyfill which has polyfills for the common ES6 features used in React. And it's part of create-react-app. Make sure you include it at the start of index.js as defined in the README.

小开

I had the same problem. A solution from Daniel Loiterton didn't work for me. But! I added one more import from core-js import 'core-js/modules/es6.symbol'; and this works for me on IE11.

小开

For what it's worth I was having issues with the new Google Search Console and my React app (create-react-app). After adding the es6shim, all was resolved.

I added the below to my public index.html page.

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

提交答案