React App - Bable Polyfill 无法正常工作 IE11

Question

我正在开发一个 React 应用程序，该应用程序报告了一个我正在摸不着头脑的问题，并且似乎很多人也遇到了这个问题。

控制台中的错误是

所有解决问题的尝试均未成功，包括以下链接：

React polyfills for ie >= 9

React app not rendering in IE 11 even with polyfills

https://github.com/facebook/create-react-app/issues/8197

我的 index.tsx 文件看起来像这样

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'fast-text-encoding/text';
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { hot } from 'react-hot-loader/root'
import App from './App'

我已将它包含在我的 package.json 文件中

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

IE11 控制台中的错误指向 bundle.js 作为问题，更具体地说是这些箭头函数。

 const is = {
  arr: Array.isArray,
  obj: a => Object.prototype.toString.call(a) === '[object Object]', // This is where the error is reported. 
  fun: a => typeof a === 'function',
  str: a => typeof a === 'string',
  num: a => typeof a === 'number',
  und: a => a === void 0,
  nul: a => a === null,
  set: a => a instanceof Set,
  map: a => a instanceof Map,

  equ(a, b) {
    if (typeof a !== typeof b) return false;
    if (is.str(a) || is.num(a)) return a === b;
    if (is.obj(a) && is.obj(b) && Object.keys(a).length + Object.keys(b).length === 0) return true;
    let i;

  for (i in a) if (!(i in b)) return false;

  for (i in b) if (a[i] !== b[i]) return false;

  return is.und(i) ? a === b : true;
 }

};

我的 ts 配置文件如下所示：

  {
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es6",          <=== //// Could this and target be something to do with the issue?
    "moduleResolution": "node",
    "target": "es5",          <=== //// Could this and module be something to do with the issue?
    "allowJs": true,          
    "checkJs": true,
    "jsx": "react",
    "baseUrl": ".",
    "types": ["react", "node", "jest"],
    "paths": {
      "assets/*": ["src/assets/*"],
      "config/*": ["src/config/*"],
      "containers/*": ["src/containers/*"],
      "hooks/*": ["src/hooks/*"],
      "providers/*": ["src/providers/*"],
      "routes/*": ["src/routes/*"],
      "store/*": ["src/store/*"],
      "tests/*": ["src/tests/*"],
      "theme/*": ["src/assets/theme/*"],
      "constants/*": ["src/utils/constants/*"],
      "translations/*": ["src/translations/*"],
      "utils/*": ["src/utils/*"],
      "views/*": ["src/views/*"]
    }
  },
  "include": ["./src/**/*", "tsconfig.json", "./typings/**/*.ts"]
}

我将不胜感激在此方面提供的任何和所有帮助，包括修复可能是什么、我需要调查哪些我可能错过了等等。

Answer 1

我能够在 IE11 中部分加载我的应用程序。 我的问题之一是你的箭头功能。 我与您的不同之处在于浏览器列表中我将“ie 11”作为最后一个。

在react docs：

编辑 browserslist 配置时，您可能会注意到您的更改 不要马上被接走。这是由于一个问题 babel-loader 未检测到 package.json 中的更改。一个快速 解决方法是删除 node_modules/.cache 文件夹，然后重试。

所以我删除了 ./cache 文件夹，运行了一个新版本，然后再次启动应用程序，我可以在 IE11 中看到它

但是我仍然有与@font-face 和closest 相关的代码错误。我得去找它

Answer 2

在将 babel 从版本 6 升级到 7 后，我在 IE 11 上遇到了类似的箭头函数和承诺问题。@babel/polyfill 不适用于 IE 11。不得不切换到 core-js 版本 3。

我的 babel.config.js 文件需要更改并且以下内容已更新

const presets = [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        corejs: { version: 3, proposals: true }
      }
    ],

然后安装

 "core-js": "^3.6.5",
"regenerator-runtime": "^0.13.5",

最后将 @babel/polyfill 导入替换为

import 'core-js/stable';
import 'regenerator-runtime/runtime';

Answer 3

当您已经拥有not ie <= 10 时，这可能不是很明显……请确保您还添加了ie 11，否则它似乎无法转换箭头函数并且无法在 IE11 中加载。

 "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 10",
    "ie 11", // <===========================
    "not op_mini all"
  ]

请注意，我认为默认行为在 react-scripts 版本 3.2.0 和 3.4.0 之间发生了变化。我回滚到 3.2.0 并且不需要将 ie 11 添加到 browserslist，然后前滚到 3.4.0 并且在 browserslist 中明确需要 ie 11。