pnpm monorepo 联调方案

最新推荐文章于 2025-06-17 11:43:43 发布

原创

最新推荐文章于 2025-06-17 11:43:43 发布 · 1.1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #pnpm #monorepo

在我最近的工作项目中，我采用了 pnpm monorepo 来管理多个基础库的开发。这种方式虽然在项目组织上提供了便利，但在调试过程中却给我带来了不小的挑战。

当项目中的库出现 bug 时，定位问题的源头变得异常困难。我最初的想法是，由于 pnpm monorepo 环境下库之间存在 monorepo 其他库的依赖，传统的调试方法似乎难以应对。特别是处理 workspace:* 这样的依赖声明时，我感到无从下手。

起初，我没有深入研究，而是选择了最直接的方法来应对问题：

直接在项目中定位可能的错误点，并尝试复现问题场景。
在基础库中对发现的 bug 进行修复。
修复后发布新版本，并在项目中验证修复效果。

这个过程不仅繁琐耗时，而且往往不能保证问题得到彻底解决。

调试

在 pnpm 的官网上看到了 pnpm link，了解了一下发现，原来也是可以实现联调的。

使用

`pnpm link`

pnpm link 和 npm link 的使用是一样的，用于链接指定的文件夹。

# 找到需要联调的库，安装依赖
cd ~/packages/core
pnpm install

# 来到项目中，链接这个库即可
cd ~/projects/my-project
pnpm link ~/packages/core

`pnpm`

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JinSoooo

关注关注

30
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

基于yalc的本地组件库联调

SCUhzs

07-16

593

基于yalc的本地组件库联调

Vite: 模块联邦实现跨应用代码共享

Wang的专栏

06-30

1092

在 2020 年上半年，Webpack 提出了一项非常激动人心的特性—— Module Federation (译为模块联邦 )，这个特性一经推出就获得了业界的广泛关注，甚至被称为前端构建领域的 Game Changer。实际上，这项技术确实很好地解决了多应用模块复用的问题，相比之前的各种解决方案，它的解决方式更加优雅和灵活。

参与评论您还未登录，请先登录后发表或查看评论

pnpm的安装与使用

sunddy_x的博客

05-07

7775

项目初衷当使用 npm 或 Yarn 时，如果你有 100 个项目使用了某个依赖（dependency），就会有 100 份该依赖的副本保存在硬盘上。而在使用 pnpm 时，依赖会被存储在内容可寻址的存储中，所以：如果你用到了某依赖项的不同版本，只会将不同版本间有差异的文件添加到仓库。例如，如果某个包有100个文件，而它的新版本只改变了其中1个文件。那么 pnpm update 时只会向存储中心额外添加1个新文件，而不会因为仅仅一个文件的改变复制整新版本包的内容。所有文件都会存储在硬盘上的某一

pnpm实战教程

IT飞牛

09-14

5636

使用 npm 时，依赖每次被不同的项目使用，都会重复安装一次。而在使用 pnpm 时，依赖会被存储在内容可寻址的存储中。

pnpm link用法

junjiahuang的博客

06-25

1380

场景：有a项目，b项目。a作为依赖包，b项目引入a。

Mono Repo第二弹

Song_dui_dui的博客

03-21

2518

mono repo的依赖管理以及版本管理工具lerna和changeset的使用

npm link 与 pnpm link 的用法以及不同之处

球球不吃虾WHR2349博客

06-28

3332

npm和pnpm是JavaScript生态系统中两个主要的包管理器，它们都用于安装、管理和共享Node.js模块。下面从多个维度对比npm与pnpm，并详细说明npm link和pnpm link的异同及用法。

多个项目相互引用

最新发布

08-21

基于Vue3与TypeScript的现代化管理面板

Vue-Vben-Admin 是一个现代化的 Vue 管理后台系统，基于 Vue3、TypeScript、Vite 和 Monorepo 架构构建，同时集成了 Shadcn UI 组件库，旨在提供高性能、高可维护性且具备良好开发体验的企业级前端解决方案。...

npm/pnpm软链接

Vivien_CC的博客

02-20

2178

在前端开发的过程中，高效管理项目依赖是提升开发效率的关键。npm（Node Package Manager）和 pnpm（Performant npm）作为常用的包管理工具，它们的软链接功能为开发者提供了灵活且强大的依赖管理方式。下面我们将深入探讨 npm 和 pnpm 软链接的使用方法，并通过具体的代码示例来详细说明。

pnpm link 本地发布与安装npm库

个人博客

05-05

1930

其他需要使用这个npm库的项目中，根据package.json中name字段，安装npm库。进入npm库package.json同级目录，运行命令，创建软链接，本地发布npm库。

pnpm monorepo的技术选型临界点（Critical adoption）

幻日のヨハネ

11-27

2189

前言直入正题。之所以要聊聊 pnpm 的技术选型临界点 Critical adoption ，得益于一段时间以来在 pnpm 上的丰富实践和赋能落地积累的经验。讲道理从 BD douyin 和 infra 团队相关开发者开始在国内推行和宣传，介入 pnpm 社区之后我也是对 pnpm 开始抱着探索的态度。当然经过一段时间的实践考究，发现 pnpm 只能是属于功大于过，下面我们简单聊聊。正文本文的主题是 pnpm monorepo 实践，但是聊之前，我们先捋一捋其他包管理器 npm / yarn ，

HOW - 项目 link 本地开发库进行调试

weixin_58540586的博客

04-16

865

你现在有一个本地 Module（比如自己实现的），想要在另一个项目中。

【踩坑】本地软链接pnpm link 没生效

Vivien_CC的博客

06-11

314

今天在本地调试组件库，用软链接在项目中直接使用，各种方法都尝试了，怎么也不生效，最后一顿操作好起来了，记录一下。一、手动删掉 node_module 文件夹下的组件库（因为本来我们使用npm下载下来的）三、重新链接 pnpm link --global <组件库名>二、用命令 pnpm uninstall <组件库名> 删干净。

pnpm link如何不踩坑

hhhhhy

06-17

573

pnpm link轻松连接！

pnpm的高级使用

weixin_38441229的博客

08-10

1848

Workspaces支持：如果你的项目使用了Monorepo结构，即包含多个相关的子项目，你可以使用pnpm的Workspaces功能来管理它们。默认情况下，它会使用计算机的最大线程数来并行安装依赖项。冻结依赖：pnpm支持将依赖项锁定到精确的版本，以确保在不同环境中安装相同的依赖项版本。命令可以将一个本地目录链接到全局依赖中，使得你可以在项目中以本地包的形式使用它。这可以帮助你清理掉不再需要的包，减少项目的体积。这可以帮助你释放磁盘空间，并清除旧的或不再使用的包。自动清除未使用的依赖项：使用。

npm、yarn、pnpm的优劣与pnpm的原理与使用

GMLGDJ的博客

03-09

3496

使用 npm 时，依赖每次被不同的项目使用，都会重复安装一次。而在使用 pnpm 时，依赖会被存储在内容可寻址的存储中，所以： • 如果你用到了某依赖项的不同版本，只会将不同版本间有差异的文件添加到仓库。例如，如果某个包有100个文件，而它的新版本只改变了其中1个文件。那么 pnpm update 时只会向存储中心额外添加1个新文件，而不会因为仅仅一个文件的改变复制整新版本包的内容。 • 所有文件都会存储在硬盘上的某一位置。当软件包被被安装时，包里的文件会硬链接到这一位置，而不会占用额外的磁盘空间。

带你了解并实践monorepo和pnpm，绝对干货！熬夜总结！

LuckyWinty的博客

07-25

2516

点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群为什么使用monorepo什么是monorepo简单来说就是，将多个项目或包文件放到一个git仓库来管理。目前比较广泛应用的是yarn+lerna的方式实现monorepo的管理。一个简单的monorepo的目录结构类似这样：js 复制代码 ├──packages |├──pkg1 ||├──package.js...

pnpm的使用

热门推荐

qq_27971677的博客

05-12

1万+

npm init 生成，如果要一键快速生成，需要增加 -y 参数 npm init -y 来生成。查看全局安装的依赖：pnpm list --global**，**别名 pnpm ls --g。因此，您在磁盘上节省了大量空间，这与项目和依赖项的数量成正比，并且安装速度要快得多！当软件包被被安装时，包里的文件会硬链接到这一位置，而不会占用额外的磁盘空间。使用 npm、Yarn 时，依赖每次被不同的项目使用，都会重复安装一次。如果你用到了某依赖项的不同版本，只会将不同版本间有差异的文件添加到仓库。

pnpm monorepo架构

03-08

### pnpm 在 Monorepo 架构中的使用方法在 monorepo 构架中，pnpm 提供了强大的工具来管理多个包之间的依赖关系以及优化构建流程。通过使用 `workspace` 功能，可以有效地管理和维护大型项目。为了设置基于 pnpm 的 monorepo 项目，需先确认已安装 pnpm[^2]： ```bash npm install -g pnpm ``` 创建一个新的 monorepo 并初始化工作区配置文件 `pnpm-workspace.yaml`: ```yaml packages: - 'packages/*' ``` 此配置指定了哪些目录下的子模块会被视为独立的工作空间成员[^3]。对于每个单独的应用程序或库，在其根目录下定义各自的 `package.json` 文件，并利用 pnpm 命令来进行开发环境搭建、脚本执行等操作。例如启动应用程序可采用如下命令[^1]: ```bash pnpm run start ``` 当涉及到跨包依赖时，推荐使用 TypeScript project references 来提高编译效率并简化多包间的引用逻辑。另外，借助于 lerna 或其他类似的工具可以帮助更好地处理版本发布等问题；而 yarn workspaces 则提供了另一种实现方式用于对比不同方案的选择。 #### 配置示例以下是典型的 monorepo 结构布局： ``` my-monorepo/ ├── packages/ │ ├── app-1/ │ │ └── package.json │ ├── lib-a/ │ │ └── tsconfig.json └── pnpm-workspace.yaml ``` 其中 `app-1/package.json` 可能包含这样的内容： ```json { "name": "@myorg/app-1", "version": "0.0.1", "scripts": { "start": "node ./dist/index.js" }, "dependencies": { "@myorg/lib-a": "^0.0.1" } } ``` 同时，在 `lib-a/tsconfig.json` 中指定与其他项目的关联： ```json { "compilerOptions": {}, "references": [ { "path": "../app-1" } ] } ``` 这样就完成了基本的 monorepo 设置过程，能够支持高效的团队协作与持续集成/部署(CI/CD) 流程。