umi + monorepo实践

为何需要monorepo？

项目背景

目前负责的企微端的应用有三个：

1. 策略分享：手机端、PC端使用
2. 单向视频审核：PC端使用
3. 资配报告：手机端使用

三个项目的相同点：

1. 后端接口域名相同
2. 企微的JS-SDK配置基本相同
3. 希望可以共用Jenkins部署脚本，减少部署脚本的工作量

不同点：

1. 界面样式不同，有的给PC用，单位是px；有的给手机端用，单位px转为rem；
2. 所属不同的小应用，项目的关联性不大。

解决方案

1.杂糅在一起，用路由区分

原本采用的方式是将三个项目分成三个目录，写在同一个umi项目中，好处是git仓库只有一个，打包部署方便，坏处是耦合性太高，后期横向扩展受限，不敢轻易公共方法。

2.将公共组件提取出来，项目独立开发

使用dumi开发公共组件库，三个项目独立开发，这样就有4个git仓库，后期随着应用的增加，git仓库随之增加，每个仓库都有node_modules，占用的硬盘也更大。

3.monorepo

将三个项目使用monorepo 的方式整合在一起，好处是只有一个git仓库，pnpm组织的依赖可以减少硬盘占用，项目间可以公用组件或者单独使用自己的组件，灵活度更高。坏处是git仓库权限管理不够细致，多人开发可以看到所有项目。

构建 Monorepo 项目

1.安装pnpm

在使用 monorepo 管理项目时，pnpm 是一个优秀的选择，它有更快的安装速度和更少的磁盘空间占用，能够更好地处理多个项目之间的依赖关系。全局安装 pnpm：

npm install pnpm -g

2.创建 monorepo 仓库：

mkdir qw-repo && cd qw-remp
pnpm init

3.在根目录下添加 pnpm-workspace.yaml 文件，告诉 pnpm 哪些目录是工作区，并在安装依赖时将它们链接到一起。

packages:
  - 'packages/**'

4.添加子项目：

mkdir packages && cd packages

# pkg-a
mkdir pkg-a && cd pkg-a
pnpm init

# pkg-b
mkdir ../pkg-b && cd ../pkg-b
pnpm init

5.安装依赖：

# 全局安装 -w: --workspace-root
pnpm add typescript -D -w

# 局部安装
pnpm add typescript -D --filter pkg-a

# 互相安装
pnpm add pkg-a -D --workspace --filter pkg-b

6.安装umi及其他依赖

pnpm add umi -w
pnpm add @types/react-dom -D -w
pnpm add @types/react -D -w
pnpm add typescript -D -w

7.初始化子项目

为了测试，暂时将官方默认的项目复制到子项目中：

复制.umirc.ts、pages、layouts等文件和目录；

修改package.json，添加scripts：

  "scripts": {
    "dev": "umi dev",
    "build": "umi build",
    "postinstall": "umi setup",
    "setup": "umi setup",
    "start": "npm run dev",
  },

执行pnpm run start即可单独跑子项目。

8.批量build

在父项目的package.json中添加：

  "scripts": {
    "build": "pnpm -r --filter=./packages/* run build"
  },

在根目录运行pnpm run build将执行 packages 目录下所有具有 build 命令的包。

9.引用外部公用函数

在根目录新建/utils/index.tsx：

export const testFunc = () => {
    alert('123')
}

子项目中引用：

import {testFunc} from "../../../utils";

    useEffect(() => {
        testFunc()
    }, [])

问题

1.无法识别从umi导入的组件

import {Link, Outlet} from "umi"; //编译器报错：无法解析符号 'Link', 'Outlet'

改为：

import {Outlet} from "@@/exports";