使用lerna搭建monorep

为什么我们需要monorep

由于项目越来越多，前端项目越来越零散，管理起来越来越难，便于统一管理前端项目，打通项目之间的壁垒，组件更通用化，达到高内聚低耦合的目的；

前置准备

• lerna
• yarn

开发过程

初始化项目

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  // 使用工作空间
}

源码

github