CRA对于IE9的兼容性设置

首先列出使用依赖：

问题主要原因

当我们使用create-react-app构建react项目的时候，由于引用了React的16.x以上的版本，而此版本中引用了ES2015中的Map和Set这种新的数据类型，而create-react-app默认的polyfill中，默认支持的只有promise。因此，在实际项目中，我们通常会需要手动对Set 和 Map两种数据类型，进行polyfill，或者兼容写法。

生产环境下配置

为了解决这个问题，我们需要引入第三方依赖包：

npm core-js react-app-polyfill

之后进行如下两步：

1.在src/index.js的最上方引入依赖：

import 'core-js/es6/map';
import 'core-js/es6/set';
import  "react-app-polyfill/ie9";
import  "react-app-polyfill/stable";

2.在package.json中设置属性：

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

 注：core-js在@3以上直接引入core-js/es即可

之后将项目打包运行，页面可以显示成功。

本地环境下配置

在本地环境下（npm start启动CRA）配置CRA使其正确兼容IE9极其复杂，主要原因是如果在src/index.js中直接import ‘polyfill’，当CRA启动时不能正确的在页面加载中解析而失效。因为水平有限所以没能成功跑出来，但还是将研究过程中的一些经验总结以下

"Map" 未定义
"Set" 未定义
Promise 未定义
对象不支持 "setPrototypeOf" 属性或方法

对于map与set未定义，可以看下这篇文章，作者通过在index.html中引入es6-shim来解决关于create-react-app 兼容IE9以上 浏览器的说明 - 知乎

这篇文章中作者做了一些相关问题总结：CRA (create-react-app) IE 兼容方案 - 云+社区 - 腾讯云

对于setPrototypeOf问题，在github上有些讨论:升级新版本之后ie报错 · Issue #413 · umijs/umi · GitHub