javascript - How to Configure Babel, Webpack, and Corejs Properly to ensure browser compatability

Question

Background

I am desperately trying to configure Babel to compile my application to make it backwards compatible based on the target list of browsers I define.

Here is my current configuration:

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

In Webpack configuration:

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

I have tried numerous things but everything I try results in certain browser errors...

The Error(s) - and what I have tried...

With modules set to false, I get the following errors:

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

With modules set to commonjs, I get the following errors:

• IE8: Expected Identifier (a lot of them)

To attempt to fix the above, I then removed the exclude from the Webpack rule, but this resulted in a compilation error:

TypeError: $ is not a function

My Question

Quite simply, what am I doing wrong? Are there limitations to Babel's power? Should I just use commonjs and accept that it doesn't work in IE8?

I am hesitant to use commonjs as I would rather my ECMAScript is not all converted to CommonJS, but I will accept this if there is no other solution.

NOTE: The purpose of this is to show a pretty error to those on ancient browsers, and as such, I need it to be compatible with browsers such as IE8/9

question from:https://stackoverflow.com/questions/65625715/how-to-configure-babel-webpack-and-corejs-properly-to-ensure-browser-compatabi

Answer 1

Waitting for answers