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

Sam*_*Sam 7 webpack babeljs yarn-workspaces

我有一个 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... */
Run Code Online (Sandbox Code Playgroud)

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

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

顶级package.json

{
  "name": "workspace-example",
  "version": "0.0.1",
  "workspaces": [
    "modules/build/*"
  ]
}
Run Code Online (Sandbox Code Playgroud)

模块级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"
    }
}
Run Code Online (Sandbox Code Playgroud)

这似乎正确地使其加载了 top-level 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\
Run Code Online (Sandbox Code Playgroud)

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

将顶层babel.config.json移至.babelrc构建系统模块并从 babel loader 规则中删除两个选项是可行的(由于某种原因,保留名称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
          }
        ]
      ]
    },
  }
}
Run Code Online (Sandbox Code Playgroud)