为什么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?

提前致谢.

推荐答案

React 与 IE 不兼容，

React is not compatible right away with IE,

来自官方文档:

React 支持所有流行的浏览器，包括 Internet Explorer 9 及更高版本，尽管旧版浏览器(例如 IE 9 和 IE 10)需要一些 polyfill.

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 方法的旧浏览器，但是如果 polyfills，您可能会发现您的应用程序确实可以在旧浏览器中运行页面中包含 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屋！