H5 webapck 打包后,在低版本浏览器,页面无法显示?

作者站长头像
站长
· 阅读数 4

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个回答
avatar
test
2024-06-19

看起来可能是因为使用了 async/await 不支持的问题。但是看到你有配置 @babel/preset-envbabel/plugin-transform-runtime,所以应该是会被编译成兼容代码的。

可以考虑试试看不使用 async/awaitPromise 方式测试看看,到底是 async/await 还是依赖 Promise 实现的 axios 引起的问题。

不过我看你也在对应的地方引入了 promisepolyfill。尝试检查一下 polyfill 是在业务代码执行之前顺利加载并执行完成了?有疑问的部分就是 polyfill 的引入是从 core-js/features/ 还是从 core-js/modules 引入的。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容