如何使用webpack中的babel加载器选择性地处理node_modules中的代码



这是这个答案的后续。

我有一些第三方代码(react组件(,我将其捆绑为ES模块(使用pkg.module入口点(。这很好(你可以得到模块连接和树抖动(,但包含的代码没有用babel进行转换,因为在大多数配置示例之后,我在我的webpack配置的babel加载器部分排除了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%确定它正在做我认为的事情。

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

这个解决方案对我来说还可以。如果include开始变得复杂,你可以用一个函数替换它,并使用逻辑在那里进行过滤。

最新更新