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

Question

这是的跟进。

我有一些第 3 方代码（反应组件），我将其捆绑为 ES 模块（使用 pkg.module 入口点）。这很好用（你得到模块连接和 tree shaking），但是包含的代码没有用 babel 转译，因为在大多数配置示例之后，我在我的 webpack 配置的 babel-loader 部分排除了 node_modules ，如下所示：

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

所以，当我运行 webpack 时，我得到了意想不到的令牌错误。根据链接的答案，我从使用 exclude 切换到 include 以选择性地从 node_modules 引入一些包，如下所示：

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

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

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

Answer 1

我觉得这个解决方案没问题。如果包含开始变得复杂，您可以将其替换为函数并使用逻辑在那里进行过滤。

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

How to optionally process code in node_modules with babel-loader in webpack?

javascript

webpack

babeljs

babel-loader