为什么我的 Mutex 类没有被 Webpack 转译？

Question

我在从 Webpack 4 升级到 Webpack 5 时遇到问题，其中 Babel 似乎不再从我的依赖项之一（async-mutex）转译代码。我设法将其精简为演示问题的最小设置：包.json{    "scripts": {        "build": "webpack --mode=production"    },    "devDependencies": {        "@babel/core": "~7.12.0",        "@babel/preset-env": "~7.12.0",        "async-mutex": "~0.2.0",        "babel-loader": "~8.2.0",        "webpack": "~5.10.0",        "webpack-cli": "~4.2.0"    },    "babel": {        "presets": [            "@babel/preset-env"        ]    },    "browserslist": [        "Explorer >= 11"    ]}webpack.config.jsmodule.exports = {    entry:  {        bundle: './index.js',    },    module: {        rules: [            {                test: /\.m?js$/,                use:  'babel-loader',            },        ],    },};索引.jsimport {Mutex} from 'async-mutex';console.log(Mutex);class MyClass {}console.log(MyClass);根据我的 browserslist，我需要支持 IE 11。构建并检查结果后，dist/bundle.js我可以看到该类MyClass已转换为函数，但该类Mutex未转换，这显然会导致 IE 11 因语法错误而失败。就好像 Babel 使用不同的设置来处理async-mutex包而不是处理我的index.js.我发现另一个问题的答案建议添加target: ['web', 'es5']，但这没有帮助，而且似乎也没有必要，因为 Webpack 应该尊重 browserslist。使用 Webpack 4 我没有遇到这个问题，但我不确定问题是否出在我的设置、Webpack、Babel 甚至 async-mutex 上。注意：我知道这个最小的设置缺少 Promise polyfill，但我在这里省略它，因为它似乎与问题无关。

Answer 1

Babel 配置package.json仅适用于您的特定包，而不适用于node_modules，因此即使 Babel 设置为处理包中的所有文件，它也仅配置为对您自己的包的文件执行转换。

您需要创建一个babel.config.json，或者您需要将配置直接放入 Webpack 配置中，所以要么

babel.config.json:

{

    "presets": [

        "@babel/preset-env"

    ]

}

或者 webpack.config.js：

module.exports = {

    entry:  {

        bundle: './index.js',

    },

    module: {

        rules: [

            {

                test: /\.m?js$/,

                use:  'babel-loader',

                options: {

                    "presets": [

                        "@babel/preset-env"

                    ]

                }

            },

        ],

    },

};

Answer 2

您需要将 babel 的规则包含async-mutex在您的webpack.config.js模块中。有时您会遇到一个未转换其 ES6 的软件包。有趣的是，将其包含在转译中的最佳方法是使用exclude，如下所示：

module.exports = {

    entry:  {

        bundle: './index.js',

    },

    module: {

        rules: [

            {

                test: /\.m?js$/,

                exclude: /node_modules\/(?!(async-mutex)\/).*/,

                use:  'babel-loader',

            },

        ],

    },

};

此排除规则表示“排除除”node_modules之外的所有内容async-mutex。