monorepo 项目说明
1、创建项目结构
- apps/
各项目
- packages/
共用组件
- package.json // 配置文件
- pnpm-workspace.yaml // npm Monorepo 配置文件，告诉pnpm 这个仓库是一个workspace工作区
- package.json 文件
"workspaces": [
"packages/*",
"apps/*"
]
- pnpm-workspace.yaml 文件
packages:
"packages/**" // 表示包含packages 下的所有子包
2、创建公共组件
- 已shared-ui 为例，将项目vite项目改造成npm 插件形式
- package.json
"exports": { ".": "./src/main.js" // 定义包的导出入口 }, "files": ["src"] // 指定当包发布到npm时，需要包含的目录列表- main.js 入口文件，导出组件
export { default as 组件名称 } from "组件路径";
3、在子应用中使用公共组件
- 所在子应用中引入组件, @workspace:* 告诉pnpm 从workspace里找（pnpm-workspace.yaml）
pnpm add shared-ui@workspace:*
- 所需子应用中，导入并使用组件
import { 公共组件名 } from "npm包名";
4、monorepo -- 热更新联动
- 在保持子应用运行中 -> 修改公共组件 -> 子应用中立即生效
