pnpm 与monorepo架构

news2024/11/26 12:34:26

 软链接与硬链接   创建方式:    mklink (windows)

软链接 : a、b指向同一个文件  b相当于一个快捷方式

硬链接: a、b指向同一个内存地址 某一文件修改,其他文件跟这变化

 上图所示:安装某依赖,外面带 符号的文件夹只是一个软链接,链接到    .pnpm 的文件夹下面

.pnpm 内的依赖又通过硬链接的方式从 本地store拉取 ,查看: pnpm  store path ;

场景

monoropo 架构  与微前端

 外面一个主应用 里面可以有多个不同技术栈的子应用,在这种场景下,如果使用 npm 安装依赖 那么每个应用都要安装一次 ,所以我们 pnpm 解决这个问题 。 一键安装所有应用的依赖,每个子应用只包含自己个性化的依赖,相同的依赖放到最上层 ,让每个应用得以共享,打包的时候不影响。

创建项目

mian/ vue项目 主应用

web/ vue-demo 、react-demo  两个子应用 

根目录创建 yaml 配置文件   pnpm-workspace.yaml

packages:
  # all packages in direct subdirs of packages/
  - 'main/*'
  # all packages in subdirs of components/
  - 'web/**'
  # exclude packages that are inside test directories
  - '!**/test/**'

main 主应用

web/** web下面的所有文件夹都会执行

然后 pnpm i

可见每个子应用 中的依赖非常干净 ,公用的依赖都在 顶层的 node_modules 里面

如果想启动 子应用的 vue 项目 

执行 pnpm   |  --filter / -F |  vue-demo 文件夹名字 |  dev 启动名字 

子模块复用技术

如果我在 最顶层安装一个 axios,在所有的子应用都能使用怎么办,pnpm 提供了方式

根目录新建common文件夹

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

yarm 添加 common 文件夹 以使用 公共依赖    pnpm init     、  pnpm  i axios

如果想在  vue 子应用 使用axios 的话 

$     pnpm -F vue-demo add common

    然后查看该子应用 package.json 

 "dependencies": {
    "common": "workspace:^1.0.0",
    "vue": "^3.2.45"
  },

可见多个一个 common 的键 

然后导入既可以

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

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

相关文章

LabVIEW - DAQmx 数据采集

1. 题目 基于NI MAX创建模拟仿真设备,然后基于DAQmx编写模拟量数据采集程序,实现按照1s时间间隔,采集制定模拟输入端口一个数据的功能,并能够将采集的数据、数据采集的时间等参数写入文本文件保存。 2. 过程 通过在NI max的设备与…

虚拟人直播怎么做?3d虚拟主播全栈技术方案来了

元宇宙浪潮来袭后,虚拟人直播的应用场景得到进一步拓宽,大量的3d虚拟主播出现在品牌直播间、娱乐节目、发布会等应用中,那想要让3d虚拟主播“活得即时”,开启虚拟人直播要怎么做?本文将基于广州虚拟动力的3d虚拟主播全…

AWS IAM介绍

前言 AWS是世界上最大的云服务提供商,它提供了很多组件供消费者使用,其中进行访问控制的组件叫做IAM(Identity and Access Management), 用来进行身份验证和对AWS资源的访问控制。 功能 IAM的功能总结来看,主要分两种&#xff1…

3、线性数据结构

线性数据结构,从名字可以看出,和“线”脱离不了关系。 那么从“线”联想,水平的,我们可以想到食堂打饭排的队伍,垂直的,我们可以联想到书桌上层叠摆放的书籍。 打饭的队伍一般遵循“先来先服务”的原则&a…

力扣热门100题之移动0【中等】

题目描述 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0] 示例 2: 输入: nums […

利用Graphics的CopyFromScreen实现简陋版的打印(C#)

前段时间,在做一个打印的需求,需要把Winform界面的控件及内容全部打印出来,但有一个比较坑的地方是,公司提供的打印API打印单选框,打印单选框时发现选框和内容总是有那么一点点不对齐,看着很别扭。不过客户…

【Linux】文件操作(一)

目录 预备知识 复习C语言文件接口 fopen() 写入类:fwrite()、fprintf()、fputs() 读取类:fgets() 系统接口 open() 一个参数如何传递多个选项? close() write() read() 预备知识 在正式讲解文件之前,我们需要有一些预…

C#中小数保留固定位数

我们写程序的时候,有时候数据想要对齐一点,如果小数位数不一样,自然就对不齐了。这里提供一个方法. 1.这里举例保留小数点后4位(不足4位后面补0)。 String result String.Format("{0:F4}", 123.456); 输出结果为result123.4560&a…

Linux离线安装mysql8.0+

文章目录 1.查看是否安装过MySQL2.MySQL卸载3.下载mysql4.上传mysql到指定目录5.解压MySQL安装包6.安装1.准备工作2.开始安装3.查看MySQL版本 7.修改my.cnf配置文件8.授权给mysql用户8.服务初始化10.启动MySQL11.登录12.修改密码13.设置远程登录1连接超时问题2确认网络3查看端口…

STL vector 详解

STL vector 详解 STL vector 详解 STL vector 详解一级目录二级目录三级目录 1. vector容器2. vector 容器的初始化函数1.初始化2.案例 3. vector的访问函数1. 成员函数访问2. 操作符[ ]访问3.案例 4. vector的插入函数1. 语法2. 案例 5. vector的删除函数1.语法2. 案例 6. vec…

Vue el-table 多表格联合显示、合并单元格

原型图 分析 先看内容是三个表,每个表的合并单元格都有点不同。 按照原型图给的内容,第一个是两列,有行合并和列合并,还有表头行合并。 现根据图造出mock数据,然后再写对应的代码。 export const columnVarsData {s…

数据结构day7(2023.7.21)

一、Xmind整理: 二、课上练习: 练习1:折半查找/二分查找 1-------100 key8850---10075-100int arr[]{12,23,33,45,66,78,99};key7912,23,33,45,66,78,990 6low mid high66, 78, 99mid1 mid highlow99lowhigh…

进程间的通信之管道(匿名管道)

文章目录 进程间通信(IPC)管道管道特点为什么可以使用管道进行进程间通信管道数据结构匿名管道的使用 管道实例管道读写特点管道设置非阻塞 进程间通信(IPC) inter process conmmunication 👇👇&#x1f…

现场总线协议转换网关快速选型介绍

现场总线协议是一种用于设备间通信的标准化接口,它支持数字信号和信息在不同设备之间的传输,例如传感器、执行器、控制器等。捷米特总线协议网关支持Profinet/DeviceNet/EthernetIP/EtherCAT/RS485/Profibus/ModbusRTU/TCPIP/CAN/CANopen/CC-Link等工业网…

【教学类-36-09】20230722职业抽卡(midjounery-niji)(涂色、裁剪、游戏)

作品展示: 随机选学具,辨认职业名称、说说工作内容、涂色、裁剪、交换卡片等 灵感来源: 最近在网上搜索“midjounery 简笔画”,发现一条宝藏“关键词”——可以直接生成简笔画风格(造型的外边框线加粗)的样…

【Elasticsearch】ES简单快速入门

ES简单快速入门 概述 Elasticsearch是一个分布式全文搜索引擎 下载与安装 https://www.elastic.co/cn/downloads/elasticsearch下载之后 解压文件夹,进入bin目录,双击elasticsearch.bat文件 一开始初始化时间比较久,之后初始化之后&…

Istio Pilot源码学习(一):Pilot-Discovery启动流程、ConfigController配置规则发现

本文基于Istio 1.18.0版本进行源码学习 1、Pilot-Discovery工作原理 Pilot-Discovery是Istio控制面的核心,负责服务网格中的流量管理以及控制面和数据面之间的配置下发 Pilot-Discovery从注册中心(如Kubernetes)获取服务信息并汇集&#xff…

新版UI盲盒抽奖系统源码-带H5端小程序端可打包APP_带安装教程

新版UI盲盒抽奖系统源码-带H5端小程序端可打包APP,这套盲盒系统小白看了一下里面没有搭建教程的,但是盲盒的搭建方式都是差不多的这套就放给你们自己研究了,UI还是很好看的感兴趣可以自己搭建看看。

Vue中TodoList案例_勾选

与上一篇Vue中TodoList案例_添加有三个文件变化了 App.vue&#xff1a;中加了checkTodo方法 <template><div id"root"><div class"todo-container"><div class"todo-wrap"><MyHeader :addTodo"addTodo"/&…

【Linux】信号保存信号处理

前言&#xff1a;对信号产生的思考 上一篇博客所说的信号产生&#xff0c;最终都要有OS来进行执行&#xff0c;为什么&#xff1f;OS是进程的管理者&#xff01;信号的处理是否是立即处理的&#xff1f;在合适的时候 -》那什么是合适的时候&#xff1f;信号如图不是被立即处理…