Question

随着Create React App 3.0的发布和浏览器列表的添加，添加对IE 11的支持变得微不足道，但是如果您不知道在哪里查找，则很难找到这些步骤。该文档列出了“受支持的浏览器”，并显示了默认的浏览器列表配置（https://facebook.github.io/create-react-app/docs/supported-browsers-features），但这并不是您所需要的全部。

使用生产设置检查browserl.ist时，您会看到IE 11比Edge still（https://browserl.ist/?q=%3E0.2%25%2C+not+dead%2C+not+op_mini+all）具有更大的使用率。使用默认的CRA 3应用程序，您将在main.chunk.js和其他代码中获得语法错误。 IE 11导致您的应用出现错误。

Answer 1

IE 11是一场噩梦。有些事情可能会解决问题：

使用react-app-polyfill，您可以更新主要内容，这是一个很好的起点。该文档非常容易实现：https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill。
您可能还使用了箭头功能，因此还需要babel来为您更新。 babel-plugin-transform-arrow-functions是您的最佳解决方案。 https://babeljs.io/docs/en/babel-plugin-transform-arrow-functions文档对此进行了很好的解释。
检查该应用是否支持browserslist中的大多数浏览器。

Answer 2

如果您来到这里时遇到了沉浸（redux reducers状态）问题：

添加纱线（或安装npm）react-app-polyfill快速文本编码

src / index.js

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'fast-text-encoding/text';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

在化简文件中：

reducer.js

import { enableES5 } from 'immer';

enableES5();//before any logic

/** YOUR LOGIC **/

最后，在package.json部分的ie 11中包括browsersList以进行开发。（以防万一）

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

Answer 3

要停止错误并获得在IE 11中运行的默认create-react-app React应用程序：

使用npx create-react-app [AppName]
将import 'react-app-polyfill/ie11';添加到index.js的非常顶部
如果您需要IE 11不支持的通用标准函数（例如Array.find（）），请在index.js的第一行下方添加import 'react-app-polyfill/stable';。
在package.json中，将生产浏览器列表复制到开发中，以便您可以在IE11中进行测试
删除node_modules / .cache目录

如何使用Create React App 3.0支持IE 11？

3 个答案: