babel 7會忽略當前目錄之外的文件

Question

說我有以下項目結構（比下面的結構復雜）：

• 通用組件
  • 通用組件A
  • 通用組件B
  • 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配置，您可以通過多種方法解決此問題，一種方法是在babel loader上添加include key對webpack配置文件的規則，您將得到如下所示的結果：

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

如前所述，這取決於您的實際項目結構，但是您可以嘗試一下並檢查其是否有效。