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

【问题标题】：How to optionally process code in node_modules with babel-loader in webpack?如何在 webpack 中使用 babel-loader 选择性地处理 node_modules 中的代码？
【发布时间】：2019-03-31 15:33:51
【问题描述】：

这是this answer 的后续报道。

我有一些第 3 方代码（反应组件），我捆绑为 ES 模块（使用 pkg.module 入口点）。这很好用（你得到模块连接和摇树），但是包含的代码没有用 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% 确定它正在做我认为的事情。

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

【问题讨论】：

这个解决方案对我来说看起来不错。如果包含开始变得复杂，您可以将其替换为函数并使用逻辑对其进行过滤。
谢谢@JuhoVepsäläinen，我很感激。请随时发表您的评论作为答案，以便我接受。
现在完成。谢谢。 :)

标签： javascript webpack babeljs babel-loader

【解决方案1】：

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

【讨论】：