为什么我的 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.js

module.exports = {

    entry:  {

        bundle: './index.js',

    },

    module: {

        rules: [

            {

                test: /\.m?js$/,

                use:  'babel-loader',

            },

        ],

    },

};

索引.js

import {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。