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

Question

假设我有以下项目结构（比下面的结构更复杂）：

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

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

据我目前所了解，他们改变了 .babelrc 查找发生的方式。我真的无法理解“root”、“babelrcRoots”等术语。 有人可以解释我需要做什么才能从各自的工作目录成功编译 ModuleA 和 ModuleB 吗？

Answer 1

根据你的项目的真实结构（它是一个带有根文件夹的 monorepo 设置？）和你正在使用的 webpack 配置，你可以有几种方法来解决这个问题，一种方法是添加include key关于 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']
        }
      }
    }
  ]
}

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