webpack - 由于缺少依赖关系，带有 babel 的 Yarn 2 monorepo 无法构建，但它正在查看错误的 package.json

Question

我有一个 monorepo，使用 yarn 2.4、webpack 和 babel 以及顶层babel.config.json，具有以下文件夹结构（稍微简化）

|-- .yarn
|-- package.json (top-level)
|-- babel.config.json
|-- tsconfig.json
|-- /* other config files... /
|-- modules
|   |-- build
|   |   |-- build-system
|   |   |   |-- package.json (module-level)
|   |   |   |-- entry.js
|   |   |   |-- webpack.js
|   |   |   |-- /* source... */
|   |-- /* other module folders... */

我已将 ts/js 文件的 webpack 规则更改为以下内容：

{
  test: /\.(j|t)sx?$/,
  use: { 
    loader: "babel-loader",
    options: {
      babelrcRoots: ['../..'],
      rootMode: 'upward',
    },
  }
}

顶级 package.json

{
  "name": "workspace-example",
  "version": "0.0.1",
  "workspaces": [
    "modules/build/*"
  ]
}

模块级 package.json

{
    "name": "@workspace-example/build-system",
    "version": "0.0.1",
    "dependencies": {
        "@babel/core": "^7.14.5",
        "@babel/plugin-transform-runtime": "^7.14.5",
        "@babel/preset-env": "^7.14.5",
        "@babel/preset-react": "^7.14.5",
        "@babel/preset-typescript": "^7.14.5",
        "@babel/runtime-corejs3": "^7.14.5",
        "babel-loader": "^8.2.2",
        "html-loader": "^2.1.2",
        "pnp-webpack-plugin": "^1.6.4",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "typescript": "^4.3.2",
        "webpack": "^5.38.1",
        "webpack-cli": "^4.7.2",
        "webpack-dev-server": "^3.11.2"
    },
    "scripts": {
        "build": "webpack --config source/webpack/webpack.js"
    }
}

这似乎正确地使它加载了顶层babel.config.json，但是现在在运行构建时，它在顶层 package.json 中查找依赖项，当它们位于模块级 package.json 时，因此失败并显示以下内容错误：

Module build failed (from ../../../.yarn/$$virtual/babel-loader-virtual-7dc78877af/0/cache/babel-loader-npm-8.2.2-b4e600c2c5-362bb71573.zip/node_modules/babel-loader/lib/index.js):
Error: Your application tried to access @babel/plugin-transform-runtime, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: @babel/plugin-transform-runtime (via "@babel\plugin-transform-runtime")
Required by: C:\code\webpack-5-yarn\

这些依赖项是在模块级 package.json 中定义的，但是当我不认为它应该是顶级 package.json 时，它正在查看它。

将顶层移到babel.config.jsonbuild .babelrc-system 模块中并从 babel 加载器规则中删除这两个选项是可行的（出于某种原因，保留名称babel.config.json不起作用）。但我正在寻找一种可以使用单个顶级 babel.config.json 的解决方案。

我有与 webpack 4 和 yarn 1 相同的解决方案，没有问题。

编辑： 在模块目录中使用 .babelrc 后，我可以从模块级 package.json 中删除所有依赖项，而不会出现错误Error: Your application tried to access @babel/plugin-transform-runtime, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

不知道为什么当我认为它应该是同一个问题时我不会。

编辑 2： 我似乎通过完全删除 babel.config.json 文件并将配置直接添加到 webpack 文件中来部分工作，如下所示：

{
  test: /\.(j|t)sx?$/,
  exclude: /node_modules/,
  use: { 
    loader: "babel-loader",
    options: {
      root,
      presets: [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
      ],
      plugins: [
        [
          "@babel/plugin-transform-runtime",
          {
            regenerator: true,
            corejs: 3
          }
        ]
      ]
    },
  }
}

标签： webpackbabeljsyarn-workspaces