2025年-打造monorepo最佳实践 | chenglong的网络日志

type

status

date

slug

summary

构建monorepo最佳实践

TL; DR

基于 pnpm 的 monorepo ，并针对 vite 的构建进行了一些优化，这是基于我过往经验的 “最佳实践”

技术栈：pnpm rollup vite umi react typescript

一、从零开始构建 monorepo

1. 初始化项目文件夹

2. 创建 pnpm-workspace.yaml

写入以下内容，文件名为 pnpm-workspace.yaml

pnpm-workspace.yaml文件中的 packages 都会被作为 monorepo 的子模块

packages下用来存放包

apps下用来存放程序应用

3. 创建子文件夹

二、配置项目的格式化工具

1. prettier

prettier是什么？
一个代码格式化工具，可以格式化任何代码，使代码更加美观，更加易于阅读，更加易于维护

i. 安装

ii. 配置

iii. 在 CI/CD 中自动格式化

.lintstagedrc.json

2. Editorconfig

Editorconfig for VS Code 是什么？一个用于编辑器的配置文件，可以自动格式化代码，使代码更加美观，更加易于阅读，更加易于维护。

这是一个 VS Code 的插件，可以通过扩张商店安装

配置如下：

三、在 `packages` 中创建一些模块

1. icons

icons 这个包用作项目的图标，因为一些 icon 库并不能完全满足产品或设计上的需求使用 @svgr/cli 把 svg 转换成 tsx 文件，https://github.com/gregberge/svgr

svgr.config.js

2. ui

ui 这个包用作项目的基础组件，包括按钮，输入框，弹窗，等等；使用 rollup 进行打包，https://rollupjs.org/。目的是为了在 apps 里使用的时候平衡开发体验，入在 vite 中引用这个组件库，减少多余的请求

i. rollup.config.js

ii. package.json

3. pro-components

pro-components 这个包用作项目的业务组件，通常可能是基于多个 ui 组件的复合组件，以满足业务的需求这个不做打包处理，在开发中多次打包体验也不好

使用如下的配置，可以避免使用桶文件，同时也支持了快捷的引入，直接使用 import ReactLoga from '@monorepo/pro-components/react-loga'

package.json

4. shared

这里可以存放一些项目的公共函数或者配置，比如 hooks，tsconfig 等

四、在 apps 下的项目中引入

1. infra

使用 umi 快速构建一个用于展示基础组件的项目

i. 初始化

ii. 安装packages下的依赖

2. 一个业务项目

i. 使用 vite 创建一个项目