vue3 + pnpm 打造一个 monorepo 项目

单一仓库与多仓库架构

单一仓库(Monorepo)架构是一种策略,它允许我们在一个单一的仓库中管理多个项目或包;而多仓库(Multirepo)架构则是将每个项目分别存放在不同的仓库中。

在Monorepo结构中,除了根目录下有一个公共的package.json文件外,每个子项目(sub-package)也有自己的package.json文件。

子项目之间可以通过在package.json中定义的name属性相互引用,从而保持各自的独立性。

# 单一仓库目录结构示例
monorepo-demo
├── packages
│   ├── module-a
│   │   ├── src             # 模块A的源代码
│   │   ├── node_modules    # 模块A的依赖库
│   │   └── package.json    # 模块A的依赖配置
│   └── module-b
│       ├── src             # 模块B的源代码
│       └── package.json    # 模块B的依赖配置
├── .eslintrc             # 整个项目的配置文件
├── node_modules          # 所有子项目的公共依赖库
└── package.json          # 所有子项目的公共依赖配置

相比之下,Multirepo架构倾向于将每个项目隔离在不同的仓库中,每个项目都有自己的package.json文件来管理依赖。

# 多仓库项目A目录结构
multirepo-a
├── src
├── .eslintrc                
├── node_modules             
└── package.json   

# 多仓库项目B目录结构
multirepo-b
├── src
├── .eslintrc                
├── node_modules             
└── package.json

单一仓库工具

在采用单一仓库架构的软件开发中,选择合适的工具对于管理大规模代码库、提升团队协作效率以及优化构建和部署流程至关重要。

截至2024年,前端领域中流行的Monorepo工具包括Pnpm WorkspacesYarn Workspacesnpm WorkspacesRushTurborepoLernaYalcNx

强烈推荐使用Pnpm Workspaces作为单一仓库项目的依赖管理工具。

那么,单一仓库与包管理工具(npm、yarn、pnpm)之间的关系是怎样的呢?

这些包管理工具能够为单一仓库提供依赖安装和依赖管理的支持。通过它们对workspace的支持,允许在单一仓库中的不同子项目之间共享依赖项,并提供一种管理这些共享依赖项的方法。这可以简化依赖项管理和构建过程,并提高开发效率。

单一仓库项目搭建

背景

传统的多仓库模式通常意味着每个项目都需要一个独立的仓库。例如,如果你有三个项目,就需要创建三个远程仓库,并且需要为每个项目单独安装和升级依赖。

而单一仓库模式则是在一个仓库中管理多个项目,这些项目可以是独立的,也可以相互依赖。通过这种方式,多个项目可以共享依赖。例如,如果多个项目都需要lodash,那么只需要安装一次即可。

pnpm i lodash -w

当然,在单一仓库中,除了公共的package.json依赖外,每个子项目也会有自己的私有package.json依赖。

我们选择Pnpm Workspaces作为单一仓库项目的依赖管理工具,接下来一起搭建一个单一仓库项目。

安装包管理工具

全局安装pnpm。

npm i pnpm -g

初始化项目

创建一个新的项目目录pnpm-monorepo,在根目录运行pnpm init创建package.json文件。

然后在根目录新建一个packages文件夹,用于存储子项目。

新建packages/libc-shared(共享包),用于存放多个项目或组件之间共享的代码。运行pnpm init创建package.json文件,package.jsonname字段修改为"@libc/shared";将package.jsonmain入口文件路径字段修改为"src/index.js"

{
  "name": "@libc/shared",
  "version": "1.0.0",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

新建packages/libc-ui(公共组件包),即UI组件库,这里我们直接克隆了iview-ui-plus代码。运行pnpm install安装依赖,**将package.jsonname字段

文章整理自互联网,只做测试使用。发布者:Lomu,转转请注明出处:https://www.it1024doc.com/4308.html

(0)
LomuLomu
上一篇 2024 年 12 月 24 日
下一篇 2024 年 12 月 24 日

相关推荐

  • Java 大视界 — Java 大数据在智能金融理财产品风险评估与个性化配置中的应用(195)

    💖亲爱的朋友们,热烈欢迎来到 青云交的博客 !能与诸位在此相逢,我倍感荣幸。在这飞速更迭的时代,我们都渴望一方心灵净土,而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识,也期待你毫无保留地分享独特见解,愿我们于此携手成长,共赴新程!💖 全网(微信公众号/CSDN/抖音/华为/支付宝/微博) :青云交 一、欢迎加入【福利社群】 点击快速加入1…

    未分类 2025 年 5 月 13 日
    9700
  • 一问一答学习PyQT6,对比WxPython和PyQt6的差异

    在我的基于WxPython的跨平台框架完成后,对WxPython的灵活性以及强大功能有了很深的了解,在跨平台的桌面应用上我突然对PyQt6的开发也感兴趣,于是准备了开发环境学习PyQt 6,并对比下WxPython的差异来进行深入的了解,发现它们很多理念和做法是如此的类似。 1、pyqt6都有那些布局控件? PyQt6 提供了多种布局控件,帮助开发者轻松地将…

    2025 年 1 月 12 日
    34100
  • 交易系统:退款单模型设计详解

    大家好,我是汤师爷~ 退款单是交易逆向流程的核心,它在售后管理中扮演着至关重要的角色。 售后领域的关键概念模型 1、退款单 退款单是追踪和管理退款流程的关键业务文档,它包含以下重要信息: 租户ID:用于识别所属的商家或机构 退款单ID:每张退款单的唯一代码 原订单ID:与退款单相关联的原始订单编号 业务类型:包括仅退款、退货退款等选项 退款类型:例如全额退款…

    2024 年 12 月 26 日
    34500
  • Python 潮流周刊#85:让 AI 帮你写出更好的代码(摘要)

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章、教程、开源项目、软件工具、播客和视频、热门话题等内容。愿景:帮助所有读者精进 Python 技术,并增长职业和副业的收入。 分享了 12 篇文章,12 个开源项目,1 则音视频,全文 2300 字。 以下是本期摘要: 🦄文章&教程 ① 如果一直要求 LLM “写出更…

    未分类 2025 年 1 月 16 日
    39400
  • 【JavaSE】【网络协议】HTTP 请求和响应

    一、HTTP请求 1.1 请求格式 请求格式:首行+请求头(header)+空行+正文(body) 1.2 首行组成 首行组成:请求方法+URL+版本号。使用“空格”将他们分隔开。 1.2.1 请求方法 方法 说明 支持的HTTP版本 GET 获取资源 1.0 1.1 POST 传输实体主体 1.0 1.1 PUT 传输文件 1.0 1.1 DELETE 删…

    2025 年 1 月 15 日
    38000

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信