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

Posted 2023-02-22

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

【英文标题】：Best way to polyfill ES6 features in React app that uses create-react-app

【发布时间】：2017-10-01 01:24:44

【问题描述】：

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

我正在使用 create-react-app，显然他们选择不包含大量 polyfill，因为不是每个人都需要它们，而且它们会减慢构建时间（例如，参见 here 和 here）。文档（在撰写本文时）建议：

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

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

【问题讨论】：

Babel 提供了babel-polyfill 作为一个简单的 ES6+ 填充。

注意Array.prototype.includes()实际上是在ES7中，而不是在ES6中

【参考方案1】：

更新：自这个问题/答案以来，create-react-app polyfill 方法和文档发生了变化。如果你想支持像 ie11 这样的旧浏览器，你现在应该包括 react-app-polyfill (here)。但是，这仅包括“...最低要求和常用语言功能”，因此您仍然希望使用以下方法之一来处理不太常见的 ES6/7 功能（例如 @987654327 @)

---

这两种方法都有效：

---

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

使用polyfill.io CDN 检索自定义的、特定于浏览器的 polyfill，方法是将此行添加到 index.html：

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

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

【讨论】：

我可能会更细化。您可以安装 core-js 并从您的 polyfills.js 导入单独的全局 polyfill，而不是复制粘贴。除此之外，这两种方法听起来都不错。

这听起来更聪明，谢谢丹。你的意思是github.com/zloirock/core-js，我假设（即npm install core-js）？

我遇到了一个问题，即使用最新的 create-react-app 生成的应用程序没有出现在 IE 11 及更低版本上。多亏了这个解决方案，我最终加入了<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>（注意es6），现在它的工作就像一个魅力。我认为主要问题是 Symbol 需要一个 polyfill。

@dougmacklin 仅供参考：它的命中或错过，因为在我的情况下，使用你的包含并没有解决我的 IE 11 问题。不幸的是，IE 11 中的开发人员控制台在确定是哪种语言功能导致它出错方面也非常无助。我们最终使用了 babel-polyfill。我知道手头很重，但我们需要让生产现场运转起来。

@ClintonChau，完全可以理解。自从我发布了该评论后，我最终不得不在另一个项目中使用 babel-polyfill 来修复不同的 IE 11 问题

【参考方案2】：

我在使用新的 Google Search Console 和我的 React 应用程序 (create-react-app) 时遇到了问题。添加es6shim后，一切都解决了。

我将以下内容添加到我的公共 index.html 页面中。

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

【参考方案3】：

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

【参考方案4】：

使用react-app-polyfill，它为 React 中使用的常见 ES6 功能提供了 polyfill。它是create-react-app 的一部分。确保将它包含在自述文件中定义的 index.js 的开头。

【讨论】：

我认为我的答案是最好的，但这只是因为它是最近的 - react-app-polyfill 是几个月前才创建的，在那之前其他答案显然更好:-)

嗨@icewhite，我想你对 react-app-polyfill 有点误解了。该包只包括：Promise、window.fetch、Object.assign、Symbol、Array.from 的 polifill。它不包括Array.prototype.includes()或其他人。

【参考方案5】：

从您的 Create React App 项目中弹出

之后，您可以将所有 polyfill 放入您的 /config/polyfills.js 文件中

将以下内容放在文件末尾

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

Webpack 会自动为你解决这个问题；）

【讨论】：

其实找到了更好的方法，npm install --save core-js;导入'core-js/fn/object/values';

你能用这种更好的方式编辑你的答案吗？

【参考方案6】：

我使用 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';
...

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

【讨论】：

这样的事情现在似乎是创建 React App 项目的建议最佳实践。见：github.com/facebook/create-react-app/blob/master/packages/…