# pnpm+monorepo+antd5+umi4+antdPro6 多模块后台管理框架

**Repository Path**: muaiyuese/pnpm_monorepo_antd5_umi4_antdPro6

## Basic Information

- **Project Name**: pnpm+monorepo+antd5+umi4+antdPro6 多模块后台管理框架
- **Description**: pnpm+monorepo+antd5+umi4+antdPro6 多模块后台管理框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-01-28
- **Last Updated**: 2025-12-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 基于 umi4+antd5+pnpm+monorepo+pro-components2.7 构建的单仓库多项目框架。

### 项目启动方式

1、 根目录执行 pnpm install;

2、 启动 apps 下的子项目 pnpm -F ./apps/admin start;

### 常用方法

1、 添加全局 npm 插件在根目录执行 pnpm add 插件名称；

2、 在子项目单独添加 npm 插件，在根目录执行 pnpm -F 子项目路径(eg: ./apps/admin) add 插件名称；

3、 移除某子项目 npm 插件，在根目录执行 pnpm -F 子项目路径(eg: ./apps/admin) remove 插件名称；

更多详见 pnpm 相关教程资料

### 项目架构说明

1、 apps 文件放各个子项目，如 admin、web

2、 packages 文件放公共核心组件库、组件方法，如 components、common、modules、stroe 等等

3、 eslint 和 prettier、git 配置在全局根目录下，各个子项目和子核心方法库不需要每次都单独配置，使用根目录公共的，达到全站公用同一套规范的目的。

4、 注意每个子项目下的 tsconfig 的 paths 配置问题，由于 umi 使用的是 webpack 打包，别名使用的是 webpack 内置的 alias 解析，所以需要在 umi 项目应用添加 webpack 的 alias 配置，然后在引用的公共核心库 packages/xxx 下的 tsconfig 配置自己的 paths Typescript 映射，这样才能在公共核心库使用别名语法，如 import xxx from "@components/xxx",不然在启动 umi 子项目引入第三方包时会提示 @components/xxx 找不到。如下：

```js
    // 在子umi项目根目录下的config/config.ts添加
    alias: {
        // monorepo 组件库 -> packages/components
        '@components': resolve(__dirname, '../node_modules/@william/components/src'),
        // monorepo 核心库 -> packages/common
        '@common': resolve(__dirname, '../node_modules/@william/common/src'),
    },
```

```json
    // 在核心组件包 packages/components/tsconfig.json 添加
    "paths": {
      "@components/*": ["./src/*"]
    }
```

5、不知道为什么我使用命令添加项目间相互依赖失效，如 pnpm -F ./apps/admin add @william/components, 尽管我的 packages/components 下的 package.json 的 name 是@william/components，但是依然无效，所以我只能手动添加，进入./apps/admin/package.json,手动在 dependencies 添加"@william/components": "workspace:^", 然后回到根目录，重新执行 pnpm install，这样才会在 apps/admin/node_modules 文件下建立@william/components 这个软链接，然后项目里就可以在任意地方使用 import "@components/"。

6、由于后台项目框架大多是 antd pro 最新版本的 umi4 框架，所以我把所有子应用使用的包全部安装到全局的根目录的 package.json 下了，子项目不需要安装任何 package.json 包，除非是独特的，然后全局的根目录 package.json 配置了公共作用区间"workspaces": [ "apps/*", "packages/*" ],这样在 apps 下的所有子项目，以及在 packages 下的所有核心组件库都可以直接引用根目录的 package.json 所安装的 npm 插件依赖，减少每个子项目和子核心库的 package.json 反复引用相同的 npm 包。

7、如遇到什么问题，欢迎大家提出 issues 大家交流探讨哈；也可以添加我的微信互相学习，微信：muaiyuese。