为什么IE 11显示空白页面渲染应用程序

Question

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

提前致谢。

Answer 1

React可能不会立即与IE兼容，

从官方文档中：

尽管老版本的浏览器（例如IE 9和IE 10）需要使用polyfill，但React支持所有流行的浏览器，包括Internet Explorer 9及更高版本。

我们不支持不支持ES5方法的旧版浏览器，但是如果页面中包含诸如es5-shim和es5-sham之类的polyfill，您可能会发现您的应用程序可以在旧版浏览器中运行。如果您选择走这条路，那您就自己一个人。

为了使您的应用程序可以在IE（11或9）上运行，您必须安装React-app-polyfill：

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

特征 ：

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

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安装软件包：

npm install react-app-polyfill

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

Internet Explorer 9

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

// ...

Internet Explorer 11

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

// ...

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

例如：

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

Answer 2

对于偶然发现这个问题的任何其他人，

如果 react-app-polyfill 对您不起作用，请尝试使用 core-js。

$ npm install core-js

确保这是 src/index.js 文件中的第一行：

import 'core-js/stable'

此外，您在开发过程中可能看不到修复程序。

对我来说，这个问题只在生产版本中得到解决（react build）

Answer 3

包 react-app-polyfill 将有助于在 ie9 和 ie11 中运行 react app。这将适用于开发和生产环境。

请按照步骤 1. 编辑 index.js 文件并在文件的最顶部添加以下几行。

    import 'react-app-polyfill/ie9';
    import 'react-app-polyfill/ie11';
    import 'react-app-polyfill/stable';

2. 编辑 Package.json 文件并在浏览器列表的开发部分添加“即 11”。默认的生产列表非常慷慨，并且通过> 0.2％已经包括即11

   "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version",
     "ie 11"
   ]
   

   }

3. 删除整个 node_modules 文件夹

4. 运行 npm install 重新安装 node_modules

5. 运行 npm start 再次运行

Answer 4

react-app-polyfills只在生产中对我有用，在开发中不适用。构建、部署然后测试它。

Answer 5

如果你在你的reducer中使用Object.assign()（例如）或者IE11不支持polyfilling的其他一些函数，你就会遇到这个问题。