从0开始使用pnpm构建一个Monorepo方式管理的demo

最新推荐文章于 2024-07-03 13:56:40 发布
最新推荐文章于 2024-07-03 13:56:40 发布
阅读量658 收藏 1
点赞数
文章标签： 前端 javascript npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pfourfire/article/details/126532310
版权
本文介绍如何使用pnpm创建一个Monorepo管理的项目。首先解释了Monorepo的概念及其好处，以及pnpm的特点。接着通过一步步操作，演示了创建Monorepo项目的过程，包括初始化、配置工作空间、创建子项目、安装依赖和项目间引用。最后，展示了在packageA中引用packageB的实际应用。
摘要由CSDN通过智能技术生成

🍍 写在前面

Monorepo这个词你应该不止一次听说了，像Vue3、Vite、ElementPlus等优秀开源项目都是使用Monorepo的方式管理项目，且这里说到的这几个项目都是采用pnpm作为包管理工具。

这篇文章就使用pnpm构建一个简单的Monorepo方式管理的项目。

🍊 什么是Monorepo？什么是pnpm？

Q：什么是Monorepo？

A：Monorepo是一种项目管理方式，就是把多个项目放在一个仓库里面，可以参考神三元大佬的一篇文章：现代前端工程为什么越来越离不开 Monorepo?，这篇文章中介绍了Monorepo的概念、收益以及MulitRepo的弊端。

Q：什么是pnpm？

A：pnpm就是一个包管理工具，原生支持Monorepo，比npm和yarn更快一些，其他的可以参考官网和神三元大佬的另一篇文章：为什么现在我更推荐 pnpm 而不

最低0.47元/天 解锁文章
姑老爷呀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
monosample：使用pnpm并跨多个项目共享一个公共库的示例Monorepo存储库
02-03
单样本这是使用monorepo样品而位与包重载它表明你是多么容易创建monorepo设置与 每个软件包（ packages/** ）都有自己的自述文件，以解释如何在特定软件包中工作安装首先安装 npm i -g pnpm 然后跑pnpm recursive ...
Pnpm实现Monorepo风格项目搭建
随便写写
06-19 1425
Pnpm实现Monorepo风格项目搭建
带你了解并实践monorepo和pnpm，绝对干货！熬夜总结！
最新发布
2401_83384536的博客
07-03 1026
简单来说就是，将多个项目或包文件放到一个git仓库来管理。目前比较广泛应用的是yarn+lerna的方式实现monorepo的管理。一个简单的monorepojs复制代码| ├── pkg1| ├── pkg2之所以应用monorepo，主要是解决以下问题：代码复用的问题开发流程统一高效管理多项目/包最简单的方法其实就是在package.json里做配置，在打包的时候我们直接取这里的配置即可，比如我们在包toolsjson复制代码。
pnpm搭建monorepo环境
UncleMao的博客
05-16 704
pnpm搭建monorepo环境
pnpm — Monorepo
Sun~Neo
09-09 642
pnpm + Monorepo
pnpm + monorepo架构思想小试牛刀
红岸基地
06-16 1171
今天要写的是关于一种前端全新架构的方式，monorepo这是目前相对来讲比较新的一种前端架构，整好趁着最近在学，就利用这个平台记录一下学习的一个过程，上一篇文章更新的是react，后面也会一样更新，今天废话不多说了，我们开始今天的学习。
monorepo-lerna-pnpm:全新monorepo = lerna + pnpm构建体验
04-05
将Lerna和pnpm结合使用，可以创建一个高效、灵活的Monorepo构建流程。Lerna负责管理各个包的版本和发布，而pnpm则提供快速的依赖安装和节省磁盘空间的优势。在这样的环境下，开发团队可以轻松地进行跨包的代码共享，...
vue3+vite+monorepo+qiankun+pnpm+eslint+prettier 框架
08-03
vue3+vite+monorepo+qiankun+pnpm+eslint+prettier vue3+vite+monorepo+qiankun+pnpm+eslint+prettier vue3+vite+monorepo+qiankun+pnpm+eslint+prettier vue3+vite+monorepo+qiankun+pnpm+eslint+prettier vue3+...
github-actions-setup-pnpm:安装PNPM软件包管理器
04-07
安装PNPM软件包管理器。 输入项 version 需要安装的PNPM版本。 dest 可选的PNPM文件存储位置。 bin_dest 可选其中存储的可执行文件（ pnpm和pnpx命令）。 registry 可选注册表，用于从中下载PNPM。 产出 dest ...
pnpm-monorepo-typescript-project-references
04-11
尝试用一个旧项目进行此操作，实际上，即使是根目录文件夹也很难拆分项目。 我发现了很多循环依赖，并且没有办法用“引用”来描述循环依赖（请让我知道是否应该更正此语句） 单一存储库，无链接（lerna） 所有...
基于 pnpm 的云函数本地 monorepo 项目管理
qq_23935353的博客
09-01 478
这是一篇关于如何利用 pnpm 这个依赖管理工具进行对微信小程序的云函数进行本地 monorepo 项目管理的文章。
pnpm 实现 Monorepo 一些操作命令
dizuncainiao的博客
04-28 1177
pnpm workspace 相关操作命令~
使用 pnpm 搭建 monorepo 项目
子洋 Blog
03-17 2289
在软件开发中，随着项目的逐渐庞大和复杂化，管理多个相关联的代码库就变成了一项挑战。这时，Monorepo（单体代码仓）应运而生，它能有效管理多个项目或模块。Monorepo 是指在一个单一的版本控制系统仓库中管理多个模块/项目的策略。统一的工作流程和工具链：整个仓库的项目可以共享构建，测试，部署等流程。更容易的代码共享和重用：不同项目之间共享代码变得直接和高效。依赖管理：确保各个模块间依赖的版本一致性。原子性提交和版本控制：可以在单个提交中跨多个项目进行更改，简化版本跟踪。
用 pnpm 管理 Monorepo 项目
fk1012的博客
04-11 1186
快速的，节省磁盘空间的包管理工具。
pnpm 管理 monorepo
qq_38916811的博客
07-21 1928
Monorepo是项目管理代码的方式之一，指的是一个大项目中包含了需要小项目或者模块，大概的样子。
pnpm创建vite + vue + ts项目
m0_62362977的博客
06-30 2333
pnpm创建vite+ts+vue项目，过程及遇到的坑
pnpm+vite+ts+vue3创建项目
xqgerogia的博客
06-16 594
注意: Vite 需要 Nodejs 版本 14.18+，16+，然而，有些模要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升银伤的 Node 版本。注意: 输入命令后根据提示选择，项目是ts所以必选typescript。提示: 可以使用nvm来管理node。
pnpm monorepo的技术选型临界点（Critical adoption）
幻日のヨハネ
11-27 1966
前言 直入正题。之所以要聊聊 pnpm 的技术选型临界点 Critical adoption ，得益于一段时间以来在 pnpm 上的丰富实践和赋能落地积累的经验。 讲道理从 BD douyin 和 infra 团队相关开发者开始在国内推行和宣传，介入 pnpm 社区之后我也是对 pnpm 开始抱着探索的态度。 当然经过一段时间的实践考究，发现 pnpm 只能是属于功大于过，下面我们简单聊聊。 正文 本文的主题是 pnpm monorepo 实践，但是聊之前，我们先捋一捋其他包管理器 npm / yarn ，
monorepo pnpm react 如何
05-16
首先，让我们解释一下这些术语的含义： - Monorepo：将多个相关项目放在同一个代码库中的做法。 - PNPM：一种 Node.js 包管理器，类似于 npm 和 yarn。 - React：一个流行的 JavaScript 库，用于构建用户界面。 现在，我们来看一下如何在 Monorepo 中使用 PNPM 和 React： 1. 创建一个 Monorepo 项目，将所有相关项目放在同一个代码库中。 2. 在根目录下创建一个 `package.json` 文件，并添加以下内容： ``` { "private": true, "workspaces": [ "packages/*" ] } ``` 这个配置告诉 PNPM，这是一个 Monorepo 项目，并且它应该将所有 `packages/*` 目录下的包视为一个工作空间。 3. 在 `packages/` 目录下创建一个新的 React 应用程序。你可以使用 `create-react-app` 工具来快速创建一个新项目： ``` npx create-react-app my-app ``` 4. 确保在 `packages/my-app` 目录下有一个 `package.json` 文件，并添加以下内容： ``` { "name": "my-app", "version": "0.1.0", "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" }, "devDependencies": { "react-scripts": "^4.0.3" } } ``` 这个配置告诉 PNPM，这个包依赖于 React 和 React DOM 库，并且需要从 `react-scripts` 包中获取开发依赖项。 5. 在 `packages/my-app` 目录下运行以下命令，安装依赖项： ``` pnpm install ``` 6. 在 `packages/my-app` 目录下运行以下命令，启动 React 应用程序： ``` npm start ``` 这就是在 Monorepo 中使用 PNPM 和 React 的基本步骤。你可以使用相同的方法添加其他包和应用程序，并使用 PNPM 管理它们的依赖项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值