为什么IE 11显示空白页面渲染应用程序 [英] Why IE 11 display blank page rendering react app

问题描述

我对IE 11和我的react应用有问题.我使用Webpack，babel和polyfill.io cdn，在渲染捆绑文件之前一切都很好，然后它停止执行任何操作. 您知道什么地方可能出问题吗?

I have an issue with IE 11 and my react app. I use Webpack, babel and polyfill.io cdn and all is nice until rendering bundeled file, then it stops doing anything. Do you have any idea what may go wrong?

谢谢.

推荐答案

反应立即与IE不兼容，

React is not compatible right away with IE,

摘自官方文档:

React支持所有流行的浏览器，包括Internet Explorer 9和更高版本，尽管IE 9和IE 10等较旧的浏览器需要某些填充.

React supports all popular browsers, including Internet Explorer 9 and above, although some polyfills are required for older browsers such as IE 9 and IE 10.

我们不支持不支持ES5方法的旧版浏览器，但是 如果使用polyfill，您可能会发现您的应用程序可以在较旧的浏览器中运行 页面中包含诸如es5-shim和es5-sham之类的内容.你在你的 如果您选择走这条路，那就拥有它.

We don’t support older browsers that don’t support ES5 methods, but you may find that your apps do work in older browsers if polyfills such as es5-shim and es5-sham are included in the page. You’re on your own if you choose to take this path.

---

要使您的应用程序在IE(11或9)上运行，您将必须安装React-app-polyfill:

---

To make your application work on IE (11 or 9) you will have to install React-app-polyfill :

https://www.npmjs.com/package/react-app-polyfill

功能:

每个polyfill确保存在以下语言功能:

Each polyfill ensures the following language features are present:

Promise (for async / await support)
window.fetch (a Promise-based way to make web requests in the browser)
Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
Symbol (a built-in object used by for...of syntax and friends)
Array.from (a built-in static method used by array spread, i.e. [...arr])

用法

首先，使用Yarn或npm安装软件包:

First, install the package using Yarn or npm:

npm install react-app-polyfill

现在，您可以导入要支持的最低版本的入口点.例如，如果导入IE9入口点，则其中将包括IE10和IE11支持.

Now, you can import the entry point for the minimal version you intend to support. For example, if you import the IE9 entry point, this will include IE10 and IE11 support.

Internet Explorer 9

Internet Explorer 9

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9';

// ...

Internet Explorer 11

Internet Explorer 11

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';

// ...

---

您还可以使用以下文档将清单配置为处理不同的浏览器: https://github.com/浏览器列表/浏览器列表

示例:

"browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9"
]

---

来自官方网站

这篇关于为什么IE 11显示空白页面渲染应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！