如何正确构建支持 IE11 的 CRA 项目？

Question

我正在做一个需要支持 IE11 的项目。

我们正在使用create-react-app。

"browserslist": {
  "production": [
    ">0.2%",
    "ie 11",
    "not dead",
    "not op_mini all"
  ]
}

考虑到 IE11 是一个如此古老的浏览器，在 browserslist 配置中添加任何其他内容是否有意义？

我不能这样做吗？

"browserslist": {
  "production": [
    "ie 11"
  ]
}

另外，如果我正在构建目标 ie 11，我还需要添加 react-app-polyfill 吗？

import 'react-app-polyfill/ie11';

Answer 1

刚刚发现：

"browserslist": {
  "production": [
    "ie 11"
  ]
}

将删除许多有用的前缀，例如-webkit-。

所以，你应该使用：

"browserslist": {
  "production": [
    ">0.2%",
    "ie 11",
    "not dead"
  ]
}

关于 polyfill，你肯定也需要添加它们。

从上图中，你可以看到 babel 会将箭头函数 () => {} 转换为与 IE 11 兼容的语法，但你也可以看到 Object.assign、Promise 和 URL 都需要 polyfill可以在本身不支持它们的旧浏览器上工作。

在这里react-app-polyfill/ie11 你可以看到为 IE11 添加的所有 polyfill。