React App将JS转换为ES5以定位IE 11

如何解决React App将JS转换为ES5以定位IE 11

由于ES5 / ES6问题，我目前有一个无法在IE中运行/渲染的React应用。

我得到的错误是：语法错误。

在下面突出显示的行上。

    if(process.env.NODE_ENV == 'production') {
=>       module.exports = require('./cjs/react.production.min.js');
    } else {
      module.exports = require('./cjs/react.development.js');

在编译之前位于index.js的顶部：

import 'babel-polyfill'; 
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

package.json：

{
  "name": "reactapp","version": "0.1.0","private": true,"dependencies": {
    "@babel/polyfill": "^7.8.3","@material-ui/core": "^3.9.3","@material-ui/icons": "^3.0.2","@sentry/browser": "^5.10.2","adblockdetect": "0.0.2","animatewithsass": "^3.2.1","axios": "^0.18.1","babel-polyfill": "^6.26.0","core-js": "^3.6.5","date-fns": "^2.10.0","detectrtc": "^1.4.0","easy-peasy": "^3.2.0","formik": "^2.0.3","google-map-react": "^1.1.5","js-cookie": "^2.2.1","lodash": "^4.17.15","material-design-icons": "^3.0.1","material-icons": "^0.3.1","node-sass": "^4.13.0","platform": "^1.3.5","query-string": "^6.10.1","react": "^16.11.0","react-albus": "^2.0.0","react-app-polyfill": "^1.0.6","react-color": "^2.18.0","react-confirm-alert": "^2.4.1","react-dom": "^16.11.0","react-dropzone": "^11.1.0","react-loader-spinner": "^3.1.5","react-media-recorder": "^1.2.0","react-paginate": "^6.3.2","react-router-dom": "^5.1.2","react-rtc-real": "^1.11.22","react-scripts": "2.1.8","react-select": "^3.1.0","react-simple-line-icons": "^1.0.8","react-spring": "^8.0.27","react-stripe-elements": "^5.1.0","react-stripe-script-loader": "^1.0.16","react-switch": "^5.0.1","react-toastify": "^5.4.0","react-toggle": "^4.1.1","react-tooltip": "^3.11.2","regenerator-runtime": "^0.13.5","semantic-ui-css": "^2.4.1","semantic-ui-react": "^0.88.2","styled-components": "^4.4.1","sweetalert2-react": "^0.8.3","videojs": "^1.0.0","videojs-record": "^4.0.0","webfontloader": "^1.6.28","webrtc-adapter": "^7.5.1","yup": "^0.27.0"
  },"scripts": {
    "start": "react-app-rewired start","build": "set NODE_ENV=production && react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"
  },"eslintConfig": {
    "extends": "react-app"
  },"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"
    ]
  },"devDependencies": {
    "animate-sass": "^0.8.2","es-check": "^5.1.1","react-app-rewired": "^2.1.6"
  }
}

.babelrc内部

{
    "presets": ["@babel/env","@babel/preset-react",["@babel/preset-env",{ "targets": "defaults" }]],"plugins" : ["@babel/plugin-Syntax-dynamic-import"]
}

有人可以指导我正确的方向，如何使babel正确地为ES5编译内容吗？您会在这里注意到，而不是弹出来，我使用的是react-app-rewired，我认为这不会引起问题，因此希望获得任何帮助。

更新：

"Object doesn't support property or method 'repeat'" - when running in development mode. How do I polyfill this? I think this may be the problem.

解决方法

这与this Github issue in core-js

非常相似

如该线程中所建议，您可以将其添加到预设配置中

 { modules: false,useBuiltIns: 'entry',corejs: 3 }

或直接导入功能

import 'core-js/features/string/repeat';

首先，在index.js文件中，导入用于导入“ babel-polyfill”；认为应该是@ babel / polyfill。但这不能解决IE 11问题。

我们有一个类似的问题，必须切换到core-js进行捆绑-您已经拥有了。但是您将需要@ babel / core和@ babel / runtime-corejs3作为开发依赖项。

您的预设需要更改

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

然后替换index.js中的代码

 imports babel/polyfill;

使用

import 'core-js/stable';

如果您可以使用打字稿，那么我建议您可以转换tsconfig.js文件并将target更改为es5。

如果没有，则创建 .babelrc 文件，并在其中添加以下内容：

{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry", "forceAllTransforms": true, "corejs": "3.0.0", "targets": { "ie": "11" } } ] ] }