问题描述
由于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"
}
}
]
]
}