使用 webpack 4 和 Babel 转译为 ES5

Question

I'm still using webpack 4.28.4 for organizational reasons. We are trying to transpile some of our code to support ES5 using Babel 7, but our resulting bundle is throwing console errors when loaded in a browser (Chromium v44). We have seen some of the newer options available in webpack 5, which some of my colleagues have been able to use to resolve similar failures:

• output.environment.arrowFunction = false
• target = 'es5'

Is there some sort of equivalent approach for webpack 4? Do we just need to find the right combination of Babel plugins to fully convert to ES5?

The console error we get in Chromium 44 is always an "Uncaught SyntaxError: Unexpected token )" in some low level Dojo JavaScript file which we know is unchanged and should be a valid function.

Here's a cleaned up version of our webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const BabelLoaderPlugin = require('babel-loader');
const BabelPreset = require('@babel/preset-env');

const makeConfig = ({
      component_path,
      js_module,
      entryPoints = {"index": js_module + "/entryPoint",
                     "index-css": js_module + "/css/main"},
      outputPublicPath = 'release/',
      outputPath = path.resolve(component_path, 'release'),
      dev_mode = 'production',
      babel_chrome_level = "44",
    } = {}) => {
    return {
        entry: entryPoints,
        output: {
            path: outputPath,
            publicPath: outputPublicPath,
            pathinfo: true,
            filename: "bundle.[name].js"
        },
        module: {
            rules: [
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components|dojo)/,
                    use: {
                        loader: 'babel-loader',
                        query: {
                            babelrc: false,
                            presets: [
                                [BabelPreset,
                                {
                                    "exclude": ["transform-regenerator"],
                                    "targets": {
                                        "chrome": babel_chrome_level
                                    }
                                }]
                            ],
                            plugins: [
                                require("@babel/plugin-transform-async-to-generator"),
                                require("@babel/plugin-transform-arrow-functions"),
                                require("@babel/plugin-transform-modules-commonjs")
                            ]
                        }
                    }
                },
            ]
        },
        plugins: [
            ...
        ],
    };
}
module.exports = { makeConfig };

Answer 1

Did you try to hardcoded it to 44 instead of using babel_chrome_level ?

In Chrome devtools, you might be able to get it to pretty-print the minified Dojo sources to better identify exactly which feature it's tripping over

The better fix for this is to find whatever numbskull in your organization has you stuck on a FIVE YEAR OLD version of a browser and smack them until they stop

Also it looks like you're explicitly excluding dojo from your Babel transform

I don't know much about Dojo -- I guess they made a totally new "modern" version at some point? -- but maybe you can pin to an older version of it that officially supports your version of Chrome?