如何使用 pnpm 实现前端 Monorepo项目管理

前言

随着软件开发项目变得越来越庞大和复杂,如何有效管理和维护代码库成为了一个重要的问题。一种流行的解决方案是 Monorepo,也就是在一个版本控制系统中管理所有的项目代码。

什么是 Monorepo

Monorepo 是一种项目代码管理方式,指单个仓库中管理多个项目,有助于简化代码共享、版本控制、构建和部署等方面的复杂性,并提供更好的可重用性和协作性。
React项目便是基于monrepo方式管理
react monorepo

什么是 Pnpm

pnpm 是一款快速、高效的 Javascript 包管理器。它的核心特点包括节省磁盘空间和更强的安全性。更重要的是,pnpm 支持 workspaces 功能,这使得它成为管理 monorepo 的工具选择。

配置步骤

1. 创建项目文件夹并且创建配置文件**pnpm-workspace.yaml**

在项目根目录下,创建一个名为 pnpm-workspace.yaml 的文件。这个文件可以帮助 pnpm 识别仓库的位置。

我们可以在 packages 设置中,指定哪些文件夹下的包是 workspace 的一部分

packages:- "apps/octopus-app-client"- "apps/octopus-console"

或者避免每个项目都要单独添加,可通过通配符的形式配置 workspace

packages:- 'apps/*'

2. 创建应用项目

monorepo 管理只是一种项目管理方式,最终有价值的部分还是我们的业务应用;例如我们可以将Web项目、NodeJS项目、组件库Lib项目等等相关的工程全部收敛到 apps目录下。

Untitled.png

3. 安装依赖

我们在项目根目录下运行 pnpm install。这一步会安装我们的所有包之间的依赖关系。

Untitled.png

4. 应用启动

执行完项目依赖安装后,各自应用都可以按照单独仓库的运行开发方式开发调试了。至此,我们实现了最简单的monorepo管理,也就是把多个应用项目放到了同一个大文件夹下管理,项目依赖统一管理,git版本统一管理,对于开发者而言,它就是一个整体。

但是,有时候我们还需要一些进阶的玩法,比如如何在业务项目中依赖 monorepo 中的组件库项目?如何在项目根路径运行应用的脚本?

进阶

1. 添加依赖包

如果你有一个 package 依赖于另一个 package,你可以使用 pnpm add 添加这个依赖。

例如,在 apps/app-web文件夹下运行 pnpm add @common/components@common/component 就会被添加到 app-web 的**package.json** 文件中。

Untitled.png

2. 运行所有项目的脚本

如果启动项目需要运行所有应用项目的 start脚本,一种比较笨的方式是在每个项目的路径下运行启动脚本,pnpm也提供了一种便捷的方式。

使用 pnpm recursive 命令在所有包中运行特定脚本。例如,**pnpm recursive s**tart 命令将会所有包中运行 start 脚本。

总结

monorepo 是大型项目的常用的管理方式,虽然它也有不少缺点,比如代码仓库过大、权限不好管理、构建部署消耗资源等等,但是它也解决了不少大型项目的痛点,比如代码复用、多项目协同开发、依赖管理等问题。

pnpm 是前端项目最常用的依赖管理工具,并且它还提供了**workspace**管理的能力,那么基于pnpm来管理monorepo项目是一种不错的解决方案。

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

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

相关文章

PHP-8.1.0-dev 后门命令执行漏洞复现_zerodiumvar_dump

0x00漏洞描述 PHP 8.1.0-dev 版本在2021年3月28日被植入后门,但是后门很快被发现并清除。当服务器存在该后门时,攻击者可以通过发送User-Agentt头来执行任意代码。 0x01影响范围 PHP 8.1.0-dev 0x02环境搭建 1、本次环境搭建使用vulhub中的docker环…

PPT中加入页码

PPT中加入页码 文章目录 简单版本样式更改 简单版本 PPT中插入页码,基础的就是在“插入”选项卡中单机“幻灯片编号”即可 样式更改 然而,就像我们做幻灯片不满足于白底黑字一样,页码也总不能是默认的样式。 比如,在页码下面…

2023年全国省市区县行政区划矢量数据(含10段线)

2023年,中国地图面貌发生了重大变化,领土面积由960万平方公里扩大到1045万平方公里,九段线改为了十段线。 因此在使用地图的时候,特别是做全国的地图的时候,一定需要最新的行政界限,今天就将最新的省市县行…

在Vue3中使用qrcode库实现二维码生成

本文主要介绍在Vue3中使用qrcode库实现二维码生成的方法。 目录 一、基础用法实现二、toDataURL()方法三、toCanvas()方法四、create()方法五、QRCodeRenderersOptions()方法 在Vue3中实现二维码生成需要使用第三方库来处理生成二维码的逻辑。常用的库有 qrcode和 vue-qrcode…

使用 pytest.ini 文件控制输出 log 日志

一、前置说明 pytest.ini 文件中可以配置参数来控制 pytest 的运行行为,其存放路径要求与 conftest.py 一样。 项目根目录project_root/ ├── pytest.ini ├── tests/ │ └── test_demo.py以test开头的测试子目录project_root/ ├── tests/ │ ├── pytest.in…

c# OpenCvSharp透视矫正六步实现透视矫正(八)

透视矫正,引用文档拍照扫描,相片矫正这块。 读取图像Cv2.ImRead();预处理(灰度化,高斯滤波、边缘检测)轮廓检测(获取到最大轮廓)获取最大面积轮廓的四个顶点标识最小矩形坐标透视矫正显示 完整代码 // 1、…

Linux系统安装及管理

目录 一、Linux应用程序基础 1.1应用程序与系统命令的关系 1.2典型应用程序的目录结构 1.3常见的软件包装类型 二、RPM软件包管理 1.RPM是什么? 2.RPM命令的格式 2,1查看已安装的软件包格式 2.2查看未安装的软件包 3.RPM安装包从哪里来? 4.挂…

web前端项目-七彩夜空烟花【附源码】

web前端项目-七彩动态夜空烟花【附源码】 本项目仅使用了HTML,代码简单,实现效果绚丽,且本项目代码直接运行即可实现,无需图片素材,接下来让我们一起实现一场美丽的烟花秀叭 运行效果:鼠标点击和移动可控制…

理解SpringMVC的工作流程

组件 前置控制器 DispatcherServlet。 映射控制器 HandlerMapping。 处理器 Controller。 模型和视图 ModelAndView。 视图解析器 ViewResolver。 工作流程 spring mvc 先将请求发送给 DispatcherServlet。 DispatcherServlet 查询一个或多个 HandlerMapping,找到…

jmeter-set up先登录获取token,再测试

一、何为setup 一种特殊类型的线程组,可用于执行预测试操作;简单来讲就是执行测试线程组前,先执行setup 作用 例如前面,我们说到的,压测之前只用JMeter调用业务接口造数或者通过JDBC操作数据库造数,可以放…

网络安全法规和模型

基础 ISO信息安全:为数据处理系统建立和采取技术、管理的安全保护,保护计算机硬件、软件、数据不因偶然的或恶意的原因而受到破坏、更改、泄露 信息安全属性: CIA三元组:保密性、完整性、可用性 其他属性:真实性、不…

鸿蒙开发中的坑(持续更新……)

最近在使用鸿蒙开发时,碰到了一些坑,特做记录,如:鸿蒙的preview不能预览,轮播图组件Swiper使用时的问题,console.log() 打印的内容 一、鸿蒙的preview不能预览 首先,只有 ets文件才能预览。 其…

Spring系列学习二、Spring框架的环境配置

Spring框架的环境配置 一、Java环境配置二、 Spring框架的安装与配置三、Maven与Gradle环境的配置四、IDE环境配置(Eclipse与IntelliJ IDEA)五、结语 一、Java环境配置 所有编程旅程总是得从基础开始,如同乐高积木大作的基座,首先…

408数据结构错题知识点拾遗

408相关: 408数据结构错题知识点拾遗 408计算机网络错题知识点拾遗 对于数据结构的学习,个人认为要对概念性的东西进行理解,特别是树的性质、图的相关性质和考察的相应算法。应用题强化的话,对于每一章节尾的应用小节&#xff0c…

蓝桥杯c/c++程序设计——冶炼金属

冶炼金属 问题描述 小蓝有一个神奇的炉子用于将普通金属 O 冶炼成为一种特殊金属 X。这个炉子有一个称作转换率的属性 V,V 是一个正整数,这意味着消耗 V 个普通金属 O 恰好可以冶炼出一个特殊金属 X,当普通金属 O 的数目不足 V 时&#xff0…

Python - 深夜数据结构与算法之 Divide Conquer Backtrack

目录 一.引言 二.分治与回溯简介 1.Divide & Conquer 分治 2.BackTrack 回溯 三.经典算法实战 1.Combination-Of-Phone [17] 2.Permutations [46] 3.Permutations-2 [47] 4.Pow-X [50] 5.N-Queen [51] 6.Combinations [78] 7.Sub-Sets [78] 8.Majority-Elemen…

数组基础及相关例题

目录 1.一维数组的初始化 2.二维数组的初始化 3.字符数组 1.puts 2.gets 3.strcat 4.strcpy 5.strcmp 6.strlen ​编辑 7. strlwr与strupr 易错习题 1 2 3 4 5 6 1.一维数组的初始化 2.二维数组的初始化 注意 第一维的长度不用指定,第二维的…

方舟开发框架(ArkUI)概述

目录 1、基本概念 2、两种开发范式 3、开发框架的特性 4、UI开发(ArkTS声明式开发范式)概述 4.1、特点 4.2、整体架构 4.3、开发流程 方舟开发框架(简称ArkUI)为HarmonyOS应用的UI开发提供了完整的基础设施,包…

C# 通过SharpCompress.Archives.Rar解压RaR文件

/// <summary>/// 解压一个Rar文件/// </summary>/// <param name"RarFile">需要解压的Rar文件&#xff08;绝对路径&#xff09;</param>/// <param name"TargetDirectory">解压到的目录</param>/// <param name&…

基于SSM的学生成绩管理系统2.0

基于SSM的学生成绩管理系统2.0 一、系统介绍二、功能展示1.项目骨架2.成绩信息列表3.课程信息列表4.添加学生信息 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目名称&#xff1a;基于SSM的学生成绩管理系统2.0 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Jav…