- 通过pnpm构建monorepo项目
- 通过rsbuild构建react项目
- 通过rslib构建依赖工程
- 统一配置支持@/别名
- 支持rstest单元测试
- 支持typescript
- 创建monorepo文件夹，然后通过
pnpm init创建packages.json
- 修改package.json的name
"name": "@xlorne/root",
之所以叫做@xlorne是因为我的npmjs仓库的账号叫做xlorne，为了可以正常上传中心仓库设置了工程名称为@xlorne。
- 指定node于pnpm工具及版本
- 在
package.json下添加如下内容
"packageManager": "[email protected]",
"engines": {
"node": "20.x"
},
- 创建
.npmrc限制node版本为package.json中指定的版本
engine-strict = true
- 创建
pnpm-workspace.yaml并对应创建packages/apps目录
packages:
- packages/*
- apps/*
- 创建utils的依赖仓库
cd packages
npm create rslib@latest执行过程如下:
◆ Create Rslib Project
│
◇ Project name or path
│ utils
│
◇ Select template
│ Node.js pure ESM package
│
◇ Select language
│ TypeScript
│
◇ Select development tools (Use <space> to select, <enter> to continue)
│ Rstest
│
◇ Select additional tools (Use <space> to select, <enter> to continue)
│ none
│
◇ Next steps ─────────────╮
│ │
│ 1. cd utils │
│ 2. git init (optional) │
│ 3. npm install │
│ 4. npm run dev │
│ │
├──────────────────────────╯
│
└ All set, happy coding!
- 创建ui的组件依赖仓库
cd packages
npm create rslib@latest执行过程如下:
◆ Create Rslib Project
│
◇ Project name or path
│ ui
│
◇ Select template
│ React
│
◇ Select language
│ TypeScript
│
◇ Select development tools (Use <space> to select, <enter> to continue)
│ Rstest
│
◇ Select additional tools (Use <space> to select, <enter> to continue)
│ none
│
◇ Next steps ─────────────╮
│ │
│ 1. cd ui │
│ 2. git init (optional) │
│ 3. npm install │
│ 4. npm run dev │
│ │
├──────────────────────────╯
│
└ All set, happy coding!
- 在ui下配置@别名
为了添加别名的，先在src下创建了components文件夹，然后将Button组件代码转移过去
- 修改
tsconfig.json
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
- 在
rslib.config.ts与rstest.config.ts下增加alias
resolve: {
alias: { '@': path.resolve(__dirname, 'src') },
},
这样组件就可以直接通过@/导入 export { Button } from '@/components/Button';
- 为了支持tests下的@支持，需要在
tests/tsconfig.json下增加如下配置
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["../src/*"]
},
}
- 修改ui于utils的
package.json的name
"name": "@xlorne/ui",
"name": "@xlorne/utils",
- 创建demo的实例库
cd apps
npm create rsbuild@latest
执行过程如下:
◆ Create Rsbuild Project
│
◇ Project name or path
│ demo
│
◇ Select framework
│ React 19
│
◇ Select language
│ TypeScript
│
◇ Select additional tools (Use <space> to select, <enter> to continue)
│ none
│
◇ Next steps ─────────────╮
│ │
│ 1. cd demo │
│ 2. git init (optional) │
│ 3. npm install │
│ 4. npm run dev │
│ │
├──────────────────────────╯
│
└ All set, happy coding!
- 修改demo的
package.jsonname
"name": "@xlorne/demo",
- 在demo中依赖ui和utils组件
pnpm add @xlorne/ui @xlorne/utils -F @xlorne/demo --workspace
- 调整
package.json
- 将所有共同依赖的版本归集到了root下
- 在root下增加scripts脚本
- 在ui于utils的
package.json下增加标识信息，增加push指令
"description": "A UI Framework built with React and Typescript",
"keywords": [
"ui",
"framework",
"react",
"typescript"
],
"homepage": "https://github.com/xlorne/monorepo",
"bugs": {
"url": "https://github.com/xlorne/monorepo/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/xlorne/monorepo.git"
},
"license": "Apache-2.0",
- 发布ui组件到中心仓库
pnpm run -F @xlorne/ui push
pnpm run -F @xlorne/utils push- 运行demo测试
pnpm install
pnpm run build
pnpm run dev上述方式，代码将会自动打包成dist然后静态依赖到demo中，不支持在依赖库修改后直接预览展示的能力。
如果需要开启依赖度修改及时响应界面的需要运行依赖库的dev模式（watch模式），然后在启动demo
pnpm install
# 在一个命令窗口下执行
pnpm run dev:ui
# 在一个命令窗口下执行
pnpm run dev:utils
# 在一个命令窗口下执行
pnpm run dev上述过程相当于运行了3个服务，2个依赖库的检测更新服务，1个app服务。