Vue3 从零搭建 Monorepo 组件库：使用 pnpm 实现本地包关联与测试

引言

本系列文章的第二篇将深入探讨如何从零开始搭建 Vue3 组件库。本文将引导读者使用 pnpm 工具构建一个基础的 Monorepo 项目结构，并详细演示如何完成各个子包之间的关联配置与本地测试流程。

什么是 Monorepo

Monorepo 的概念十分直观，即在一个统一的代码仓库中管理多个项目。尽管这些项目在业务逻辑上保持独立，但它们彼此关联，允许不同的开发者或团队分别进行维护，从而简化了依赖管理和代码共享。

为什么要用 pnpm

在 Monorepo 项目中，pnpm 提供了极为便捷的包管理体验。由于即将开发的组件库可能包含多个独立的 package（包），这些包在本地开发阶段需要相互引用和测试，而 pnpm 对此提供了天然的支持。虽然 yarn 或 lerna 等工具也能实现类似功能，但配置相对繁琐。鉴于 pnpm 已高度成熟，且被 Vant、ElementUI 等知名组件库广泛采用，本项目最终选定 pnpm 作为核心包管理工具。

pnpm 的使用

安装

npm install pnpm -g

初始化项目

在项目根目录下执行 pnpm init 命令，系统会自动生成 package.json 配置文件，完成项目的初始设置。

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

包管理

首先创建一个名为 packages 的文件夹，用于存放后续开发的所有子包。假设我们需要开发 a 和 b 两个包，并在 packages 目录下分别建立对应的目录（此处以测试 pnpm 本地引用功能为例）。随后，在 a 和 b 两个目录中分别执行 pnpm init 命令进行初始化。

接下来需要调整包名，将 name 字段修改为 @easyest/a，这表明 a 包归属于 easyest 组织。因此，在发布包之前，务必先在 npm 上注册并创建相应的组织（例如 easyest）。此时，a 包的 package.json 内容如下所示。

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

在此示例中，a 包被定义为一个工具包，其 package.json 中的 main 属性指定了包的入口文件，即 index.js。

因此，需要在 a 包的目录下新建一个 index.js 文件。

export default () => {
  console.log("我是@easyest/a包");
};

接着，在 b 包的目录下新建 index.js 文件，并在其中引入并使用 a 包。

import sayHello from "@easyest/a";
sayHello();

由于 b 包依赖 a 包，我们需要先安装 a。在 b 目录下执行 pnpm add @easyest/a 命令。此时运行会报错，因为两个包尚未建立关联。那么，如何实现这种关联呢？方法非常简单。

只需在项目根目录新建一个 pnpm 的工作区配置文件 pnpm-workspace.yaml，即可将所有包关联起来。

packages:
    - 'packages/**'

上述配置表明 packages 目录下的所有子包均被纳入工作区管理。保存后，再次执行 pnpm add @easyest/a 命令即可生效。

需要注意的是，由于代码中使用了 ES6 的 import 语法，我们需要在 A 和 B 包的 package.json 文件中新增字段 "type": "module"，以启用 ES Module 支持。

执行完毕后，可以观察到在 b 目录的 node_modules 中出现了指向 a 包的软链接。同时，b 包的 package.json 依赖字段中新增了 "@easyest/a": "workspace:^1.0.0"，这表示 b 包已成功关联到本地的 @easyest/a 包。

此时，切换到 b 目录并执行

node index.js

至此，我们完成了本地包的关联配置，后续进行包的测试工作将变得异常便捷。

本文相关代码地址

以上就是 Vue3 从零搭建 Monorepo 项目组件库的详细内容。如需了解更多关于 Vue3 搭建 Monorepo 组件库的资料，请持续关注本站发布的其他相关文章。