Babel未在通过Webpack加载器从`node_modules`导入的文件上运行

Question

我无法让Webpack在babel中的文件上运行node_modules。特别是，我尝试使用自定义Webpack加载程序转换.svg文件（来自FontAwesome或其他.svg源），然后将其传递给Babel进行JSX转换。

在我尝试过的许多不同配置中，问题通常表现为以下一种情况：

1。 Unexpected token

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
<svg ...></svg>

这表示自定义加载程序和babel均未应用，即该文件只是在没有任何加载程序的情况下通过。

2。 Syntax Error

SyntaxError: /Users/bmh/Repos/bug-reports/node_modules/icon/ad.svg: 
  Unexpected token (2:20)
1 |
2 |     const element = <div>hey</div>;

这表明自定义加载程序正在运行（出于测试目的，它已硬编码到<div>hey</div>），但未调用后续的babel-loader。

当.svg不在node_modules中时，不会发生此问题 ，这意味着自定义加载程序和babel-loader都是按预期工作。无论是webpack还是babel都决定不对node_modules中的文件应用babel转换，并且尚不清楚如何解决此问题。

我发现似乎有分量的一个建议是为Webpack include提供exclude和module.rules参数，但是我尝试的各种排列似乎都行不通。

复制

存储库：https://github.com/brianmhunt/bug-reports/tree/jsx-svg-import

$ git clone git@github.com:brianmhunt/bug-reports.git`
$ git checkout jsx-svg-import
$ make

Answer 1

为detailed in bug #736 of babel-loader：

  

...以相同的配置将.babelrc转换为babel.config.js，babel-loader [按预期工作]。

解释是：

  

    

...，因为.babelrc不会跨不同的程序包（由package.json分隔）“泄漏”