为什么我们需要monorep
由于项目越来越多,前端项目越来越零散,管理起来越来越难,便于统一管理前端项目,打通项目之间的壁垒,组件更通用化,达到高内聚低耦合的目的;
前置准备
开发过程
初始化项目
npm install --global lerna
git init monorep && cd monorep
lerna init
初始化之后的项目结构
monorep/
packages/
package.json
lerna.json
为了更符合实际场景,需要对组件库,utils,config,tools,docs等进行拆分,拆分后的目录结构如下
monorepo
├── CHANGELOG.md
├── PLANS.md
├── README.md
├── components
├── config
├── docs
├── tools
├── utils
├── web
├── package.json
├── lerna.json
配置yarn workspace处理子项目依赖问题
// monorep/package.json
{
...
"workspaces": {
"packages": [
"components",
"tools/*",
"utils/*",
"web/*",
"docs/*"
]
}
}
lerna配置
// monorep/lerna.json
{
"packages": [ // 执行lerna命令会生效的packages
"components",
"utils/*",
"tools/*",
"web/*",
"web_demo/*",
"docs/*"
],
"command": {
"publish": { // 部署配置
"ignoreChanges": [
"ignored-file",
"*.md",
"web/*",
"web_demo/*",
"docs/*"
],
"message": "chore(release): publish",
"registry": "https://registry.npmjs.org"
},
"bootstrap": { // 执行引导流程配置(安装所有 依赖项并链接任何交叉依赖)
"ignore": [],
"npmClientArgs": [
"--no-package-lock",
"--hoist"
]
},
"version": { // 修改版本号配置
"allowBranch": [
"main"
],
"conventionalCommits": true
}
},
"version": "0.0.11",
"npmClient": "yarn",
"useWorkspaces": true // 使用工作空间
}