在 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 设置，我刚刚在我的 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</>

我在构建过程中遇到错误：

 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

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"
        }
      }
    }
  }

Project-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 配置。因此工作区不知道如何编译我的共享资源？

• 我的工作空间中是否应该只有 1 个 webpack 构建配置供工作空间内的所有项目使用？目前我在 Project-A 下只有 1 个配置？

• 如果我每个项目都有特定的 webpack 需求会发生什么，1 个配置（如果这是答案）有意义吗？

Answer 1

1) 首先，您的代码中有一行在babelrc 和eslint 中都引用了webpack.base.config.js，

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

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