Javascript 在MonoRepo中编译React项目失败

我正在尝试使用docker实例设置纱线工作区。这是我的目录结构：

/monorepo/
  /node_modules/
        @libs/common
        @services/common
        @services/project-A
        ...OTHER DEPS...
  package.json
  /services/
      /common/
         index.jsx
         package.json
      /project-A/  
           webpack.base.config.js
           **REACT project with babel, webpack, etc**

  /libs/
     /tools/
         /common/
            index.jsx
            package.json

为了简化docker设置，我刚刚在docker compose中配置了这个卷，它映射了整个monorepo目录：

volumes:
      - '../../../monorepo:/monorepo'

从我的Project-A中，我导入@libs/common和@services/common。当公共库导出以下简单函数时，此操作非常有效：

export const Add=（a，b）=>a+b

Webpack在解决此问题和构建Project-A时没有问题

但是，当我尝试从以下公共库之一导入组件时：

/libs/tools/common: 

      import React from 'react' 
      export MySharedComponent = () => <>HELLLO</>

Project-A下的eslint文件：

{
    "parser": "babel-eslint",
    "env": {
      "browser": true,
      "node": true,
      "jest": true,
      "cypress/globals": true
    },
    "settings": {
      "import/resolver": {
        "webpack": {
          "config": "webpack.base.config.js"
        }
      }
    }
  }

A项目下的babel.rc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-flow"
  ],
  "env": {
    "test": {
      "plugins": [
        [
          "babel-plugin-webpack-alias",
          {
            "config": "./webpack.base.config.js"
          }
        ]
      ]
    }
  }
}

我的问题:

• 主要问题是公共存储库中没有设置网页包配置。因此，工作区不知道如何编译我的共享资源

• 我的工作区中是否应该只有一个webpack build config供工作区中的所有项目使用？目前我在Project-A下只有1个配置

• 如果每个项目都有特定的网页需求，那么1个配置（如果这是答案）有意义吗

1）首先，在您的代码中有一行代码，您在

babelrc

和

eslint

中都引用了

webpack.base.config.js

所以，如果该文件不存在，则表示找不到模块的错误是有意义的
2） Second：如果您在相同的情况和环境下构建和使用存储库，是的，您可以为这两种情况都使用一个配置，但您可能需要为配置设置环境（

开发、生产

）。

---

但是如果你真的想把你的依赖项和配置分开，你可以检查一下你的项目的webpack支持。
所以webpack.base.config确实存在，但它在

project-A

中，但是我正试图捆绑依赖

@libs/common

的'project-A'，我得到一个错误，说

webpack.base.config.js

不在

@libs/common

下。但是，webpack不应该只使用Project-A中的配置吗？我不认为多个条目是解决这个问题的方法。或者，如果您能给出一个关于条目的示例，可以帮助我理解您的意思。@Batman每次webpack想要加载您尝试导入的文件或模块时，它根据文件所在的目录将该文件传递给某种中间件。因此，您的相对传递也可能是错误的（“webpack.base.config.js”）。当然，多个条目并不能解决您的问题。我想你不需要多个配置文件，但如果你想要的话，这是一种情况。当你说我的相对通行证时，我相信你指的是我的

babelrc

文件，我有

“/webpack.base.config.js”

？因此，它不是在

project-a

下查找网页配置，而是相对于

libs/tools/common

查找它？这就是你的意思吗？@Batman假设你有两个不同的应用程序，它们有不同的文件和文件夹，它们也有一个共享库，你创建了两个网页条目，你将共享模块放在共享文件夹中，两个条目都使用该共享库。你可以搜索细节。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-flow"
  ],
  "env": {
    "test": {
      "plugins": [
        [
          "babel-plugin-webpack-alias",
          {
            "config": "./webpack.base.config.js"
          }
        ]
      ]
    }
  }
}