babel 7会忽略当前目录之外的文件

Question

说我有以下项目结构（它比下面的结构复杂）：

• 通用组件
  • CommonComponentA
  • CommonComponentB
  • package.json
  • webpack.config.js
  • .babelrc
• 模块A
  • ComponentC //导入CommonComponentA
  • ComponentD
  • package.json
  • webpack.config.js
  • .babelrc
• 模块B
  • ComponentE //导入CommonComponentB
  • ComponentF
  • package.json
  • webpack.config.js
  • .babelrc

我分别编译，捆绑和使用ModuleA和ModuleB。当我切换到babel 7时，从CommonComponents目录的导入模块停止工作。 Babel会忽略当前工作目录之外的文件，并且不会转译它们，因此webpack编译无法在导入的组件上抱怨“意外令牌”。

根据我到目前为止的了解，它们已经更改了.babelrc查找发生的方式。我实在无法绕过“ root”，“ babelrcRoots”等术语。 有人可以解释一下从各自的工作目录成功编译ModuleA和ModuleB所需执行的操作吗？

Answer 1

根据项目的实际结构（这是具有根文件夹的monorepo设置吗？）和您使用的webpack配置，您可以通过多种方式解决此问题，一种方法是添加{{3 }}在Webpack配置文件上的babel loader规则上，您将得到如下所示的结果：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      include: path.resolve(__dirname, '../CommonComponents'),
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

如前所述，这取决于您的实际项目结构，但是您可以尝试一下并检查其是否有效。