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

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

我在用着创建反应应用程序 https://github.com/facebookincubator/create-react-app，显然他们选择不包含大量的填充，因为不是每个人都需要它们，并且它们会减慢构建时间（例如参见here https://github.com/facebookincubator/create-react-app/issues/942 and here https://github.com/facebook/create-react-app/issues/914#issuecomment-255336818）。该文档（在撰写本文时）建议：

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

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

Update：自此问题/答案以来，create-react-app polyfill 方法和文档已发生变化。您现在应该包括react-app-polyfill (here https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill）如果你想支持像 ie11 这样的旧浏览器。然而，这仅包括“...最低要求和常用语言功能”，因此您仍然需要使用以下方法之一来实现不太常见的 ES6/7 功能（例如Array.includes)

这两种方法都有效：

1.从react-app-polyfill和core-js手动导入

Install 反应应用程序填充 https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill and core-js https://github.com/zloirock/core-js (3.0+):

npm install react-app-polyfill core-js or 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服务

Use the polyfill.io https://polyfill.io/v2/docs/CDN 通过将此行添加到 index.html 来检索自定义的、特定于浏览器的 polyfill：

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

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