在使用create-react-app的React应用程序中充填ES6功能的最佳方法 [英] Best way to polyfill ES6 features in React app that uses create-react-app

问题描述

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

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功能(例如)

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)

这两种方法都可以起作用:

These two approaches both work:

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 polyfills，以及任何特定的必需功能，例如:

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，通过将以下行添加到自定义的，特定于浏览器的polyfill中: 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屋！