likes
comments
collection
share

第3章 Monorepo构建组件库Monorepo是指将多个软件项目或代码库存储在单个版本控制存储库中的软件开发模型。传

作者站长头像
站长
· 阅读数 27

Monorepo是指将多个软件项目或代码库存储在单个版本控制存储库中的软件开发模型。传统上，每个项目或代码库都有自己独立的存储库，然而，使用Monorepo，所有的项目或代码库共享同一个存储库。这种模型的优势包括更易于代码共享、跨项目的原子性更改、更好的协作和一致性管理。它还提供更简单的构建、测试和部署过程，并能够更好地支持跨项目的重构和代码重用。

Monorepo有以下几个特点

  1. 单一代码库：所有相关的项目或代码库都存储在同一个版本控制存储库中，使得代码管理更加集中和一致。
  2. 代码共享：不同项目或代码库可以轻松共享代码，避免重复编写和维护相似功能的代码。
  3. 原子性更改：对于涉及多个项目的更改，Monorepo可以确保更改的原子性，可以一次提交和审查整个更改，避免项目之间的不一致问题。
  4. 简化构建和测试：由于所有代码都在同一个存储库中，构建和测试过程更加简化，可以通过一次构建和测试来确保整个代码库的一致性。
  5. 更好的协作：开发人员可以更轻松地共享代码和协作开发，减少项目之间的隔阂和重复工作。
  6. 可重构性和代码重用：Monorepo模型有助于促进代码的重构和重用，使得跨项目的代码调整和重构更加容易。

3.1 pnpn安装

Pnpm全称是（performant npm），是指高性能的npm，与npm和yarn一样是一款包管理工具，其根据自身独特的包管理方法解决了npm、yarn内部潜在的安全及性能问题，在多数情况下拥有更快的安装速度、占用更小的存储空间。与npm和yarn不同，pnpm采用了一种称为"虚拟存储"的新颖方法来管理依赖项。它通过在一个统一的位置安装依赖项，并在项目之间共享它们，以减少磁盘空间的使用和安装时间。pnpm还支持并发安装和使用版本锁定，以确保项目的依赖关系始终保持一致。同时，pnpm还提供了一些其他功能，如本地缓存、快速恢复等，以提高依赖项的管理效率。

使用Pnpm需先全局安装，执行指令：npm install -g pnpm@8.15.0 。然后使用pnpm -v检查安装版本，如出现版本号，代表安装成功，如图所示。

第3章 Monorepo构建组件库Monorepo是指将多个软件项目或代码库存储在单个版本控制存储库中的软件开发模型。传

3.2 初始化组件库

初始化UI组件库是为了更好的管理文件模块的目录结构，区分不同文件模块的功能。UI组件库将使用pnpm + workspace来搭建，为了统一管理UI组件库的文件，可任意选择一个磁盘新建文件夹并自定义命名为ui-library，作为UI组件库的“根”目录，然后在ui-library目录下新建以下3个文件夹：

  1. packages：UI组件库。该目录存放所有组件，packages目录中还可以建立其他与组件相关的目录。如：组件包components、主题包theme、工具包utils 等。
  2. examples：演示库。作用于开发环境的调试。
  3. docs：组件文档。使用vitepress构建的UI组件库使用说明文档。

3.2.1 建立workspace工作区

采用pnpm+monorepo管理多个项目，需要使用pnpm-workspace.yaml配置文件，从workspace工作区中指定需要包含的目录，也就是packages、examples和docs三个目录。因此在ui-library根目录下创建 pnpm-workspace.yaml配置文件，并写入需要包含的目录，如图3-2所示所示，如代码清单library-03-1所示。

第3章 Monorepo构建组件库Monorepo是指将多个软件项目或代码库存储在单个版本控制存储库中的软件开发模型。传

图3-2 pnpm-workspace.yaml配置文件

> ui-library/pnpm-workspace.yaml：
packages:
    - examples # 存放组件测试的代码
    - docs # 存放组件文档
    - packages/* # packages 目录下都是组件包

3.2.2 建立UI组件库包

UI组件库的所有组件以及和组件相关的业务都放在packages目录，如components组件包、utils工具包、hook钩子函数包等等，因此需要单独建立文件夹并在每个目录下初始化 package.json 文件声明为 NPM 包，视为独立的“包”来应用。

以 components 组件包为例，进入components 目录执行pnpm init生成 package.json 文件，并将文件中的name属性自定义为@ui-library/components，如代码清单。

> packages/components/package.json：

{
    "name": "@ui-library/components",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

utils工具包、hook钩子函数包同样是初始化package.json文件后，将包的名称自定义为@ui-library/utils、@ui-library/hook。

3.2.3 UI组件库包的调用

packages目录下的每个文件夹通过pnpm init指令创建了package.json文件，已经变成了独立的包。要使每个包可以相互调用，只需要在ui-library根目录下安装依赖即可。进入ui-library根目录，在终端执行以下指令，便可安装包。安装完成后便可在根目录的packags.json文件的dependencies属性中查看已安装的包，根目录中也生成了node_modeuls依赖包文件夹，如图所示。

第3章 Monorepo构建组件库Monorepo是指将多个软件项目或代码库存储在单个版本控制存储库中的软件开发模型。传

依赖指令：

安装components组件包：pnpm install @ui-library/components -w
安装utils工具包：pnpm install @ui-library/utils -w
安装hook钩子包：pnpm install @ui-library/hook -w

-w 表示安装到共公模块的 packages.json 中，也就是根目录下的 packages.json。

转载自:https://juejin.cn/post/7382485031896776754
评论
请登录