由 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 。