如何正确配置 Babel、Webpack 和 Corejs 以确保浏览器兼容性

如何解决如何正确配置 Babel、Webpack 和 Corejs 以确保浏览器兼容性

背景

我正在拼命地尝试配置 Babel 来编译我的应用程序，使其基于我定义的浏览器目标列表向后兼容。

这是我当前的配置：

babel.config.json

{
    "presets": [
        [
            "@babel/preset-env",{
                "corejs": 3,"useBuiltIns": "usage","targets": {
                    "browsers": [
                        "> 1%","last 2 versions","ie >= 8"
                    ]
                }
            }
        ]
    ],"plugins": [
        "@babel/plugin-Syntax-dynamic-import",[
            "@babel/plugin-transform-runtime",{
                "regenerator": true
            }
        ]
    ]
}

在 Webpack 配置中：

{
    test: /\.js$/,exclude: /node_modules/,use: {
        loader: 'babel-loader'
    }
}

我尝试了很多东西，但我尝试的每件事都会导致某些浏览器错误...

错误 - 以及我尝试过的...

将 modules 设置为 false 时，出现以下错误：

• Chrome：Cannot assign to read only property 'exports' of object '#<Object>'
• IE 11：Assignment to read-only properties is not allowed in strict mode

将 modules 设置为 commonjs 时，出现以下错误：

• IE8：Expected Identifier（很多）

为了解决上述问题，我从 Webpack 规则中删除了 exclude，但这导致了编译错误：

TypeError: $ is not a function

我的问题

很简单，我做错了什么？ Babel 的力量有限制吗？我应该只使用 commonjs 并接受它在 IE8 中不起作用吗？

我对使用 commonjs 犹豫不决，因为我宁愿我的 ECMAScript 没有全部转换为 Commonjs，但如果没有其他解决方案，我会接受这一点。

注意：这样做的目的是向那些使用古老浏览器的人展示一个相当大的错误，因此，我需要它与 IE8/9 等浏览器兼容