在MonoRepo失败中编译React项目

Question

我正在尝试用我的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组合中配置了这个卷，它映射了整个monorepo目录：

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

在我的项目-A中，我导入了@libs/公用和@services/公共。当公共库导出以下简单函数时，这很好：

export const Add = (a,b) => a+b

Webpack没有问题解决这个和建设项目-A。

但是，当我尝试从一个公共库导入组件时，如下所示：

/libs/tools/common: 

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

我在构建过程中出现了一个错误：

 Error: Cannot find module '/monorepo/libs/tools/common/webpack.base.config.js'
Require stack:
- /monorepo/node_modules/eslint-import-resolver-webpack/index.js
- /monorepo/node_modules/eslint-module-utils/resolve.js
- /monorepo/node_modules/eslint-plugin-import/lib/rules/no-unresolved.js
- /monorepo/node_modules/eslint-plugin-import/lib/index.js

项目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配置的主要问题。因此，工作区不知道如何编译共享资源？
• 我的工作区中应该只有一个webpack构建配置，用于工作区内的所有项目吗？目前，我只有一个配置项目-A？
• 如果我有具体的webpack需要每个项目，1配置(如果这是答案)有意义吗？

Answer 1

1) First，您的代码中有一行是指babelrc和eslint中的webpack.base.config.js，

因此，如果该文件不存在，则说明未找到模块的错误是有意义的。

2) 第二：如果您在相同的情况和环境中构建和使用您的存储库，是的，您可以为这两个配置配置一个配置，但是您可能需要环境设置(Development, Production)来进行配置。但是，如果你真的想让你的依赖和信任分开，webpack支持你的项目的多项，你可以检查它。