为何需要monorepo？
项目背景
目前负责的企微端的应用有三个：
- 策略分享：手机端、PC端使用
- 单向视频审核：PC端使用
- 资配报告：手机端使用
三个项目的相同点：
- 后端接口域名相同
- 企微的JS-SDK配置基本相同
- 希望可以共用Jenkins部署脚本，减少部署脚本的工作量
不同点：
- 界面样式不同，有的给PC用，单位是px；有的给手机端用，单位px转为rem；
- 所属不同的小应用，项目的关联性不大。
解决方案
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')
}
子项目中引用：文章来源：https://www.toymoban.com/news/detail-782868.html
import {testFunc} from "../../../utils";
useEffect(() => {
testFunc()
}, [])
问题
1.无法识别从umi导入的组件
import {Link, Outlet} from "umi"; //编译器报错：无法解析符号 'Link', 'Outlet'
改为：文章来源地址https://www.toymoban.com/news/detail-782868.html
import {Outlet} from "@@/exports";
到了这里，关于umi + monorepo实践的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
