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

目录

前言

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 -ypnpm i axios

3.创建 axios封装测试用例

4. 给mian添加 common文件

 pnpm -F main add common

 

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

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

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

相关文章

uniapp微信小程序富文本、小程序富文本、rich-text解决video问题

uniapp微信小程序富文本、小程序富文本、rich-text解决video问题

我直接使用的 mp-html mp-html 相当好用&#xff0c;功能比较完善&#xff0c;也可以二次开发 具体的直接看官方文档吧
阅读更多...
Linux安全学习路标

Linux安全学习路标

1. 操作系统基础知识 首先&#xff0c;你需要建立坚实的操作系统基础知识&#xff0c;包括Linux文件系统和目录结构、Linux进程管理、权限管理等基本概念。 2. 网络和通信安全 学习关于网络和通信安全的基础知识&#xff0c;包括TCP/IP协议栈、网络攻击类型、防火墙配置、网…
阅读更多...
vscode + Linux 如何在编辑器调试webserver这类完整C++项目

vscode + Linux 如何在编辑器调试webserver这类完整C++项目

1. 问题背景 网上搜的一堆文章都是教如何调试单个文件&#xff0c;或者一个文件夹下含了所有cc和头文件&#xff0c;但很多项目头文件和实现在上级目录的子文件中&#xff0c;vscode直接调试main函数所在文件时&#xff0c;直接报错某些头文件找不到(xxx.h not found 或者 und…
阅读更多...
12.5单端口RAM，JS计数器，流水线乘法器，不重叠序列检测器（状态机+移位寄存器），信号发生器，交通灯

12.5单端口RAM，JS计数器，流水线乘法器，不重叠序列检测器（状态机+移位寄存器），信号发生器，交通灯

单端口RAM timescale 1ns/1nsmodule RAM_1port(input clk,input rst,input enb,input [6:0]addr,input [3:0]w_data,output wire [3:0]r_data );reg [6:0]mem[127:0];integer i;always (posedge clk or negedge rst) beginif(!rst) beginfor (i0; i<127 ; ii1) beginmem[i]…
阅读更多...
Linux--权限问题（1）

Linux--权限问题（1）

前文 Linux--初识和基本的指令&#xff08;1&#xff09;-CSDN博客 Linux--初识和基本的指令&#xff08;2&#xff09;-CSDN博客 Linux--初识和基本的指令&#xff08;3&#xff09;-CSDN博客 目录 前文 前言 1.剩余指令部分 1.1 打包和压缩的其它指令 2.权限部分 2.1权…
阅读更多...
探秘MSSQL存储过程：参数传递、错误处理、性能优化

探秘MSSQL存储过程：参数传递、错误处理、性能优化

参数传递、错误处理和性能优化是存储过程中非常重要的方面。在本节中&#xff0c;我们将深入探讨这些主题&#xff0c;并提供相应的示例代码。 1、参数传递 存储过程可以接受输入参数和输出参数&#xff0c;以便与外部代码进行交互。以下是一些常见的参数传递方式&#xff1a;…
阅读更多...
Qt基础-程序打包发布方法

Qt基础-程序打包发布方法

本文讲解Qt程序打包发布方法。 一、使用Qt自带的windeployqt 生成可运行的包 准备将Qt生成的exe拷入到单独的文件夹，并进行命名，本文命名为packDemorun，并将文件放到D盘（自己随意放置） 1、找到Qt自带的命令终端 2、启动命令终端 3、输入：cd /d D:\packDemorun，进入文…
阅读更多...
IDEA删除最近打开的文件记录

IDEA删除最近打开的文件记录

IDEA删除最近打开的文件记录 遇见问题&#xff1a;如何删除IDEA中最近打开的文件记录 解决方法 先关闭IDEA 找到 recentProjects.xml 文件 windows 位置&#xff1a;&#xff08;AppData是隐藏文件夹&#xff09; 1.C:\Users\电脑用户名\AppData\Roaming\JetBrains\IntelliJIde…
阅读更多...
Git 请输入一个提交信息以解释此合并的必要性

Git 请输入一个提交信息以解释此合并的必要性

操作方法&#xff1a;按住Ctrl加下面的某个字母
阅读更多...
linux-man命令的使用及练习

linux-man命令的使用及练习

目录 1. 命令概述 2. 使用 3. 练习 ?man services时报错&#xff1a;No manual entry for services的解决办法 4. man命令中常用按键以及用途 1. 命令概述 Linux提供了丰富的帮助手册&#xff0c;当你需要查看某个命令的参数时不必到处上网查找&#xff0c;只要man一下即…
阅读更多...
MySQL六 | 索引

MySQL六 | 索引

目录 索引 优缺点 结构 语法 创建索引 查看索引 删除索引 索引 索引是帮助数据库高效获取数据的数据结构。如果没有设置索引会进行全表扫描&#xff0c;性能较低。 优缺点 优点缺点提高数据检索的效率&#xff0c;降低数据的IO成本索引列也是要占用空间的通过索引列对数…
阅读更多...
viewPager的adapter--FragmentInstancePagerAdapter

viewPager的adapter--FragmentInstancePagerAdapter

之前分享过几个tabviewPager的库。。这种东西开发中特别常见。今天抽空补一个viewPager的adapter。用来搭配使用 创建FragmentInstancePagerAdapter,如下&#xff1a; mport androidx.fragment.app.Fragment import androidx.fragment.app.FragmentManager import androidx.f…
阅读更多...
AI降重软件，AI降重后原创高质量文章

AI降重软件，AI降重后原创高质量文章

在当今信息爆炸的时代&#xff0c;写作与创作的重要性日益凸显。随着大量内容的涌现&#xff0c;文章降重成为了许多作者和内容创作者的一大问题。本文将专心分享该软件的优势&#xff0c;并为广大用户推荐几款好用的AI降重软件。 AI降重使用场景 AI降重技术利用机器学习算法和…
阅读更多...
OpenCV图像相似性比对算法

OpenCV图像相似性比对算法

背景 在做图像处理或者计算机视觉相关的项目的时候&#xff0c;很多时候需要我们对当前获得的图像和上一次的图像做相似性比对&#xff0c;从而找出当前图像针对上一次的图像的差异性和变化点&#xff0c;这需要用到OpenCV中的一些图像相似性和差异性的比对算法&#xff0c;在O…
阅读更多...
使用LangSmith来快速学习LangChain

使用LangSmith来快速学习LangChain

好风凭借力&#xff0c;送我上青云&#xff01; 什么是LangSmith LangSmith is a platform for building production-grade LLM applications. It lets you debug, test, evaluate, and monitor chains and intelligent agents built on any LLM framework and seamlessly int…
阅读更多...
Python学习路线 - Python语言基础入门 - 循环语句

Python学习路线 - Python语言基础入门 - 循环语句

Python学习路线 - Python语言基础入门 - 循环语句 前言为什么学习循环语句 while循环的基础语法while循环语句while循环注意点 while循环的基础案例while循环的嵌套应用while循环的嵌套 while循环的嵌套案例补充知识 - print输出不换行补充知识 - 制表符\t练习案例 - 打印九九乘…
阅读更多...
创建dockerSwarm nfs挂载

创建dockerSwarm nfs挂载

创建dockerSwarm nfs挂载 nfs高可用部署(lsyncd两主机双向同步) nfs高可用部署(lsyncd三主机三向同步) 1. 通过 Volume 1.1 创建 Docker Volume 每个 swarm 节点均创建相同名称的 Docker Volume&#xff08;名称为 nfs120&#xff09; docker volume create --driver local …
阅读更多...
算法：进制之前的转换

算法：进制之前的转换

1. X进制转换成十进制-V1&#xff1a; /*** 笨办法&#xff0c;从左往右开始* Tips&#xff1a;只支持正数** param num* param radix* return*/private static Integer xToTenV1(String num, Integer radix) {if (num.length() 0 || num.charAt(0) -) {throw new IllegalArg…
阅读更多...
外贸找客户软件工具：BotMaster 18.5 Crack

外贸找客户软件工具：BotMaster 18.5 Crack

BotMaster 拓展您的业务大师增加销量Whatsapp营销&#xff0c;使用 BotMaster 将您的业务提升到新的水平 - 最强大的 WhatsApp 营销软件&#xff0c;可促进销售和发展您的业务。 BotMaster 是一款革命性的 WhatsApp 营销工具&#xff0c;于 2022 年 1 月推出。这款功能强大的工…
阅读更多...
10 大 Mac 数据恢复软件深度评测

10 大 Mac 数据恢复软件深度评测

对于任何依赖计算机获取重要文件&#xff08;无论是个人照片还是重要商业文档&#xff09;的人来说&#xff0c;数据丢失可能是一场噩梦。值得庆幸的是&#xff0c;有多种专门为 Mac 用户提供的数据恢复工具&#xff0c;可以帮助检索丢失或意外删除的文件。在本文中&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023