• 使用 pnpm 管理全栈、多包 monorepo


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

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

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

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

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

    1. 什么是全栈、多包单仓库?

    2. 创建一个基本的多包 monorepo

      1. 安装 Node.js 和 pnpm

      2. 创建根项目

      3. 创建嵌套子包

      4. 我们基本的monorepo的布局

    3. 在全栈 JavaScript monorepo 中共享代码

      1. 检查我们的项目结构

      2. 在 JavaScript 中的所有包上运行脚本

      3. 国旗有什么作用--stream?

      4. 在特定包上运行脚本

    4. 在全栈 TypeScript monorepo 中共享类型

      1. 在项目之间共享类型定义

      2. 在 TypeScript 中的所有包上运行脚本

    5. 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-工作区-示例
  • 相关阅读:
    申请专利这10个知识点一定要知道哦
    java-php-python-畜牧场信息管理系统计算机毕业设计
    PIL.Image、cv2的img、bytes相互转换
    传奇开服教程——legend/blue引擎替换和登陆器生成教程
    【赠书活动】如何提高C++代码的性能
    恢复Redis被误删的数据
    2023年最新版CorelDraw(cdr)软件下载安装教程
    六种正确清理C盘的方法,解决你的红色烦恼
    Flask Web开发实验二:模板(2)
    Digi重启XBee-Pro S2C生产,有些差别需要注意
  • 原文地址:https://blog.csdn.net/weixin_47967031/article/details/127036749