在使用 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() 破坏了它).

I've been testing my React.js application on internet explorer, and finding that some ES6/7 code like Array.prototype.includes() breaks it.

我正在使用 create-react-app，显然他们选择了不要包含很多 polyfill，因为不是每个人都需要它们，并且它们会减慢构建时间(参见例如 此处 和此处).文档(在撰写本文时)建议:

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 here and here). The documentation (at time of writing) suggests:

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

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.

那么... 手动"包含它们的最佳方法是什么?

推荐答案

更新:自此问题/答案以来，create-react-app polyfill 方法和文档发生了变化.您现在应该包含 react-app-polyfill (这里) 如果你想支持像 ie11 这样的旧浏览器.但是，这仅包括...最低要求和常用语言功能"，因此对于不太常见的 ES6/7 功能(例如 Array.includes)

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)

这两种方法都有效:

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

安装 react-app-polyfill 和 core-js (3.0+):

Install 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，以及任何特定的必需功能，如下所示:

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

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:

Use the polyfill.io CDN to retrieve custom, browser-specific polyfills by adding this line to index.html:

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

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

note, I had to explicity request the Array.prototype.includes feature as it is not included in the default feature set.

这篇关于在使用 create-react-app 的 React 应用程序中填充 ES6 功能的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！