如何在 webpack 中使用 babel-loader 选择性地处理 node_modules 中的代码？

Question

这是这个答案的后续。

我有一些 3rd 方代码（react 组件），我将它们捆绑为 ES 模块（使用pkg.module入口点）。这很好用（你得到模块连接和树摇动），但包含的代码没有用 babel 转译，因为按照大多数配置示例，我node_modules在 webpack 配置的 babel-loader 部分排除了这样的：

{
    ...
    module: {
        rules: [
            {
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    ...
                }
            }
        ]
    },
    ...
}

所以，当我运行 webpack 时，我收到了意外的令牌错误。根据链接的答案，我从使用 an 切换exclude到 aninclude以选择性地引入一些这样的包node_modules：

{
    ...
    module: {
        rules: [
            {
                include: [/node_modules\/@my-scope/, /src/],
                use: {
                    loader: 'babel-loader',
                    ...
                }
            }
        ]
    },
    ...
}

这似乎对我有用（当我运行 webpack 时不再出现意外的令牌错误），但我不能 100% 确定它正在做我认为的事情。

这个解决方案看起来正确吗？有没有更好的办法？

Answer 1

该解决方案对我来说看起来不错。如果包含开始变得复杂，您可以将其替换为函数并使用逻辑进行过滤。