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

Question

我一直在Internet Explorer上测试我的React.js应用程序,令我惊讶的是,ES6代码就像Array.prototype.includes()打破它一样.我正在使用creat-react-app入门套件,我认为babel是其中的一部分,并且它允许我编写ES6代码.

事实证明它并不那么简单.从我所看到的,他们选择不包括大量的polyfill,因为不是每个人都需要它,并且它减慢了构建时间.例如,在此处和此处查看.有人试图记录这一点,但没有提到如何自己实际进行填充.只是这个:

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

那么......"手动"包含它们的最佳方式是什么？我认为那是babel用于什么的一部分？我应该部分导入babel-polyfill的元素吗？

Answer 1

更新:自此答案以来,create-react-app polyfill方法和文档已更改.您现在应该包括react-app-polyfill(此处)是否要支持ie11等旧版浏览器.但是,这仅包括" ...最低要求和常用语言功能 ",因此您仍然希望使用以下方法之一来处理不常见的ES6/7功能(例如Array.includes)

这两种方法都有效:

1.从core-js手动导入

创建一个名为(类似于)polyfills.js的文件,并将其导入根index.js文件中.

运行npm install react-app-polyfill core-js(或yarn add react-app-polyfill core-js)并导入基础知识以及任何特定的必需功能,如下所示:

/* 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来检索自定义的特定于浏览器的polyfill:

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

请注意,我不得不明确请求该Array.prototype.includes功能,因为它未包含在默认功能集中.

Answer 2

使用具有polyfill 的react-app-polyfill,用于React中使用的常见ES6功能.它是create-react-app的一部分.确保将其包含在自述文件中定义的index.js的开头.

Answer 3

我使用纱线下载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';
...

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