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

Question

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"]
}

Answer 1

看起来可能是因为使用了 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 引入的。