在使用 create-react-app 的 React 应用程序中填充 ES6 功能的最佳方法
Best way to polyfill ES6 features in React app that uses create-react-app
我一直在 Internet Explorer 上测试我的 React.js 应用程序，发现一些 ES6/7 代码如 Array.prototype.includes() 破坏了它。
我正在使用 create-react-app, and apparently they've chosen not to include a lot of polyfills since not everyone needs them, and they slow down build times (see for example here and here)。文档（在撰写本文时）建议：
If you use any other ES6+ features that need runtime support (such as
Array.from() or Symbol), make sure you are including the appropriate
polyfills manually, or that the browsers you are targeting already
support them.
那么... 'manually' 包含它们的最佳方法是什么？
更新：create-react-app polyfill 方法和文档自此 question/answer 以来发生了变化。如果你想支持像 ie11 这样的旧浏览器，你现在应该包括 react-app-polyfill (here)。但是，这仅包括“...最低要求和常用语言功能”，因此对于不太常见的 ES6/7，您仍然需要使用以下方法之一功能（如 Array.includes）
这两种方法都有效：
1.从 react-app-polyfill 和 core-js
手动导入
安装react-app-polyfill and core-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 检索自定义的、特定于浏览器的 polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>
请注意，我必须明确请求 Array.prototype.includes 功能，因为它不包含在默认功能集中。
我用 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';
...
我喜欢这种方法，因为我专门将我需要的东西导入到项目中。
从您的 Create React App 项目中弹出
之后您可以将所有 polyfill 放入 /config/polyfills.js 文件
将以下内容放在文件末尾
Object.values = Object.values ? Object.values : o=>Object.keys(o).map(k=>o[k]);
Webpack 会自动为您修复此问题；）
使用react-app-polyfill which has polyfills for the common ES6 features used in React. And it's part of create-react-app。确保按照 README 中的定义将其包含在 index.js 的开头。
我遇到了同样的问题。 Daniel Loiterton 的解决方案对我不起作用。但！我从 core-js import 'core-js/modules/es6.symbol'; 添加了一个导入，这对我在 IE11 上有效。
值得一提的是，我在使用新的 Google Search Console 和我的 React 应用程序 (create-react-app) 时遇到了问题。添加es6shim后，一切都解决了。
我将以下内容添加到我的 public index.html 页面。
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
我一直在 Internet Explorer 上测试我的 React.js 应用程序，发现一些 ES6/7 代码如 Array.prototype.includes() 破坏了它。
我正在使用 create-react-app, and apparently they've chosen not to include a lot of polyfills since not everyone needs them, and they slow down build times (see for example here and here)。文档（在撰写本文时）建议：
If you use any other ES6+ features that need runtime support (such as Array.from() or Symbol), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.
那么... 'manually' 包含它们的最佳方法是什么？
更新：create-react-app polyfill 方法和文档自此 question/answer 以来发生了变化。如果你想支持像 ie11 这样的旧浏览器，你现在应该包括 react-app-polyfill (here)。但是，这仅包括“...最低要求和常用语言功能”，因此对于不太常见的 ES6/7，您仍然需要使用以下方法之一功能（如 Array.includes）
这两种方法都有效：
1.从 react-app-polyfill 和 core-js
手动导入安装react-app-polyfill and core-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 检索自定义的、特定于浏览器的 polyfill<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>
请注意，我必须明确请求 Array.prototype.includes 功能，因为它不包含在默认功能集中。
我用 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';
...
我喜欢这种方法，因为我专门将我需要的东西导入到项目中。
从您的 Create React App 项目中弹出
之后您可以将所有 polyfill 放入 /config/polyfills.js 文件
将以下内容放在文件末尾
Object.values = Object.values ? Object.values : o=>Object.keys(o).map(k=>o[k]);
Webpack 会自动为您修复此问题；）
使用react-app-polyfill which has polyfills for the common ES6 features used in React. And it's part of create-react-app。确保按照 README 中的定义将其包含在 index.js 的开头。
我遇到了同样的问题。 Daniel Loiterton 的解决方案对我不起作用。但！我从 core-js import 'core-js/modules/es6.symbol'; 添加了一个导入，这对我在 IE11 上有效。
值得一提的是，我在使用新的 Google Search Console 和我的 React 应用程序 (create-react-app) 时遇到了问题。添加es6shim后，一切都解决了。
我将以下内容添加到我的 public index.html 页面。
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>