pnpm 中的“p”代表“性能”——哇,它确实提供了性能!
我对使用 npm 感到非常沮丧。似乎越来越慢了。使用越来越多的代码仓库意味着进行更频繁的 npm 安装。我花了这么多时间坐着等待它完成并思考,一定有更好的方法!
然后,在同事的坚持下,我开始使用 pnpm 并且没有回去。对于大多数新的(甚至是一些旧的)项目,我已经用 pnpm 替换了 npm,我的工作生活也因此变得更好了。
虽然我开始使用 pnpm 是因为它著名的性能(我并没有失望),但我很快发现 pnpm 具有许多用于工作区的特殊功能,非常适合管理多包monorepo(甚至是多包元 repo)。
在这篇博文中,我们将通过以下部分探索如何使用 pnpm 来管理我们的全栈、多包 monorepo:
-
什么是全栈、多包单仓库?
-
创建一个基本的多包 monorepo
-
安装 Node.js 和 pnpm
-
创建根项目
-
创建嵌套子包
-
我们基本的monorepo的布局
-
-
在全栈 JavaScript monorepo 中共享代码
-
检查我们的项目结构
-
在 JavaScript 中的所有包上运行脚本
-
国旗有什么作用--stream?
-
在特定包上运行脚本
-
-
在全栈 TypeScript monorepo 中共享类型
-
在项目之间共享类型定义
-
在 TypeScript 中的所有包上运行脚本
-
-
pnpm 是如何工作的?
如果您只关心 pnpm 与 npm 的比较,请直接跳至第 5 节。
1. 什么是全栈、多包单仓库?
那么我们到底在说什么?让我分解一下。
它是一个repo,因为它是一个代码存储库。在这种情况下,我们谈论的是 Git 代码存储库,Git 是卓越的主流版本控制软件。
这是一个monorepo,因为我们将多个(子)项目打包到一个代码存储库中,通常是因为它们出于某种原因属于一起,并且我们同时处理它们。
超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →
除了 monorepo,它也可以是meta repo,一旦它变得太大和复杂,这对于你的 monorepo 来说是一个很好的下一步——或者,例如,你想将它拆分并为每个单独的 CI/CD 管道项目。
我们可以通过将每个子项目拆分到其自己的存储库中,从 monorepo 转到元存储库,然后使用元工具将它们重新组合在一起。元存储库具有单存储库的便利性,但允许我们为每个子项目拥有单独的代码存储库。
它是多包的,因为我们在 repo 中有一个或多个包。Node.js 包是一个项目,ackage.json其根目录中有 ap 元数据文件。通常,要在多个项目之间共享一个包,我们必须将其发布到npm,但如果该包只在少数项目之间共享,这将是多余的,尤其是对于专有或闭源项目。
它是全栈的,因为我们的 repo 包含一个全栈项目。monorepo 包含前端和后端组件、基于浏览器的 UI 和 REST API。我认为这是展示 pnpm 工作空间优势的最佳方式,因为我可以向您展示如何在前端和后端项目之间共享 monorepo 中的包。
下图显示了典型的全栈、多包 monorepo 的布局:
当然,pnpm 非常灵活,这些工作空间可以以多种不同的方式使用。
其他一些例子:
-
我现在将 pnpm 用于我公司的闭源微服务元存储库
-
我还使用它来管理我的开源Data-Forge Notebook项目,该项目有用于浏览器和 Electron 的项目,它们在它们之间共享包,所有这些都包含在一个 monorepo 中
2.创建一个基本的多包monorepo
这篇博文附带了工作代码,您可以在 GitHub 上亲自试用。您也可以在此处下载 zip 文件,或使用 Git 克隆代码存储库:
来自 LogRocket 的更多精彩文章:
-
不要错过来自 LogRocket 的精选时事通讯The Replay
-
使用 React 的 useEffect优化应用程序的性能
-
在多个 Node 版本之间切换
-
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
-
探索 Tauri,一个用于构建二进制文件的新框架
-
比较NestJS 与 Express.js
-
发现TypeScript 领域中使用的流行 ORM
git clone git@github.com :ashleydavis/pnpm-workspace-examples.git
现在,打开一个终端并导航到目录:
cd pnpm-工作区-示例