Vue3 企业级组件库框架搭建 pnpm monorepo实战示例

引言

虽然已有基于 Vite3 和 Vue3 的组件库基础工程 vue3-component-library-archetype 以及工具 yyg-cli，但在中大型企业中，往往需要自主构建此类脚手架或加速工具。为了让前端开发者深入理解原理，本系列文章将展开 Vue3 企业级实战教程，共分为五个部分。

第一部分将讲解如何从零开始构建组件库基础工程，即复现 vue3-component-library-archetype 的实现过程。

1 组件库工程应该具备的功能

参考 Element Plus、Ant Design 及 Van UI 等主流 Vue3 开源项目后，一个完善的企业级组件库工程应包含以下核心功能：

• 组件开发支持：这是基础需求，工程必须能够支持各类组件的开发与编写。
• 组件构建打包：开发完成后，不应直接引入源码，而需打包发布至私有服务器或 npm。此过程涉及类型定义提取及多种模块化规范的打包处理。
• 关于组件库的发布流程：前文提及构建打包后的组件库需发布至私有服务器或 npm。在开发阶段频繁发布至私有服务器虽可行，但建议采用本地启动迷你私有服务器的方案。当组件库开发至特定阶段（例如 beta 版本）且可供其他项目使用时，再按常规流程发布至公司私有服务器或 npm。
• 文档编写与发布：通常使用 Markdown 编写操作手册，包括组件 API（props、events、methods、slots）、使用说明、Demo 展示及对应代码。Demo 既供参考也可用于调试。文档构建后需发布至 HTTP 服务供内部查看。
• CLI 开发工具：手动创建组件目录、注册组件、添加文档和 Demo 繁琐且低效。鉴于组件库可能包含数十个组件，开发 CLI 工具以实现组件创建的自动化和规范化至关重要。
• Example 开发与发布：此部分非强制，但建议保留。一方面用于展示组件在实际项目中的效果；另一方面，组件开发常由业务驱动，通过 Example 逐步完善组件，成熟后可将其抽取至独立工程。

2 环境准备

• Node.js 和 npm 版本要求：

node -v
npm -v

请确保使用的版本不低于作者本地版本。作者本地环境如下：

node：8.10.0
npm：7.14.0

• 安装或更新 pnpm：

npm install -g pnpm

安装完成后验证版本：

pnpm -v

作者本地 pnpm 版本号为 7.14.2。

3 搭建 monorepo 项目

Monorepo（单一代码库）是一种代码组织方式，与 Multirepos（多代码库）相对。Multirepos 将不同模块（packages）分散在多个仓库中，而 Monorepo 将所有 packages 集中存储在一个仓库内。

在组件库工程中，包含多个包：组件包、文档包、CLI 包及 Example 包。若分散在多个仓库，需频繁切换且跨仓库引用代码困难。因此，采用 Monorepo 组织多个包是更优选择。

实现 Monorepo 的方式包括 Lerna、Yarn Workspace 和 pnpm Workspace 等。本文选择 pnpm，因其能显著提升构建速度和节省磁盘空间。

关于 pnpm 和 Monorepo 的理论背景，读者可自行查阅相关资料，此处不再赘述。

3.1 创建项目

• 创建项目根目录

新建一个目录作为组件库工程的根目录，名称建议与组件库名称一致，此处命名为 yyg-demo-ui。使用 IDE 打开该目录。

• 初始化 package.json

在命令行进入该目录，使用 pnpm 初始化 package.json：

pnpm init

命令执行后，根目录将自动生成 package.json 文件。需在该文件中指定 type 属性为 module：

{
	...
  "type": "module",
  ...
}

• Git 初始化：

git init

• 创建目录结构

在根目录下分别创建 cli、docs、example、packages 四个目录，分别存放命令行工具、文档、Example 和组件库。在 packages 目录下再创建 foo 和 yyg-demo-ui（需替换为实际组件库名）两个子目录。

mkdir -p cli docs example packages/foo packages/yyg-demo-ui

最终目录结构如下：

yyg-demo-ui/
|- cli/
|- docs/
|- example/
|- packages/
		|- foo/
		|- yyg-demo-ui/

3.2 配置 workspace

前文创建了四个目录，需告知 pnpm 识别这些包。pnpm 通过配置文件来管理 Monorepo。

• 在项目根目录创建配置文件 pnpm-workspace.yaml：

packages:
  - packages/*
  - cli
  - docs
  - example
  # exclude packages that are inside test directories
  - '!**/test/**'

上述配置指定 cli、docs、example 以及 packages 目录下的子目录均为 package，同时排除所有 test 目录。

• 在 package.json 中指定 workspace 字段：

{
	...
  "workspaces": [
    "packages/*",
    "cli",
    "docs",
    "example"
  ]
}

至此，pnpm + Monorepo 的搭建完成。项目根目录被称为 workspace-root，下一步将初始化该根目录。

以上就是 Vue3 企业级组件库框架搭建 pnpm monorepo 实战示例的详细内容，更多关于 Vue3 组件库搭建 pnpm monorepo 的资料请关注本站其它相关文章！