pnpm monorepo 联调方案

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

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

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

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

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

调试

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

使用

pnpm linknpm link 的使用是一样的,用于链接指定的文件夹。

Shell 复制代码
# 找到需要联调的库,安装依赖
cd ~/packages/core
pnpm install

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

pnpm link --global 的话,是将库链接到全局的 node_modules

然后再另一个需要使用的库或者项目中通过 pnpm link --global <pkg> 引用即可。

Shell 复制代码
# 找到需要联调的库,安装依赖,然后进行 link
cd ~/packages/core
pnpm install
pnpm link --global

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

完成调试后,可以使用 unlink 命令来取消链接,用法和 pnpm link 相同。

Shell 复制代码
pnpm unlink <dir>
pnpm unlink --global
pnpm unlink --global <pkg>

说明

对于库中存在引用其他库的情况下(workspace:* ):

pnpm link 会发出警告,但 pnpm 会自动处理这些依赖,确保所有链接的库都能正确解析其依赖项。

我们可以看一下。

在你 pnpm link --global 的时候,pnpm 会进行警告。

而在项目中链接库后,在 node_modules 可以看出来,pnpm 帮我们已经处理好了。

pnpm 会对特殊的引用库(workspace:* )创造软链,链接到 pnpm monorepo 中的对应库中。

所以,本质上说,其实和 link 单个库是一样的,只是 pnpm 帮我们做了些额外的依赖处理。

多库联调

当然,你甚至也可以直接同时 link 多个库进行调试。这样可以实现多个依赖的库之间一起进行联调了。

以上图为例,现在要联调 coredesigner 两个库,其中 designer 依赖了 core,两个库先分别 link

Shell 复制代码
# 分别在两个库中执行
pnpm i
pnpm link --global

# 在项目中执行
pnpm link --global core
pnpm link --global designer

其实很简单,通过这种方式,coredesigner 都被链接到了全局的 node_modules 中。

原理

现在 coredesigner 都链接在了全局的 node_modules 中,而项目中其实也是软链到了全局 node_modules 中。

我们再回到 desinger 库,它依赖了 corepnpm 会帮我们软链到的 core ,而此时项目的 core 是软链到全局的 node_modules

尽管两者 core 最终都是链接到基础库中,但链接的路径是不一样的。

  • 链接库存在特殊的引用库(workspace:* )时,pnpm 会帮我们直接软链到其库里。
  • link 的方式,是软链到全局 node_modules 中,再软链到基础库中。

参考链接

  1. pnpm link | pnpm
相关推荐
蟾宫曲1 小时前
在 Vue3 项目中实现计时器组件的使用(Vite+Vue3+Node+npm+Element-plus,附测试代码)
前端·npm·vue3·vite·element-plus·计时器
秋雨凉人心1 小时前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
liuxin334455662 小时前
学籍管理系统:实现教育管理现代化
java·开发语言·前端·数据库·安全
qq13267029402 小时前
运行Zr.Admin项目(前端)
前端·vue2·zradmin前端·zradmin vue·运行zradmin·vue2版本zradmin
魏时烟3 小时前
css文字折行以及双端对齐实现方式
前端·css
2401_882726484 小时前
低代码配置式组态软件-BY组态
前端·物联网·低代码·前端框架·编辑器·web
web130933203984 小时前
ctfshow-web入门-文件包含(web82-web86)条件竞争实现session会话文件包含
前端·github
胡西风_foxww4 小时前
【ES6复习笔记】迭代器(10)
前端·笔记·迭代器·es6·iterator
前端没钱4 小时前
探索 ES6 基础:开启 JavaScript 新篇章
前端·javascript·es6
m0_748255265 小时前
vue3导入excel并解析excel数据渲染到表格中,纯前端实现。
前端·excel