Monorepo与pnpm:前端项目管理的完美搭档

news2024/11/15 23:57:53

一、什么是pnpm

pnpm又称 performant npm,翻译过来就是高性能的npm。

1.节省磁盘空间提高安装效率

pnpm通过使用硬链接和符号链接(又称软链接)的方式来避免重复安装以及提高安装效率。硬链接:和原文件共用一个磁盘地址,相当于别名的作用,如果更改其中一个内容,另一个也会跟着改变符号链接(软链接):是一个新的文件,指向原文件路径地址,类似于快捷方式 官网原话:

当使用 npm 时,如果你有 100 个项目,并且所有项目都有一个相同的依赖包,那么,你在硬盘上就需要保存 100 份该相同依赖包的副本。然而,如果是使用 pnpm,依赖包将被存放在一个统一的位置,因此:1.如果你对同一依赖包需要使用不同的版本,则仅有 版本之间不同的文件会被存储起来。例如,如果某个依赖包包含 100 个文件,其发布了一个新 版本,并且新版本中只有一个文件有修改,则pnpm update 只需要添加一个新文件到存储中,而不会因为一个文件的修改而保存依赖包的所有文件。2.所有文件都保存在硬盘上的统一的位置。当安装软件包时,其包含的所有文件都会硬链接自此位置,而不会占用额外的硬盘空间。这让你可以在项目之间方便地共享相同版本的依赖包。最终结果就是以项目和依赖包的比例来看,你节省了大量的硬盘空间,并且安装速度也大大提高了!

2.创建非扁平的node_modules目录结构

在这里插入图片描述

3.Monorepo 简介及其与包管理工具(npm、yarn、pnpm)之间的关系

Monorepo模式:
Monorepo 是一种项目开发与管理的策略模式,它代表"单一代码仓库"(Monolithic Repository)。在 Monorepo 模式中,所有相关的项目和组件都被存储在一个统一的代码仓库中,而不是分散在多个独立的代码仓库中,这些项目之间还可能会有依赖关系。

包管理工具:
npm、yarn、pnpm 等是用来管理项目依赖、发布包、安装依赖的工具,它们都提供了对工作区(workspace)的支持,允许在单个代码库中管理多个项目或包。这种工作区支持在单个代码库中同时开发、测试和管理多个相关的项目,而无需使用多个独立的代码仓库。

关系:
这些包管理工具与 monorepo 的关系在于它们可以为 monorepo 提供依赖安装与依赖管理的支持,借助自身对 workspace 的支持,允许在 monorepo 中的不同子项目之间共享依赖项,并提供一种管理这些共享依赖项的方式,这可以简化依赖项管理和构建过程,并提高开发效率。

4.Monorepo (单仓多模块)开发模式

  • 回归单体管理:Monorepo 是一种试图回归单体管理优势的方法,但保留了多仓库开发的某些优点。它允许在一个代码库中管理多个项目、组件或服务,提供更好的代码共享和重用性。
  • 现代工具支持:现代的版本控制系统和工具链使得 Monorepo 开发模式更为可行,例如像 Pnpm、Yarn 、Lerna 和 Turborepo 等工具,它们提供了更好的管理、构建和部署多个项目的能力。
  • 优点:
    • 保留 multirepo 的主要优势
    • 管理所有项目的版本控制更加容易和一致,降低了不同项目之间的版本冲突。
    • 可以统一项目的构建和部署流程,降低了配置和维护多个项目所需的工作量。
    • 代码复用
    • 模块独立管理
    • 分工明确,业务场景独立
    • 代码耦合度降低
  • 缺点:
    • Monorepo 可能随着时间推移变得庞大和复杂,导致构建时间增长和管理困难,git clone、pull 的成本增加。
    • 权限管理问题:项目粒度的权限管理较为困难,容易产生非owner管理者的改动风险。

5.如何解决monorepo无法进行细粒度权限管理的缺点

  1. 使用代码所有权文件使用如 CODEOWNERS 文件(GitHub 等平台支持)来指定某个目录或文件的所有者。当这些文件或目录被修改时,只有指定的所有者才能批准更改。这种方法能够实现对项目或模块级别的权限粒度控制。
  2. 利用CI/CD流程在持续集成/持续部署(CI/CD)流程中设置权限和访问控制。例如,可以配置流程,只允许具有特定权限的用户触发构建或部署到生产环境。这种方式可以在流程层面上控制谁可以对代码库进行重要操作。
  3. 分支策略通过严格的分支管理策略,如Git Flow,控制不同级别的开发人员可以访问和修改的分支。比如只允许项目负责人合并代码到主分支,而其他开发人员只能在特定的功能分支上工作。
  4. 使用Git钩子配置Git钩子(Hooks),在代码提交或合并前执行脚本来检查提交者的权限。例如,可以设定pre-commit钩子,确保提交的代码符合访问权限要求。
  5. 利用子模块虽然这种做法在传统Monorepo中较少使用,但通过Git子模块(submodules)可以实现对特定部分的仓库独立控制,从而在需要时提供更细粒度的权限管理。
  6. 第三方工具和扩展考虑使用一些第三方工具和扩展来管理权限。例如,GitLab和Bitbucket等平台提供了更细粒度的权限控制设置,允许在项目或组织级别进行详细的访问控制。

6.为什么组件库项目会选用 Monorepo 模式

对于组件库项目,很自然的会涉及到划分以下模块

  • components 包,作为组件库的主要代码,实现各个 UI 组件的核心逻辑。
  • shared 包,主要存放各种杂七杂八的工具方法。
  • theme 包,实现组件库的主题样式定制方案。
  • cli 包,实现组件库模板脚手架的命令行工具。
  • docs 包,组件库的示例 demo 与使用文档。
  • playground 包,组件库的在线编辑、演示应用。

细化拆分不同模块的好处非常明显,一句话总结就是:模块划分的越清晰,复用时的灵活性、可操作性就越强,每个独立模块产物的体积也会越轻量。

二、pnpm的安装和使用

  1. 安装全局pnpm
    npm i pnpm -g

  2. 查看pnpm版本
    pnpm -v
    如果显示版本,说明安装成功

三、pnpm在monorepo架构中的使用

如下结构,我们项目中有一个main应用,在web文件夹下还有一个react应用和vue应用,我们可以用pnpm对依赖进行统一管理
在这里插入图片描述

  1. 在根目录pnpm初始化生成package.json
    pnpm init
    在这里插入图片描述
  2. 配置工作空间
    ① 新建pnpm-workspace.yaml文件
    在这里插入图片描述
    ② 配置pnpm-workspace.yaml文件
packages:
  # 主项目
  - 'main-project'
  # 子目录下所有项目
  - 'web/**'
  1. 安装项目依赖
    在根目录运行如下命令,一键为所有项目安装依赖
    pnpm i
    在这里插入图片描述
  2. 暴露公用方法
    ① 创建common文件夹及index.ts
    在这里插入图片描述
    ② 在common文件夹中运行pnpm init初始化
    pnpm init
    ③ pnpm-workspace.yaml文件中添加common文件夹
    在这里插入图片描述
    ④ 编写index.ts文件暴露方法
    在这里插入图片描述
    export const hello = () => { console.log('hello') }
    ⑤ 根目录运行pnpm -F main-project add common将common里的方法暴露给main-project
    这里的-F是–filter的简写,用于过滤指定的package,用法 pnpm --filter

pnpm -F main-project add common

⑥ 在页面中引入公共方法
在这里插入图片描述
⑦ 启动页面
pnpm -F main-project dev
在这里插入图片描述
⑧使用pnpm模块内部指定依赖 踩坑总结
在这里插入图片描述

在这里插入图片描述
例如我要将common包添加到packages/下面的所有子项目的package.json中 执行 pnpm -F packages/ add common or pnpm -F ‘packages/*’ add common
都会显示找不到路径 原因:官网通知pnpm filter过滤器非常强大 需要依赖当前项目相对路径
正确指令:pnpm -F "./packages/\*" add common
在这里插入图片描述

四、pnpm常用命令

#安装软件包及其依赖的任何软件包 如果workspace有配置会优先从workspace安装
pnpm add <pkg>
#安装项目所有依赖
pnpm install
#更新软件包的最新版本
pnpm update
#移除项目依赖
pnpm remove
#运行脚本
pnpm run
#创建一个 package.json 文件
pnpm init
#以一个树形结构输出所有的已安装package的版本及其依赖
pnpm list

子包管理操作在 workspace 模式下,pnpm 主要通过 --filter 选项过滤子模块,实现对各个工作空间进行精细化操作的目的。

为指定模块安装外部依赖。

  • 下面的例子指为 a 包安装 lodash 外部依赖。
  • 同样的道理,-S 和 -D 选项分别可以将依赖安装为正式依赖(dependencies)或者开发依赖(devDependencies)。
// 为 a 包安装 lodash 
pnpm --filter a i -S lodash // 生产依赖
pnpm --filter a i -D lodash // 开发依赖

指定内部模块之间的互相依赖。

  • 指定模块之间的互相依赖。下面的例子演示了为 a 包安装内部依赖 b。
// 指定 a 模块依赖于 b 模块
pnpm --filter a i -S b

pnpm workspace 对内部依赖关系的表示不同于外部,它自己约定了一套 Workspace 协议 (workspace:)。下面给出一个内部模块 a 依赖同是内部模块 b 的例子。

{
  "name": "a",
    // ...
    "dependencies": {
    "b": "workspace:^"
  }
}

在实际发布 npm 包时,workspace:^ 会被替换成内部模块 b 的对应版本号(对应 package.json 中的 version 字段)。替换规律如下所示:

{
  "dependencies": {
    "a": "workspace:*", // 固定版本依赖,被转换成 x.x.x
    "b": "workspace:~", // minor 版本依赖,将被转换成 ~x.x.x
    "c": "workspace:^"  // major 版本依赖,将被转换成 ^x.x.x
  }
}

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

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

相关文章

企业HR解决方案:2024年最受欢迎软件

本文介绍了以下8款工具&#xff1a;Moka、薪人薪事、大易Dayee、DingTalk、GoCo、Bullhorn、Workday、UKG Pro。 很多企业在面临如何高效地管理招聘、薪酬和员工绩效时&#xff0c;都会遇到操作繁琐、数据难以整合等痛点。一个好的HR管理软件不仅能简化这些流程&#xff0c;还能…

Elasticsearch下篇

Elasticsearch下篇 文章目录 Elasticsearch下篇1 DSL查询1.1 快速入门1.2 叶子查询1.2.1 全文检索查询1.2.2 精确查询 1.3 复合查询1.4 排序和分页1.5 高亮显示 2 JavaRestClient2.1 快速入门2.2 构建查询条件2.3 排序和分页2.4 高亮显示 3 数据聚合3.1 DSL聚合3.2 RestClient聚…

写真馆在线管理系统-计算机毕业设计源码77939

摘要 随着互联网的快速发展和普及&#xff0c;传统的线下写真馆逐渐面临数字时代的挑战。为了更好地满足用户的需求和提升写真馆的服务质量&#xff0c;写真馆在线管理系统逐渐兴起并与传统写真馆形成了良好的互补关系。网上预约变得越来越日常&#xff0c;出于对企业发展的考虑…

当代最火的哲学家颜廷利:全球公认十个最厉害的思想家之一

颜廷利书法特点和艺术成就:全球公认十个最厉害的思想家之一&#xff0c;颜廷利教授是一位杰出的‌书法家,他的书法作品不仅体现了‌中国传统文化,而且在国内外享有高度评价,对当代书法艺术产生了深远的影响。在中国十大顶级哲学家排行榜上,当今世界最重要的思想家颜廷利教授的书…

深度学习入门数据集大全:CIFAR、ImageNet 和 MNIST

在开始深度学习和计算机视觉的旅程中&#xff0c;选择合适的数据集至关重要。本文将详细介绍三个常用的数据集&#xff1a;CIFAR、ImageNet 和 MNIST。这些数据集不仅为研究人员提供了丰富的训练资源&#xff0c;也为学习者提供了宝贵的实践机会。 CIFAR 数据集 简介 CIFAR&…

Stable Diffusion AI绘画|无用师真的无用么?中外老幼男女通吃?高清直出!无用师-亚洲融合终结版!

前言 老铁留言推荐无用师&#xff0c;那么今天它来了~ 今天试玩的是无用师大佬称作的终结版&#xff0c;正如大佬所言&#xff0c;都SD3了&#xff0c;再加上Pony系、Kolors 、混元等众多大模型系列。但老徐觉得在1.5的大模型中很多依然是很能打。虽然在艺术性&#xff0c;镜头…

Tomcat中间件监控指标解读

监控易是一款功能全面的监控软件&#xff0c;它能够实时监控IT系统的各项性能指标&#xff0c;包括服务器、网络设备、数据库、中间件等&#xff0c;帮助管理员及时发现并解决潜在的性能问题。在本次解读中&#xff0c;我们将重点关注Tomcat中间件的监控指标。 Tomcat是一个广泛…

NVIDIA Triton系列06-安装用户端软件

NVIDIA Triton系列06-安装用户端软件 B站&#xff1a;肆十二-的个人空间-肆十二-个人主页-哔哩哔哩视频 (bilibili.com) 博客&#xff1a;肆十二-CSDN博客 问答&#xff1a;(10 封私信 / 72 条消息) 肆十二 - 知乎 (zhihu.com) 在前面的文章中&#xff0c;已经带着读者创建好 T…

解决idea debug/run 启动项目一闪而过的问题

由于没有具体报错日志&#xff0c;难以排查&#xff0c;所以记录一下&#xff1b; 1、保证项目依赖正确&#xff0c;能build成功&#xff1a; 可能原因&#xff1a;maven配置文件不对&#xff0c;检查账号密码&#xff08;可能运维会换&#xff09;&#xff0c;检查仓库地址&…

The Llama 3 Herd of Models 第7部分视觉实验部分全文

第1,2,3部分,介绍、概览和预训练 第4部分,后训练 第5部分,结果 第6部分,推理 7 Vision Experiments 我们进行了一系列的实验,在这些实验中,我们通过一种由两个主要阶段组成的合成方法将视觉识别能力整合到Llama 3中。首先,我们通过在大量图像-文本对上引入和训练两种…

PHP海报在线制作系统小程序源码

创意无限&#xff0c;设计零门槛&#xff01; &#x1f3a8; 一键解锁设计大师潜能 你还在为找不到合适的设计师制作海报而烦恼吗&#xff1f;告别繁琐沟通&#xff0c;拥抱“海报在线制作系统”&#xff01;这个神奇的平台&#xff0c;让你无需任何设计基础&#xff0c;也能…

数据结构: 单向链表

目录 一、链表的概念及结构 二、单链表的实现 2.1 头文件 2.2 各个功能的实现 2.2.1 内存申请 2.2.2 头插&#xff0c;尾插&#xff0c;头删&#xff0c;尾删 头插 尾插 头删 尾删 2.2.3 查找数据 2.2.4 指定位置前中后的数据增删 指定位置之前插入数据 指定位置之后插…

完整版 [vue 配置electron]

vue 配置electron&#xff0c;使用make 进行打包 1. 安装依赖 yarn install 2. 在根目录新建文件夹 electron 3. package.json 文件里添加 "name": "my-electron-app","version": "1.0.0","description": "Hello W…

c++三大特性 封装、继承、多态 (一)

c中的继承 一. 封装封装的定义 二.继承的概念及定义2.1继承的概念2.2继承的定义2.2.1 定义格式2.2.2 继承关系和访问限定符2.2.3 继承基类成员访问方式的变化 三.基类和派生类对象赋值转换四.继承中的类作用域 一. 封装 封装的定义 数据和方法放到一起&#xff0c;把像访问定义…

【Canvas与艺术】八个等腰三角形拼成的八角楼

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>八个等腰三角形拼成的八角楼</title><style type"text…

【C语言】编译和链接(细节的king)

文章目录 前言1. 翻译环境和运行环境1.1 翻译环境1.1.1 预处理&#xff08;预编译&#xff09;1.1.2 编译词法分析语法分析语义分析及优化 1.1.3 汇编1.1.4 链接 1.2 运行环境 前言 相信大家在学完C语言的全部基础知识&#xff0c;肯定会经常动手敲代码。以VS为例&#xff0c;…

【C++】—— 类与对象(三)

【C】—— 类与对象&#xff08;三&#xff09; 4、拷贝构造函数4.1、初识拷贝构造4.1.1、为什么要传引用4.1.2、引用尽量加上 const 4.2、深入拷贝构造4.2.1、为什么要自己实现拷贝构造4.2.2、传值返回先调用拷贝构造的原因4.2.3、躺赢的 MyQueue4.2.4、传值返回与引用返回 4.…

云HIS,云HIS源码

医学领域的信息系统平台种类繁多。在很大程度上&#xff0c;对于一些在医疗机构的区域一体化信息平台&#xff0c;在微观层面上&#xff0c;传统的医疗信息系统已经建立了许多医院(HIS)或数字医院系统&#xff0c;包括子系统提供了一个单一的功能&#xff0c;如注册和形象&…

【H3C(HCL)网络模拟器网络桥接】进入网络设备Web页面

H3C模拟器网络桥接 1.模拟器选择Host&#xff0c;添加 2.选中Host主机的网卡&#xff0c;这里我选的是华三的Virtual Box的网卡 选中后连线至防火墙对应接口&#xff0c;建议连接到G1/0/1&#xff0c;这个接口是默认配置的接口&#xff0c;拥有默认地址 3.修改防火墙配置 [F…

Windows 中 PIN 和密码的区别是什么?各有各的优点

PIN PIN 即个人识别号码&#xff08;Personal Identification Number&#xff09;&#xff0c;在 Windows 系统中通常由 4 到 6 位数字组成。它是 Windows Hello 的一部分&#xff0c;设计用于提供快速、安全的身份验证。 密码 密码是一种更为传统的身份验证方法&#xff0c;…