微前端 前置知识2--- monorepo架构

news2025/1/16 0:18:59

目录

前言

pnpm vs npm

pnpm设计思想

硬连接

软链接 （符号链接）

原理 

pnpm 指令

monorepo架构

介绍

配置monorepo 

 pnpm --filter

前言

我们采用的是微前端一个主应用，和多个子应用，我们肯定不会一个一个去install安装依赖，太傻了，我们采用monorepo 架构 一次install 即可安装完成。

第一步需要安装pnpm

pnpm内置了对单个代码仓库包含多个软件包的支持，是monorepo架构模式的不二速选

npm i pnpm -g

pnpm vs npm

当使用 npm 时，如果你有 100 个项目，并且所有项目都有一个相同的依赖包，那么， 你在硬盘上就需要保存 100 份该相同依赖包的副本。然而，如果是使用 pnpm，依赖包将被 存放在一个统一的位置，因此：

  1. 如果你对同一依赖包需要使用不同的版本，则仅有 版本之间不同的文件会被存储起来。例如，如果某个依赖包包含 100 个文件，其发布了一个新 版本，并且新版本中只有一个文件有修改，则 pnpm update 只需要添加一个 新文件到存储中，而不会因为一个文件的修改而保存依赖包的 所有文件。
  2. 所有文件都保存在硬盘上的统一的位置。当安装软件包时， 其包含的所有文件都会硬链接自此位置，而不会占用 额外的硬盘空间。这让你可以在项目之间方便地共享相同版本的 依赖包。

最终结果就是以项目和依赖包的比例来看，你节省了大量的硬盘空间， 并且安装速度也大大提高了！

pnpm设计思想

软链接+硬链接+仓库

硬连接

硬链接是计算机文件系统中的一种链接方式，它允许一个文件拥有多个文件名或路径。与软链接（符号链接）不同，硬链接是通过在文件系统中创建一个新的目录项来实现的，这个目录项与原始文件的索引节点（inode）相同。

硬链接的主要特点是，它们与原始文件共享相同的数据块和inode，因此它们在文件系统中的大小是相同的。当创建一个硬链接时，操作系统会为新的目录项分配一个新的文件名，但是它会指向原始文件的inode，这样就可以通过不同的文件名访问同一个文件的内容。

硬链接的好处是可以节省存储空间，因为多个文件名指向同一个数据块。当其中一个文件被删除时，其他硬链接仍然可以访问到文件的内容，只有当所有硬链接都被删除时，文件的数据块才会被释放。

需要注意的是，硬链接只能在同一个文件系统中创建，不能跨文件系统创建硬链接。此外，硬链接不能指向目录，只能指向文件。

创建硬链接

共享同一个内存地址 

软链接 （符号链接）

软连接（Symbolic Link），也称为符号链接或软链接，是一种特殊类型的文件，它指向另一个文件或目录。软连接可以在文件系统中创建一个指向目标文件或目录的快捷方式，类似于Windows系统中的快捷方式。

与硬链接不同，软连接是一个独立的文件，它包含了指向目标文件或目录的路径信息。当我们访问软连接时，实际上是通过软连接的路径找到目标文件或目录。软连接可以跨越不同的文件系统，甚至可以指向不存在的目标。

软连接的优点是它们可以提供灵活性和便捷性。我们可以使用软连接来创建文件的备份，或者在不同的目录之间共享文件。此外，软连接还可以简化文件路径，使得文件访问更加方便。

需要注意的是，当我们删除软连接时，只会删除软连接本身，而不会影响目标文件或目录。如果我们删除了目标文件或目录，软连接将变为"断开的"软连接，访问它将会失败。

总结来说，软连接是一种指向目标文件或目录的快捷方式，它提供了灵活性和便捷性，可以跨越不同的文件系统。

创建软链接

 可以理解成快捷方式 没有大小 只记录一个路径

 

原理 

现在，让我们将这些概念应用到pnpm的原理中。pnpm使用了硬链接和软链接的组合来实现包的管理。当我们使用pnpm安装一个包时，它会将包的依赖项安装到一个共享的存储区域，称为"node_modules/.pnpm-store"。在这个存储区域中，每个包都有一个唯一的标识符。

当我们安装一个包时，pnpm会创建一个硬链接，将包的文件链接到存储区域中的对应位置。这样，多个项目可以共享相同的包，而不需要在每个项目中都复制一份。

此外，pnpm还使用软链接来创建项目的"node_modules"目录。当我们在项目中安装一个包时，pnpm会在项目根目录下创建一个软链接，指向存储区域中的对应包。这样，项目中的代码可以像使用本地包一样使用存储区域中的包。

通过使用硬链接和软链接的组合，pnpm实现了高效的包管理，节省了存储空间，并提供了更快的安装和更新速度。

pnpm 指令

  1. pnpm install：安装项目的依赖项。这个指令会根据项目的package.json文件中的依赖配置，从存储区域中安装对应的包到项目的node_modules目录中。

  2. pnpm install <package>：安装指定包的最新版本。可以在指令后面跟上要安装的包的名称。

  3. pnpm install --save-dev <package>：安装指定包并将其添加到开发依赖项中。这个指令会将包的信息添加到项目的package.json文件中的devDependencies字段。

  4. pnpm update：更新项目的依赖项到最新版本。这个指令会检查存储区域中的包是否有新的版本，并将其更新到项目的node_modules目录中。

  5. pnpm uninstall <package>：卸载指定的包。这个指令会从项目的node_modules目录中移除指定的包，并从package.json文件中的依赖配置中删除对应的信息。

  6. pnpm run <script>：运行项目中定义的脚本命令。可以在指令后面跟上要运行的脚本名称，脚本命令定义在项目的package.json文件中的scripts字段。

  7. pnpm list：列出项目的依赖树。这个指令会显示项目中所有安装的包及其依赖关系。

  8. pnpm store status：显示存储区域的状态。这个指令会显示存储区域中的包的使用情况和占用空间。

  monorepo架构

介绍

在Monorepo架构中，所有的项目代码都存储在同一个代码仓库中，而不是分散在多个仓库中。这种架构的优点之一是可以方便地共享代码和依赖项，因为所有的项目都在同一个仓库中，可以共享同一个依赖项和工具链。

在Monorepo架构中，通常使用包管理工具来管理项目的依赖项。常见的包管理工具包括npm、Yarn和pnpm等。这些工具可以帮助我们在Monorepo中安装、更新和卸载依赖项。

在Monorepo中，我们可以使用以下一些方法来安装项目依赖项：

  1. 安装所有项目的依赖项：我们可以在Monorepo的根目录下运行包管理工具的安装指令，来安装所有项目的依赖项。这样可以确保所有的项目都使用相同的依赖项版本。

  2. 安装单个项目的依赖项：我们可以在单个项目的目录下运行包管理工具的安装指令，来安装该项目的依赖项。这样可以避免安装不必要的依赖项，提高安装速度。

  3. 共享依赖项：在Monorepo中，我们可以将一些常用的依赖项安装到根目录下的node_modules目录中，然后在项目中使用软链接来共享这些依赖项。这样可以节省存储空间，并且可以确保所有的项目都使用相同的依赖项版本。

  4. 使用包管理工具的工作区特性：一些包管理工具，如Yarn和pnpm，提供了工作区（workspace）特性，可以让我们在Monorepo中管理多个项目的依赖项。通过使用工作区特性，我们可以在根目录下定义多个项目，并将它们的依赖项安装到同一个node_modules目录中。

总的来说，Monorepo架构可以帮助我们更好地管理项目的依赖项，提高代码的复用性和可维护性。通过使用包管理工具和共享依赖项等技术，我们可以更加高效地安装、更新和卸载依赖项。

配置monorepo 

最外层建一个main充当主应用然后新建一个web文件夹里面放两个子应用分别是vue和react

 初始化 pnpm

pnpm init

在根目录新建一个 pnpm-workspace.yaml 配置依赖项

pnpm-workspace.yaml介绍

pnpm-workspace.yaml是一个配置文件，用于定义pnpm工作区的设置和行为。pnpm是一个快速、节省磁盘空间的包管理器，它支持工作区功能，允许您在单个代码库中管理多个相关的包。

pnpm-workspace.yaml文件位于工作区的根目录下，它可以包含以下配置选项：

  1. packages：指定工作区中的包的路径。您可以使用通配符来匹配多个包。例如，"packages/*"将匹配根目录下的所有包。

  2. exclude：指定要排除的包的路径。这对于排除某些包不参与工作区管理很有用。

  3. hooks：定义在工作区中执行的钩子脚本。您可以在特定事件发生时运行自定义脚本，例如在安装依赖项之前或之后。

  4. installOptions：定义pnpm安装依赖项时的选项。您可以指定是否使用软链接、是否保存依赖项的版本锁定文件等。

  5. packagesToInstall：指定要安装的包的路径。这对于只安装特定的包很有用。

  6. packagesToPublish：指定要发布的包的路径。这对于只发布特定的包很有用。

通过编辑pnpm-workspace.yaml文件，您可以自定义pnpm工作区的行为，以满足您的项目需求。请注意，该文件只在使用pnpm命令时才会生效。

packages:
  # 表示直接在"packages/"目录下的所有子目录中的包都会被包含进来。
  - "packages/*"
  # 表示在"components/"目录下的所有子目录中的包都会被包含进来。
  - "components/**"
  # 第三个元素是"!/test/"，表示排除所有包含在"test/"目录下的子目录中的包，即不会被包含进来。
  - "!**/test/**"

 

 

配置完成后install一次就行

他会把所有的公共依赖项抽到外层，而里层的依赖项都是一些最核心的

packages:
  # all packages in direct subdirs of packages/
  - 'main'
  # all packages in subdirs of components/
  - 'web/**'

外层目录放一些公共的包文件 
不需要每个项目单独的 npm i

   pnpm --filter

根目录运行pnpm -F  vue-demo dev

这里的-F是--filter的简写，用于过滤指定的package，用法 pnpm --filter

pnpm --filter 是 pnpm 包管理器的一个命令行选项，用于过滤操作的目标。

当使用 pnpm 命令执行一些操作时，例如安装依赖、运行脚本等，可以通过 --filter 选项指定只对特定的包或模块进行操作。

--filter 选项后面可以跟随一个包名或者一个匹配模式，用于指定要操作的包。可以使用通配符来匹配多个包，例如 --filter foo-* 表示匹配所有以 "foo-" 开头的包。

使用 pnpm --filter 可以提高执行操作的效率，只对指定的包进行操作，而不需要对整个项目的依赖进行处理。这对于大型项目或者只需要处理特定包的情况非常有用。

子模块复用技术

子模块复用技术是指可以把公共模块提取出来供所有子应用使用

例如 axios封装

1. 创建common文件夹修改pnpm-workspace

packages:
  # 表示直接在"packages/"目录下的所有子目录中的包都会被包含进来。
  - "main"
  - "common"
  # 表示在"components/"目录下的所有子目录中的包都会被包含进来。
  - "web/**"

2.在monorepo\common  初始化pnpm 下载axios，

init -y

pnpm i axios

3.创建 axios封装测试用例

4. 给mian添加 common文件

 pnpm -F main add common

 

5.直接可以使用 其他子应用同理.. （可以复用子模块）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1287688.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【教程】苹果推送证书的创建和使用流程详解

【教程】苹果推送证书的创建和使用流程详解

摘要 本篇博客主要介绍了苹果推送证书的使用流程。首先&#xff0c;在苹果开发者中心创建推送证书&#xff0c;然后在应用程序中使用该证书进行消息推送。文章详细说明了创建推送证书的步骤&#xff0c;并提供了在应用程序中注册推送服务、发送推送消息以及处理推送消息的相关…
阅读更多...
CentOS最小化安装后怎么转图形界面/可视化桌面？

CentOS最小化安装后怎么转图形界面/可视化桌面？

文章目录 1、命令行和图形界面切换方式一方式二 2、最小化安装转桌面1-设置网络2-测试网络3-更新文件4-安装图形5-查看默认6-设置默认 界面效果参考视频 1、命令行和图形界面切换 如果安装的是最小化&#xff0c;那么init 5 (进入图像化桌面)命令是无效的 方式一 1.如果在命…
阅读更多...
把 Windows 11 装进移动硬盘：Windows 11 To Go

把 Windows 11 装进移动硬盘：Windows 11 To Go

本篇文章聊聊如何制作一个可以“说带走就带走”的 Windows 操作系统&#xff0c;将 Windows11 做成能够放在 U 盘或者移动硬盘里的 WinToGo “绿色软件”。 写在前面 在《开源的全能维护 U 盘工具&#xff1a;Ventoy》这篇文章的最后&#xff0c;我提到了一个关键词 “WinToG…
阅读更多...
带你学C语言：带你学函数

带你学C语言：带你学函数

目录 &#x1f30d;函数的概念 ★★☆☆☆库函数 ★★★★☆自定义函数 ★★★☆☆形参与实参 ★★★☆☆return语句 ★★★☆☆数组做函数参数 ★★★☆☆嵌套调用和链式访问 ★★★☆☆函数的声明和定义 ✍结束语 &#x1f30d;函数的概念 数学中我们其实就见过函数…
阅读更多...
校园局域网规划设计

校园局域网规划设计

摘 要 随着网络技术的发展&#xff0c;校园网的建设已经进入到一个蓬勃发展的阶段。校园网的建成和使用&#xff0c;对于提高教学和科研的质量、改善教学和科研条件、加快学校的信息化进程&#xff0c;开展多媒体教学与研究以及使教学多出人才、科研多出成果有着十分重要而深远…
阅读更多...
Oracle连接错误：ORA-28040:没有匹配的验证协议

Oracle连接错误：ORA-28040:没有匹配的验证协议

一、产生原因&#xff1a;oci动态库版本太低&#xff0c;无法连接高版本的数据库 二、解决办法 1、下载高版本的oci库 https://www.oracle.com/database/technologies/instant-client/winx64-64- downloads.html 2、解压并复制oci动态库 3、粘贴到相应的目录
阅读更多...
学校图书管理系统的开发

学校图书管理系统的开发

目 录 摘要 1 Abstract. 1 1 引言 2 1.1 图书管理的现状 2 1.2 现有图书管理系统的概述 3 1.3 选题的目的、意义 3 1.4 图书管理系统的可行性分析 4 1.5 系统开发运行环境 4 2 图书管理系统开发相关技术的介绍 5 2.1 Asp.net的介绍 5 2.1.1 Asp.net的优势介绍 5 2.1.2 Asp.net…
阅读更多...
3D模型制作木质纹理贴图

3D模型制作木质纹理贴图

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 本文将讲解如何使用GLTF 编辑器 -NSDT 在线材质编辑工具为3D模型设置…
阅读更多...
逆水行舟！浅谈24届双非本科秋招

逆水行舟！浅谈24届双非本科秋招

逆水行舟&#xff01;浅谈24届双非本科的秋招 逆水行舟&#xff01;浅谈24届双非本科的秋招0、背景 -- 写下本文的初衷1、实习 -- 秋招的预备战役1.1 科大讯飞1.2 三七互娱 2、秋招 -- 一场没有硝烟的战争3、总结 -- 做好自己想做的事情 0、背景 – 写下本文的初衷 如题&#…
阅读更多...
Siemens-NXUG二次开发-打开与关闭prt文件[Python UF][20231206]

Siemens-NXUG二次开发-打开与关闭prt文件[Python UF][20231206]

Siemens-NXUG二次开发-打开与关闭prt文件[Python UF][20231206] 1.python uf函数1.1 NXOpen.UF.Part.Open1.2 NXOpen.UF.Part.LoadStatus1.3 NXOpen.UF.Part.Close1.4 NXOpen.UF.Part.AskUnits 2.示例代码3.运行结果3.1 内部模式3.2 外部模式 1.python uf函数 1.1 NXOpen.UF.P…
阅读更多...
Linix服务器添加dns解析

Linix服务器添加dns解析

Linix开通互联网域名地址出现&#xff0c;如下错误&#xff1a; 需要访问的服务器上添加dns解析 vim /etc/sysconfig/network-scripts/ifcfg-ens192 添加如下配置&#xff1a; DNS1202.96.134.13 重启网卡&#xff1a; systemctl restart network 注意如果是docker服务部署…
阅读更多...
用pip更新、安装python的包

用pip更新、安装python的包

查看pip的版本&#xff1a;python -m pip --version 例如&#xff0c;查看下pip的版本&#xff0c;在cmd下输入命令python -m pip --version&#xff0c;可以发现当前安装的pip的版本是23.2.1&#xff1a; 查看一个包的详情&#xff1a;python -m pip show 例如&#xff0c…
阅读更多...
【开源】基于Vue.js和微信小程序的班级考勤管理系统

【开源】基于Vue.js和微信小程序的班级考勤管理系统

文末获取源码&#xff0c;项目编号&#xff1a; S 080 。 \color{red}{文末获取源码&#xff0c;项目编号&#xff1a;S080。} 文末获取源码&#xff0c;项目编号&#xff1a;S080。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统基础支持模块2.2 班级学生教师支…
阅读更多...
统计项目代码行数轻松搞定：使用 Node.js 脚本自动统计代码量

统计项目代码行数轻松搞定：使用 Node.js 脚本自动统计代码量

说在前面 在软件开发领域&#xff0c;了解项目的代码规模和复杂度对于项目管理、团队协作以及技术评估都至关重要。通过统计项目代码行数&#xff0c;我们能够更好地把握项目的整体情况&#xff0c;包括但不限于代码量的大小、不同类型文件的分布情况以及项目的结构和复杂度。这…
阅读更多...
WordPiece词表的创建

WordPiece词表的创建

文章目录 一、简单介绍二、步骤流程2.1 预处理2.2 计数2.3 分割2.4 添加subword 三、代码实现 本篇内容主要介绍如何根据提供的文本内容创建 WordPiece vocabulary&#xff0c;代码来自谷歌&#xff1b; 一、简单介绍 wordpiece的目的是&#xff1a;通过考虑单词内部构造&…
阅读更多...
Anemone库的爬虫程序代码示例

Anemone库的爬虫程序代码示例

以下是代码&#xff1a; ruby require anemone # 设置代理服务器 Anemone.proxies { http > "", https > "" } # 定义爬取的URL url # 使用Anemone进行爬取 Anemone.crawl(url) do |page| # 使用正则表达式找出所有的视频链接 video_…
阅读更多...
AI 绘画 | Stable Diffusion LCM和FP8 显存不足的福音

AI 绘画 | Stable Diffusion LCM和FP8 显存不足的福音

前言 在我们使用Stable Diffusion 作画的时候，普通用户因为电脑显存配置过低，经常会出现爆显存和出图慢的困扰。而SD-WebUI在显存优化方便不如ComfyUI和Fooocus，但是也有一些弥补SD-WebUI显存问题的方案，那就是LCM和FP8。 LCM 教程 简介 LCM 是一个用于 Stable Diffusio…
阅读更多...
算法-02-排序-冒泡插入选择排序

算法-02-排序-冒泡插入选择排序

一般最经典的、最常用的&#xff1a;冒泡排序、插入排序、选择排序、归并排序、快速排序、计数排序、基数排序、桶排序。那么我们如何分析一个"排序算法"呢&#xff1f; 1-分析排序算法要点 时间复杂度&#xff1a;具体是指最好情况、最坏情况、平均情况下的时间复杂…
阅读更多...
C++包管理利器CPM

C++包管理利器CPM

C包管理利器CPM 一、介绍 CPM.cmake is a cross-platform CMake script that adds dependency management capabilities to CMake. It’s built as a thin wrapper around CMake’s FetchContent module that adds version control, caching, a simple API and more. CPM.cma…
阅读更多...
JavaScript 安全的《加/解密处理》的实战--案例(二)

JavaScript 安全的《加/解密处理》的实战--案例(二)

前言: 在Web开发中&#xff0c;安全性一直是一个重要而复杂的议题&#xff0c;尤其是与敏感数据操作有关时。数据传输地过程中需要保证信息绝对的安全性&#xff0c;包括了诸如用户名、密码、个人信息等&#xff0c;这就需要对这类信息进行加密与解密。本案例&#xff08;二&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023