如何正确构建支持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。