使用 pnpm 管理全栈、多包 monorepo

最新推荐文章于 2024-07-03 13:56:40 发布

pxr007

最新推荐文章于 2024-07-03 13:56:40 发布

阅读量5.7k

点赞数 1

文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/weixin_47967031/article/details/127036749

版权

本文介绍了如何使用pnpm管理全栈、多包的monorepo，包括创建基本的多包monorepo，全栈JavaScript和TypeScript项目中的代码共享，以及pnpm的工作原理。通过示例展示了pnpm在性能、工作区管理和类型共享方面的优势，适合前端和全栈开发者参考。

摘要由CSDN通过智能技术生成

pnpm 中的“p”代表“性能”——哇，它确实提供了性能！

我对使用 npm 感到非常沮丧。似乎越来越慢了。使用越来越多的代码仓库意味着进行更频繁的 npm 安装。我花了这么多时间坐着等待它完成并思考，一定有更好的方法！

然后，在同事的坚持下，我开始使用 pnpm 并且没有回去。对于大多数新的（甚至是一些旧的）项目，我已经用 pnpm 替换了 npm，我的工作生活也因此变得更好了。

虽然我开始使用 pnpm 是因为它著名的性能（我并没有失望），但我很快发现 pnpm 具有许多用于工作区的特殊功能，非常适合管理多包monorepo（甚至是多包元 repo）。

在这篇博文中，我们将通过以下部分探索如何使用 pnpm 来管理我们的全栈、多包 monorepo：

什么是全栈、多包单仓库？
创建一个基本的多包 monorepo
1. 安装 Node.js 和 pnpm
2. 创建根项目
3. 创建嵌套子包
4. 我们基本的monorepo的布局
在全栈 JavaScript monorepo 中共享代码
1. 检查我们的项目结构
2. 在 JavaScript 中的所有包上运行脚本
3. 国旗有什么作用--stream？
4. 在特定包上运行脚本
在全栈 TypeScript monorepo 中共享类型
1. 在项目之间共享类型定义
2. 在 TypeScript 中的所有包上运行脚本
pnpm 是如何工作的？

如果您只关心 pnpm 与 npm 的比较，请直接跳至第 5 节。

那么我们到底在说什么？让我分解一下。

它是一个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 中

这篇博文附带了工作代码，您可以在 GitHub 上亲自试用。您也可以在此处下载 zip 文件，或使用 Git 克隆代码存储库：

git clone git@github.com :ashleydavis/pnpm-workspace-examples.git

现在，打开一个终端并导航到目录：

cd pnpm-工作区-示例

关注