由 create-react-app 制作的 React 页面不适用于 IE。 babel 没有用吗？

Question

我正在开发一个盯着 create-react-app 的项目。

使用 materil-ui 的 somwhow 页面在 IE 上总是变成白色的空白页面。

package.json 的一部分在这里。 某些页面在下面出现错误。但我无法检测到任何页面。

"dependencies": {
    "@date-io/date-fns": "^1.3.11",
    "@material-ui/core": "^4.9.2",
    "@material-ui/lab": "^4.0.0-alpha.42",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
},
  "babel": {
    "presets": [
      "react",
      "es2015"
    ]},
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not ie <= 11",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }

修改后

Answer 1

您应该在生产版本中将 IE 11 列入白名单，因为"not ie <= 11",会删除 IE 支持。 因为该行表示不支持 IE 11 或更早版本（ <= ）。

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

要构建最终用户版本，应使用以下命令：

npm run build

有关文档中生产构建的更多详细信息。

如果这不起作用，可以在public中将 polyfill 添加到index.html中：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

Answer 2

从您之前的讨论来看，您似乎正在使用 react-scripts 3.3.1。 你可以检查 package.json 文件来验证它。

据我所知，当使用 react-scripts 3.3.0 及更高版本时，可能会导致“SyntaxError”。 您可以检查以下问题：

github.com/facebook/create-react-app/issues/8197 , github.com/facebook/create-react-app/issues/8195 。

作为解决方法，您可以尝试降级 react-scripts 版本。 据我所知，它仍然可以与react-scripts@3.2.0一起react-scripts@3.2.0 。 此外，请不要忘记添加react-app-polyfill polyfill 。