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 编译失败并在导入的组件中提示“意外 token ”。

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

Answer 1

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

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

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