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

Question

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

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

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

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

标签： javascriptwebpackbabeljsbabel-loader

Answer 1

根据你项目的真实结构（它是一个带有根文件夹的 monorepo 设置？）和你正在使用的 webpack 配置，你可以有几种方法来解决这个问题，一种方法是include key在你的 babel loader 规则上添加webpack 配置文件，你最终会得到这样的东西：

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

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