使用lerna搭建monorep

本文探讨了在项目增多、管理复杂时,采用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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值