当前位置: 首页 > 面试题库 >

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

史绍晖
2023-03-14
问题内容

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

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

如果您使用任何其他需要运行时支持的ES6
+功能(例如Array.from()或Symbol),请确保手动添加了适当的polyfill,或者要使用的浏览器已经支持它们。

那么… “手动”包含它们的最佳方法是什么?


问题答案:

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

这两种方法都起作用:

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

通过将以下行添加到index.html,使用polyfill.io
CDN来检索自定义的,特定于浏览器的polyfill:

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

请注意,由于该Array.prototype.includes功能未包含在默认功能集中,因此我必须明确要求该功能。



 类似资料:
  • 我正在尝试使用create react应用程序创建新应用程序 下面是错误<请帮忙。提前谢谢 CLI上的错误映像

  • 创建响应应用时,图像中出现错误。它一直在正常工作,我所做的就是mkdir和cd到那个dir。 这就是错误的样子... NPX:在36.634s中安装了99必须使用导入来加载ES模块: C:\用户\Neeraj\AppData\漫游\npm-cache_npx\5172\node_modules\create-react-app\node_modules\is-promise\index.js不支持

  • Create React App 不用配置就可以创建 React App。 全局安装: npm install -g create-react-app 创建 App: create-react-app my-appcd my-app/ 启动 npm: npm start 打开 http://localhost:3000/  查看你的 App。 如果你准备将其部署到生产环境,只需创建一个压缩包,并且运行 npm run build。

  • 在CRA使用网络字体有问题,在开发模式下它是这样加载的 字体已加载 但是当部署时,在生产模式下,它似乎根本没有加载。伙计们,有什么想法吗?这是我的css。

  • 问题内容: 我开始玩Create React App,但我不明白内如何加载。html代码是这样的: 但是我看不到任何地方的进口。连接在哪里?我想念的是什么? 问题答案: 在幕后,Create React App使用带html-webpack- plugin的Webpack 。 我们的配置指定 Webpack 用作“入口点”。因此,这是它读取的第一个模块,然后是其他模块,将它们编译为一个捆绑包。 当

  • 我目前有一个用create-react-app构建的React应用程序,使用通过CloudFront托管在S3上的react-router v3。该应用程序是托管在其他地方的PHP api的视图。react-router设置为使用BrowserHistory。 到目前为止,我已经尝试了:1)在GoogleBot的入口点导入babel-polyfill。2)设置CloudFront错误页面,以向/i