H5 webapck 打包后,在低版本浏览器,页面无法显示?
H5 webapck 打包后,在低版本浏览器,页面无法显示?定位到问题代码行数,是 axios
请求有问题,这种要怎么兼容?报错信息
SyntaxError.Unexpected ldentifier
at object../node_modules/axios/llb/core/axios.js
import "core-js/features/object/from-entries";
import "core-js/features/array/flat";
import 'core-js/features/promise';
import "core-js/stable";
import "regenerator-runtime/runtime";
import axios from 'axios';
var encodeUri = encodeURIComponent(location.href);
async function getConfigInfo() {
const encodeUriParams = encodeUri ? encodeUri : '';
const strParams = JSON.stringify({
url: encodeUriParams
})
await axios.post('http:xxx',strParams); // 加上这一行就显示错误
}
webpack.config.js里面的配置
module: {
rules: [
{
test: /\.m?js$/, // 匹配 .js 或 .mjs 文件
exclude: /node_modules/, // 排除 node_modules 目录(可选,根据实际情况调整)
use: {
loader: 'babel-loader',
},
}
.babelrc 里面的配置
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": [
"IE >= 9",
"Chrome >= 49",
"Android >= 4.4",
"iOS >= 9",
"last 2 versions"
]
},
"useBuiltIns": "usage",
"corejs": 3.37
}
]
],
"plugins": ["@babel/plugin-transform-runtime"]
}
回复
1个回答
test
2024-06-19
看起来可能是因为使用了 async/await
不支持的问题。但是看到你有配置 @babel/preset-env
和 babel/plugin-transform-runtime
,所以应该是会被编译成兼容代码的。
可以考虑试试看不使用 async/await
用 Promise
方式测试看看,到底是 async/await
还是依赖 Promise
实现的 axios
引起的问题。
不过我看你也在对应的地方引入了 promise
的 polyfill
。尝试检查一下 polyfill
是在业务代码执行之前顺利加载并执行完成了?有疑问的部分就是 polyfill
的引入是从 core-js/features/
还是从 core-js/modules
引入的。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容