使用lerna搭建monorep

一号小白

已于 2022-08-01 18:29:22 修改

阅读量486

点赞数

CC 4.0 BY-SA版权

分类专栏：架构设计文章标签：前端 json javascript

于 2022-08-01 15:34:04 首次发布

本文链接：https://blog.youkuaiyun.com/github_39506988/article/details/126094149

架构设计专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在项目增多、管理复杂时，采用monorepository（monorep）和工具如lerna与yarn的工作空间模式来统一前端项目管理，实现组件通用化和高效协作的过程。通过实例介绍了项目结构、配置和实际操作步骤，帮助开发者提升团队效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么我们需要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  // 使用工作空间
}

源码

github