[英]React App converting JS to ES5 to target IE 11
I currently have a react app which is not running / rendering in IE, I think due to an ES5 / ES6 problem.我目前有一个未在 IE 中运行/渲染的 React 应用程序,我认为是由于 ES5/ES6 问题。
The error I get is this: Syntax error.我得到的错误是:语法错误。
On the line highlighted below.在下面突出显示的行上。
if(process.env.NODE_ENV == 'production') {
=> module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
At the top of index.js prior to compilation:在编译前 index.js 的顶部:
import 'babel-polyfill';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
package.json:包.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"
}
}
Inside .babelrc .babelrc 内
{
"presets": ["@babel/env","@babel/preset-react",["@babel/preset-env", { "targets": "defaults" }]],
"plugins" : ["@babel/plugin-syntax-dynamic-import"]
}
Can anyone guide me in the right direction as to how to get babel to compile things properly for ES5?任何人都可以指导我如何让 babel 为 ES5 正确编译东西的正确方向吗? You'll notice here instead of ejecting, I'm using react-app-rewired, I don't think that should cause issues, so any help appreciated.
您会在这里注意到而不是弹出,我使用的是 react-app-rewired,我认为这不会引起问题,因此感谢任何帮助。
Update:更新:
"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 is very similar to this Github issue in core-js这与core-js 中的这个 Github 问题非常相似
As suggested in that thread, you might add this to your preset config按照该线程中的建议,您可以将其添加到预设配置中
{ modules: false,
useBuiltIns: 'entry',
corejs: 3 }
Or import the function directly或者直接导入函数
import 'core-js/features/string/repeat';
First In the index.js file the import is for import 'babel-polyfill';首先在 index.js 文件中,import 用于 import 'babel-polyfill'; think should be @babel/polyfill.
认为应该是@babel/polyfill。 But that would not resolve IE 11 issues.
但这不会解决 IE 11 问题。
We had a similar issue, had to switch to core-js for bundling - which you already have.我们遇到了类似的问题,不得不切换到 core-js 进行捆绑——你已经有了。 But you will need @babel/core and @babel/runtime-corejs3 as dev dependencies.
但是你需要 @babel/core 和 @babel/runtime-corejs3 作为开发依赖。
Your preset needs to be changed您的预设需要更改
presets: [
[
"@babel/preset-env", {
"useBuiltIns": "usage",
corejs: { version: 3, proposals: true }
}
]
]
And then replace the code in index.js然后替换 index.js 中的代码
imports babel/polyfill;
with和
import 'core-js/stable';
If you can use typescript then I'll suggest that you can transform your tsconfig.js
file and change target
to es5
.如果您可以使用打字稿,那么我建议您可以转换
tsconfig.js
文件并将target
更改为es5
。
If not then create .babelrc file and inside it add this:如果没有,则创建.babelrc文件并在其中添加以下内容:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"forceAllTransforms": true,
"corejs": "3.0.0",
"targets": {
"ie": "11"
}
}
]
]
}
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"forceAllTransforms": true,
"corejs": "3.0.0",
"targets": {
"ie": "11"
}
}
]
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.