Javascript 在使用 create-react-app 的 React 应用程序中填充 ES6 功能的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43756211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to polyfill ES6 features in React app that uses create-react-app
提问by Daniel Loiterton
I've been testing my React.js application on internet explorer, and finding that some ES6/7 code like Array.prototype.includes()breaks it.
我一直在 Internet Explorer 上测试我的 React.js 应用程序，发现一些 ES6/7 代码像Array.prototype.includes()破坏了它。
I'm using 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 hereand here). The documentation (at time of writing) suggests:
我正在使用create-react-app，显然他们选择不包含很多 polyfill，因为不是每个人都需要它们，并且它们会减慢构建时间（例如参见此处和此处）。文档（在撰写本文时）建议：
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.
如果您使用任何其他需要运行时支持的 ES6+ 功能（例如 Array.from() 或 Symbol），请确保您手动包含适当的 polyfill，或者您的目标浏览器已经支持它们。
So... what is the best way to 'manually' include them?
那么...... “手动”包含它们的最佳方法是什么？
回答by Daniel Loiterton
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)
更新：自此问题/答案以来，create-react-app polyfill 方法和文档已更改。如果您想支持像 ie11 这样的旧浏览器，您现在应该包括react-app-polyfill( here)。但是，这仅包括“ ...最低要求和常用语言功能”，因此对于不太常见的 ES6/7 功能（例如Array.includes），您仍然希望使用以下方法之一
These two approaches both work:
这两种方法都有效：
1. Manual imports from react-app-polyfill and core-js
1. 从 react-app-polyfill 和 core-js 手动导入
Install react-app-polyfilland core-js(3.0+):
安装react-app-polyfill和core-js(3.0+)：
npm install react-app-polyfill core-jsor yarn add react-app-polyfill core-js
npm install react-app-polyfill core-js或者 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 的文件并将其导入到您的根 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 service
2.Polyfill服务
Use the polyfill.ioCDN to retrieve custom, browser-specific polyfills by adding this line to index.html:
使用polyfill.ioCDN 通过将此行添加到 index.html 来检索自定义的、特定于浏览器的 polyfill：
<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.includesfeature as it is not included in the default feature set.
请注意，我必须明确请求该Array.prototype.includes功能，因为它不包含在默认功能集中。
回答by icewhite
Use the react-app-polyfillwhich 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.
使用react-app-polyfill，它为 React 中使用的常见 ES6 功能提供了 polyfill。它是create-react-app的一部分。确保将它包含在自述文件中定义的 index.js 的开头。
回答by gus3001
I used yarn to download the polyfill and imported it directly in my index.js.
我使用 yarn 下载了 polyfill 并将其直接导入到我的 index.js 中。
In command prompt:
在命令提示符中：
yarn add array.prototype.fill
And then, at the top of index.js:
然后，在顶部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.
我喜欢这种方法，因为我专门将我需要的东西导入到项目中。
回答by David J Barnes
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.
值得一提的是，我在使用新的 Google Search Console 和我的 React 应用程序 (create-react-app) 时遇到了问题。添加es6shim后，一切都解决了。
I added the below to my public index.html page.
我将以下内容添加到我的公共 index.html 页面中。
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
回答by webmaster
Eject from your Create React App Project
从你的 Create React App 项目中弹出
Afterwards you can put all your polyfills in your /config/polyfills.jsfile
之后，您可以将所有的 polyfill 放入您的/config/polyfills.js文件中
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 ;)
Webpack 会自动为你解决这个问题；)
回答by Dual
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.
我有同样的问题。Daniel Loiterton 的解决方案对我不起作用。但！我添加了一个来自 core-js 的导入import 'core-js/modules/es6.symbol';，这在 IE11 上对我有用。
