React 生产版本不适用于 IE 11答案

【问题标题】：React production build not working with IE 11React 生产版本不适用于 IE 11
【发布时间】：2019-06-24 09:42:07
【问题描述】：

我的 react 项目使用 express 作为后端。当我在开发模式下使用 React 的“npm start”和 express 服务器的“node server.js”运行项目时，我可以在 chrome 和 IE 11 中使用它。当我使用“npm run”创建生产构建时build”并使用“node server.js”运行它，它可以在 Chrome 中运行，但在 IE 11 中它不起作用。我在控制台中没有看到任何错误。

我在 index.js 的开头使用以下语句来使代码与 IE 11 兼容。

导入'core-js/es6/map'; 导入'core-js/es6/set'；导入'raf/polyfill';

反应版本 - 16。使用 create-react-app 创建的项目。

我认为它不起作用，因为 webpack.config.prod.js 没有捆绑 IE 11 兼容的代码。

【问题讨论】：

你在用create-react-app吗？
这很难说是怎么回事！但是尝试将 Babel 配置为兼容 IE11。可能是IE看不懂的JS特性吧。 Check this out
基诺 - 是的，我正在使用 create-react-app。

标签： node.js reactjs webpack

【解决方案1】：

来自官方文档：

React 支持所有流行的浏览器，包括 Internet Explorer 9 及更高版本，但旧版浏览器（如 IE 9 和 IE 10）需要一些 polyfill。

安装这两个包。

  npm install babel-polyfill
  npm install react-app-polyfill

这必须是 src/index.js 的第一行

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

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

示例：

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

【讨论】：

为什么选择 babel-polyfill？

【解决方案2】：

你应该使用：react-app-polyfill

这个包包括适用于各种浏览器的 polyfill。它包括 Create React App 项目使用的最低要求和常用语言功能。

用法首先，使用 Yarn 或 npm 安装包：

npm install react-app-polyfill

或

yarn add react-app-polyfill

对于 IE9：

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

对于 IE11：

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

【讨论】：

这些必须是 src/index.js 中的第一行，这是重要的部分

【解决方案3】：

导入“react-app-polyfill/ie11”

导入“react-app-polyfill/stable”

第二行（react-app-polyfille/stable）对我有用。我试图在使用 ie11 呈现页面的桌面应用程序中加载反应页面

【讨论】：