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

问题描述 投票:59回答:6

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

事实证明它并不那么简单。从我所看到的,他们选择不包括大量的polyfill,因为不是每个人都需要它,并且它减慢了构建时间。例如,参见herehere。有一次尝试document this,但没有提到如何自己实际进行polyfills。只是这个:

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

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

reactjs ecmascript-6 babeljs create-react-app
6个回答
82
投票

更新:自此问题/答案以来,create-react-app polyfill方法和文档已更改。如果你想支持像ie11这样的旧浏览器,你现在应该包括react-app-polyfillhere)。但是,这仅包括“...最低要求和常用语言功能”,因此您仍然希望使用以下方法之一来解决不太常见的ES6 / 7功能(如Array.includes


这两种方法都有效:


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

安装react-app-polyfillcore-js(3.0+):

npm install react-app-polyfill core-jsyarn add react-app-polyfill core-js

创建一个名为(类似于)polyfills.js的文件,并将其导入根index.js文件中。然后导入基本的react-app polyfills,以及任何特定的必需功能,如下所示:

/* 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功能,因为它未包含在默认功能集中。


8
投票

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


6
投票

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

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


1
投票

从您的Create React App Project中弹出

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

将以下内容放在文件的末尾

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

Webpack会自动为您解决此问题;)


1
投票

对于它的价值,我遇到了新的Google Search Console和我的React应用程序(create-react-app)的问题。添加es6shim后,所有内容都已解决。

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

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

0
投票

我有同样的问题。 Daniel Loiterton的解决方案对我不起作用。但!我添加了一个来自core-js import 'core-js/modules/es6.symbol';的导入,这对我来说适用于IE11。

© www.soinside.com 2019 - 2024. All rights reserved.