将多独立仓库合并为NX Monorepo的问题求助

一、先解决当前Webpack配置错误 #

你复制原Client的webpack.config.js到NX生成的项目目录后，出现加载失败的原因是：NX集成式项目默认使用内置的Webpack配置，不需要单独放置自定义配置文件。

• 直接删除该webpack.config.js，重新运行nx build my-app即可。
• 如果原Client有必须保留的自定义Webpack配置，需通过NX的扩展方式实现：在项目的project.json中，给build目标的options添加webpackConfig字段，指向你的自定义配置文件，示例：

  {
    "targets": {
      "build": {
        "executor": "@nx/webpack:webpack",
        "options": {
          "webpackConfig": "packages/client/custom-webpack.config.js"
          // 其他配置...
        }
      }
    }
  }
  

二、重新规划迁移步骤（适配独立node_modules需求） #

推荐使用NX的package-based monorepo模式，这种模式下每个项目拥有独立的package.json和node_modules，天然解决版本冲突问题：

1. 重新创建NX工作区 #

npx create-nx-workspace@latest org --preset=packages

该命令会生成以packages为项目根目录的结构，每个子项目独立管理依赖。

2. 迁移Client（React17+TS） #

• 在packages下创建client文件夹，复制原Client仓库所有文件（排除node_modules、.git）。
• 保留原Client的package.json，确保React版本锁定为17.x，其他依赖版本匹配。
• 在packages/client目录下运行npm install，生成独立的node_modules。
• 创建packages/client/project.json配置NX的构建/启动目标：

  {
    "name": "client",
    "$schema": "../../node_modules/nx/schemas/project-schema.json",
    "sourceRoot": "packages/client/src",
    "projectType": "application",
    "targets": {
      "build": {
        "executor": "@nx/webpack:webpack",
        "options": {
          "outputPath": "dist/packages/client",
          "index": "packages/client/public/index.html",
          "main": "packages/client/src/index.tsx",
          "tsConfig": "packages/client/tsconfig.json",
          "assets": ["packages/client/public/assets"],
          "styles": ["packages/client/src/index.css"],
          "webpackConfig": "@nx/react/plugins/webpack"
        },
        "configurations": {
          "production": {
            "optimization": true,
            "outputHashing": "all"
          }
        }
      },
      "serve": {
        "executor": "@nx/webpack:dev-server",
        "options": {
          "buildTarget": "client:build",
          "hmr": true
        }
      }
    }
  }
  

3. 迁移Server（Express+TS） #

• 在packages下创建server文件夹，复制原Server仓库文件（排除node_modules、.git）。
• 保留原Server的package.json，确保Express、TypeScript版本正确。
• 在packages/server目录下运行npm install。
• 创建packages/server/project.json配置NX目标：

  {
    "name": "server",
    "$schema": "../../node_modules/nx/schemas/project-schema.json",
    "sourceRoot": "packages/server/src",
    "projectType": "application",
    "targets": {
      "build": {
        "executor": "@nx/js:tsc",
        "options": {
          "outputPath": "dist/packages/server",
          "main": "packages/server/src/index.ts",
          "tsConfig": "packages/server/tsconfig.json"
        }
      },
      "serve": {
        "executor": "@nx/js:node",
        "options": {
          "buildTarget": "server:build"
        }
      }
    }
  }
  

4. 迁移Storybook（React18+TS） #

• 在packages下创建storybook文件夹，复制原Storybook仓库文件（包括组件、.storybook配置）。
• 保留原Storybook的package.json，确保React版本锁定为18.x，Storybook相关依赖版本匹配。
• 安装NX Storybook插件：

  npm install -D @nx/storybook @storybook/react
  

• 创建packages/storybook/project.json配置NX目标：

  {
    "name": "storybook",
    "$schema": "../../node_modules/nx/schemas/project-schema.json",
    "sourceRoot": "packages/storybook/src",
    "projectType": "application",
    "targets": {
      "storybook": {
        "executor": "@nx/storybook:storybook",
        "options": {
          "uiFramework": "@storybook/react",
          "port": 6006,
          "configDir": "packages/storybook/.storybook"
        }
      },
      "build-storybook": {
        "executor": "@nx/storybook:build",
        "options": {
          "uiFramework": "@storybook/react",
          "outputDir": "dist/packages/storybook",
          "configDir": "packages/storybook/.storybook"
        }
      }
    }
  }
  

• 在packages/storybook目录下运行npm install，生成独立node_modules。

三、提取Server的utils为独立包 #

1. 使用NX命令生成可复用的TS库：

   nx g @nx/js:library server-utils --directory=packages --publishable --importPath=@org/server-utils
   

2. 将原Server的utils文件夹内容复制到packages/server-utils/src目录。
3. 调整packages/server-utils/package.json的导出配置，确保模块能被正确导入。
4. 在Server的package.json中添加本地依赖：

   "dependencies": {
     "@org/server-utils": "workspace:*"
   }
   

5. 修改Server中的导入路径，比如从./utils/xxx改为@org/server-utils/xxx。
6. 在packages/server目录下运行npm install，让NX识别本地包依赖。

四、确保依赖隔离的关键配置 #

• 所有项目的依赖都放在各自的package.json中，不要在根目录package.json添加项目专属依赖。
• 若使用pnpm，在根目录.npmrc中添加：

  shamefully-hoist=false
  

  防止依赖被强制提升到根目录，保持每个项目的node_modules完全独立。
• 每个项目单独运行npm install，不要在根目录统一执行安装命令。

内容的提问来源于stack exchange，提问作者Avi Weiss