Question

我一直在Internet Explorer上测试我的React.js应用程序，令我惊讶的是，像Array.prototype.includes()这样的ES6代码打破了它。我正在使用creat-react-app入门套件，我认为babel是其中的一部分，并且它允许我编写ES6代码。

事实证明它并不那么简单。从我所看到的，他们选择不包括大量的polyfill，因为不是每个人都需要它，并且它减慢了构建时间。例如，请参阅here和here。曾试图document this，但没有提到如何自己实际进行填充。就是这样：

如果您使用任何其他需要运行时支持的ES6 +功能（例如 Array.from（）或Symbol），确保包含相应的手动填充，或者您已经定位的浏览器支持他们。

那么......“手动”包含它们的最佳方式是什么？我认为那是babel用于什么的一部分？我应该部分导入babel-polyfill的元素吗？

Answer 1

更新：自此问题/答案以来，create-react-app polyfill方法和文档已更改。如果您想支持像ie11这样的旧浏览器，那么现在应该包含react-app-polyfill（here）。但是，这仅包括＆＃34; ...最低要求和常用语言功能＆＃34;，因此您仍然希望使用以下方法之一，以减少常见问题ES6 / 7功能（如Array.includes）

这两种方法都有效：

<强> 1。从react-app-polyfill和core-js手动导入

安装react-app-polyfill和core-js（3.0 +）：

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

创建一个名为（类似于）polyfills.js的文件，并将其导入根index.js文件中。然后导入基本的react-app polyfills，以及任何特定的必需功能，如：

/* 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服务

使用polyfill.io CDN通过将此行添加到index.html来检索自定义的特定于浏览器的polyfill：

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

请注意，我必须明确请求Array.prototype.includes功能，因为它未包含在默认功能集中。

Answer 2

使用react-app-polyfill来填充React中常用的ES6功能。它是create-react-app的一部分。确保按照自述文件中的定义将其包括在index.js的开头。

Answer 3

我使用纱线下载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';
...

我喜欢这种方法，因为我专门将我需要的内容导入到项目中。

Answer 4

从您的Create React App Project中弹出

然后，您可以将所有填充填充物放入/config/polyfills.js文件中

在文件末尾放置以下内容

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

Webpack会自动为您修复此问题；）

Answer 5

我值得一提的是，新的Google Search Console和我的React应用程序（create-react-app）遇到了问题。添加es6shim后，所有问题都解决了。

我在公共index.html页面上添加了以下内容。

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

Answer 6

我有同样的问题。 Daniel Loiterton的解决方案对我不起作用。但！我从core-js import 'core-js/modules/es6.symbol';添加了另一个导入，这对我在IE11上有效。

在使用create-react-app的React应用程序中填充ES6功能的最佳方法

6 个答案: