如何使用 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项目是一种不错的解决方案。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

internet download manager 6.42怎么删除卸载,2024最新idm卸载不干净怎么解决

internet download manager 6.42简称为IDM,这是一款非常好用的下载软件,很多小伙伴都在使用。如果后续我们不再需要使用该软件,小伙伴们知道具体该如何将其卸载掉吗,其实卸载方法是非常简单的,只需要进行几个非常简单的…

分布式核心技术之分布式锁

文章目录 为什么要使用分布锁?分布式锁的三种实现方法基于数据库实现分布式锁基于缓存实现分布式锁基于 ZooKeeper 实现分布式锁知识扩展:如何解决分布式锁的羊群效应问题? 三种实现方式对比 分布式互斥,领悟了其“有你没我&#…

绝地反击,不做背锅侠!

那么作为运维人员,如何摆脱以上背黑锅的尴尬局面呢?堡垒机当然是破解此局面的绝杀大招。 1.统一登录入口 提供统一入口,集中管理和分配账户密码、所有运维人员只能登录堡垒机才能访问服务器,梳理“人与服务器”之间的关系&#…

新版Microsoft Edge和google chrome谁才是浏览器的王者?

Microsoft Edge是一款现代化的浏览器,它拥有众多功能和强大的性能,为用户带来更加流畅的浏览体验。 Edge最近推出了分屏功能,支持一个窗口同时显示两个选项卡,这可以大大提高生产力和多任务处理能力。 一、结合平时的使用经历&…

2024 年网络安全展望:未来是什么?

为了建立强大的网络安全计划,组织必须首先了解整体威胁环境不断变化的性质。 人工智能在成为安全团队的帮助之前,将为网络犯罪分子带来巨大的福音。 网络犯罪分子和不良行为者将受益于先进人工智能工具的广泛部署,然后他们的目标才能建立人…

【计算机网络】—— 奈氏准则和香农定理

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言:"没有罗马,那就自己创造罗马~" 目录 失真 - 信号的变化 ​编辑影像失真的因素: ​编辑信道带宽: 码间串扰…

使用Go语言编写基本的HTTP服务器

你是否曾经想过自己动手编写一个Web服务器?那种可以接收来自全世界的请求,然后回应一些“Hello, World!”之类的消息的服务器?如果你有这个想法,那么Go语言就是你的最佳伙伴。让我们一起踏上这段奇妙的探险之旅吧! 首…

Docker部署Nexus Maven私服并实现远程访问Nexus界面

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 文章目录 1. Docker安装Nexus2. 本地访问Nexus3. Linux安装Cpolar4. 配置Nexus界面公网地址5. 远程访问 Nexus界面6. 固定N…

【HarmonyOS开发】探究Hap与App包的结构与区别

1、Hap与App包的区别 OpenHarmony 可以进行两种形式(Hap和App)的打包,HAP是用于本地调试的,APP包是用于上架发布的。 根据不同的设备类型,一个APP包可以包含多个HAP包。 下面从两个角度进行分析 1.1 编译构建角度 编…

百度Apollo五步入门自动驾驶:Dreamview与离线数据包分析(文末赠送apollo周边)

🎬 鸽芷咕:个人主页 🔥 个人专栏:《linux深造日志》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! ⛳️ 粉丝福利活动 ✅参与方式:通过连接报名观看课程,即可免费获取精美周边 ⛳️活动链接&#xf…

matlab设置colorbar标题的两种方式

%% 第一种 figure; A rand(3,4,3); A1 A(:,:,1); A2 A(:,:,2); A3 A(:,:,3); contourf(A1,A2,A3,30); colormap(jet);colorbar; my_handlecolorbar; my_handle.Label.String depth/km; my_handle.Label.FontSize 15;%% 第二种 figure; A rand(3,4,3); A1 A(:,:,1); A2 …

FinGPT:金融大语言模型 | 开源日报 No.127

verdaccio/verdaccio Stars: 15.0k License: MIT Verdaccio 是一个轻量级的 Node.js 私有代理仓库。 以下是 Verdaccio 的核心优势和关键特性: 零配置:无需复杂设置即可快速启动私有 npm 注册表。本地化管理:通过内置小型数据库进行简单而…

【STM32单片机】电子木鱼设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用STM32F103/F407单片机控制器,TFTLCD触摸屏、蜂鸣器等。 主要功能: 系统运行后,TFTLCD显示画面,可触摸木鱼区域,功德计数加1&#xf…

【操作系统】探究进程奥秘:显示进程列表的解密与实战

​🌈个人主页:Sarapines Programmer🔥 系列专栏:Linux专栏:《探秘Linux | 操作系统解密》⏰诗赋清音:月悬苍穹泛清辉,梦随星河徜徉辉。情牵天际云千层,志立乘风意自飞。 ​ 目录 &a…

2023年国赛高教杯数学建模E题黄河水沙监测数据分析解题全过程文档及程序

2023年国赛高教杯数学建模 E题 黄河水沙监测数据分析 原题再现 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变化和人民生活的影响,以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾等方面都具有重要的理论指导…

Visual Studio2022配置ReSharper C++ 常用设置

如需安装免费的可以在下面留言,看到即回复 文章目录 Visual Studio2022配置ReSharper C 常用设置配置Visual Studio2022,使其能够按回车进行补全配置ReSharper C 设置自动弹出配置ReSharper C 的快捷键ReSharper C 去掉注释拼写使用中文注释 如何关闭新版…

C语言中函数调用和嵌套

函数是C语言的基本组成元素 函数调用 根据函数在程序中出现的位置有下列三种函数调用方式: 将函数作为表达式调用 将函数作为表达式调用时,函数的返回值参与表达式的运算,此时要求函数必须有返回值 int retmax(100,150); 将函数作为语句…

Vue使用Element表格Table设置所有单元格内容居中对齐

为单个列的单元格设置居中对齐代码如下&#xff1a; <el-table-columnprop"productInfo.productName"label"中文名"width"100"align"center"></el-table-column>需要设置el-table-column标签里面的属性设置为align"c…

掌握JWT:解密身份验证和授权的关键技术

JSON Web Token 1、什么是JWT2、JWT解决了什么问题3、早期的SSO认证4、JWT认证5、JWT优势6、JWT结构Header 标头Payload 负载 Signature 签名 7、代码实现添加依赖生成Token认证token 8、工具类9、JWT整合Web10、拦截器校验11、网关路由校验12、解决多用户登录的问题13、客户端…

积水监测识别摄像机

积水监测识别摄像机是一种利用摄像技术来监测和识别道路、桥梁、隧道等区域积水情况的设备&#xff0c;它可以有效地提供实时的积水监测信息&#xff0c;帮助交通部门和相关单位及时采取应对措施&#xff0c;确保道路交通的畅通和人员安全。 积水监测识别摄像机通过安装在适当位…