关于前端:Vue3-企业级优雅实战-组件库框架-1-搭建-pnpm-monorepo

前两篇文章分享了基于 vite3 vue3 的组件库根底工程 vue3-component-library-archetype 和用于疾速创立该工程的工具 yyg-cli，但在中大型的企业级我的项目中，通常会自主搭建这些脚手架或加速器。优雅哥心愿每位前端搭档能知其所以然，故接下来的文章将进入 Vue3 企业级优雅实战 系列，整个系列将包含五大部分：

首先会分享如何从 0 开始搭建一套组件库根底工程，即如何从 0 实现 vue3-component-library-archetype。

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

在参考 Element Plus、Ant Design、Van UI 等 Vue3 开源 UI 我的项目后，优雅哥认为一套企业组件库工程须要具备如下性能：

1. 组件库的开发 ：这是最根底的，组件库工程必须要反对组件库的开发，在工程中开发各种组件；
2. 组件库的构建 ：组件库开发实现后，不可能让所有应用该组件库的我的项目都应用源码的形式引入到各个我的项目中，而是要将其构建打包后公布到私服或 npm 上，各个我的项目通过依赖的形式引入应用。在这个过程中，就波及类型定义的提取、不同模块化标准的打包等；
3. 组件库的公布 ：下面提到组件库构建打包后须要公布到私服或 npm，那难道在组件库开发阶段就频繁的公布到私服上吗？这样做也没问题。不过优雅哥的倡议是在本地启动一个迷你私服，当组件库开发到一个阶段（如 beta 版本）能够提供给其余我的项目应用时，便能够依照惯例流程公布到公司的私服或 npm 上。
4. 组件库文档的编写和公布 ：通常会采纳 MarkDown 来编写组件库的操作手册、每个组件的 API（props 组件的输出属性、events 组件提供的事件、methods 组件裸露的办法、slots 组件反对的插槽）、组件的应用阐明、Demo 展现、Demo 对应的代码等。组件库文档中的 Demo 不仅给使用者参考，还能够应用它来调试组件。在文档编写实现后，须要将文档构建打包公布到 HTTP 服务上，供开发共事查看。
5. 组件库开发工具 cli：每次新创建一个组件，都须要创立一套组件目录文件构造、注册该组件、在文档中增加该组件文档、Demo 等操作，整个过程繁琐且没价值，而组件库可能会有几十个组件，所以很有必要开发一个 cli 用于疾速创立组件，同时实现创立组件的规范化。
6. 组件库 example 的开发和公布 ：这个是非必须的，在组件库中增加这个局部是基于两个方面思考，其一是能够开发一个演示站点，用来展现组件库在我的项目中的实现成果；其二是在我的实际中，组件的开发通常由业务开发驱动，在开发 example 的过程中逐步完善组件库中的组件，当组件实现到肯定的水平后，便能够将 example 抽取到独立的工程中。

2 环境筹备

1. Node JS 和 npm 版本：

node -v
npm -v

各位应用的版本最新大于等于我的版本。我本地的版本如下：

node：8.10.0
npm：7.14.0

2. 装置或更新 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 后你会感觉到它的很多益处：速度、磁盘空间等。

对于 pnpm、monorepo 的理论知识，大家本人上网查问，优雅哥就不写那些无关痛痒的废话来凑数了。

3.1 创立我的项目

1. 创立我的项目根目录

创立一个目录，作为组件库工程的根目录，目录名就应用你定义的组件库的名称，我命名为 yyg-demo-ui。用 IDE 关上该目录。

2. 初始化 package.json

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

pnpm init

执行完该命令后，会在我的项目根目录下主动生成 package.json 文件。在 package.json 文件中指定 type 属性为 module：

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

3. git 初始化：

git init

4. 创立目录

在我的项目根目录下别离创立 cli、docs、example、packages 四个目录，别离寄存命令行工具、组件库文档、example、组件库四大模块，并在 packages 目录下创立 foo 和 yyg-demo-ui（yyg-admin-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。

1. 在我的项目根目录下创立配置文件 pnpm-workspace.yaml：

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

下面的配置指定了 cli、docs、example 自身是 package，packages 目录下的子目录也是 package。同时排除了所有的 test 目录。

2. 在 package.json 中指定 workspace：

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

到这一步就实现 pnpm + monorepo 的搭建了，我的项目根目录称为 workspace-root，下一步将初始化 workspace-root。