前言

随着前端技术的发展，业界涌现出了许多的UI组件库。例如我们熟知的ElementUI,Vant，AntDesign等等。但是作为一个前端开发者，你知道一个UI组件库是如何被打造出来的吗?

读完这篇文章你将学会:

• 如何使用pnpm搭建出一个menorepo环境

• 如何使用vite搭建一个基本的Vue3脚手架项目

• 如何开发调试一个自己的UI组件库

• 如何使用vite打包并发布自己的UI组件库

作为一个前端拥有一个属于自己的UI组件库是一件非常酷的事情。它不仅能让我们对组件的原理有更深的理解，还能在找工作的时候为自己增色不少。试问有哪个前端不想拥有一套属于自己的UI组件库呢？

本文将使用Vue3和TypeScript来编写一个组件库，使用Vite+Vue3来对这个组件库中的组件进行调试，最后使用vite来对组件库进行打包并且发布到npm上。最终的产物是一个名为kitty-ui的组件库。

话不多说~ 接下来让我们开始搭建属于我们自己的UI组件库吧

menorepo环境

首先我们要了解什么是menorepo及它是如何搭建的吧

就是指在一个大的项目仓库中，管理多个模块/包（package），这种类型的项目大都在项目根目录下有一个packages文件夹，分多个项目管理。大概结构如下：

-- packages  -- pkg1    --package.json  -- pkg2    --package.json--package.json  

简单来说就是单仓库 多项目

目前很多我们熟知的项目都是采用这种模式，如Vant，ElementUI，Vue3等。打造一个menorepo环境的工具有很多，如：lerna、pnpm、yarn等，这里我们将使用pnpm来开发我们的UI组件库。

为什么要使用pnpm?

因为它简单高效，它没有太多杂乱的配置，它相比于lerna操作起来方便太多

好了，下面我们就开始用pnpm来进行我们的组件库搭建吧

使用pnpm

安装

npm install pnpm -g

初始化package.json

pnpm init

新建配置文件 .npmrc

shamefully-hoist = true

这里简单说下为什么要配置shamefully-hoist。

如果某些工具仅在根目录的node_modules时才有效，可以将其设置为true来提升那些不在根目录的node_modules，就是将你安装的依赖包的依赖包的依赖包的...都放到同一级别（扁平化）。说白了就是不设置为true有些包就有可能会出问题。

安装对应依赖

我们开发环境中的依赖一般全部安装在整个项目根目录下，方便下面我们每个包都可以引用,所以在安装的时候需要加个 -w

pnpm i vue@next typescript less -D -w

因为我们开发的是vue3组件， 所以需要安装vue3，当然ts肯定是必不可少的（当然如果你想要js开发也是可以的，甚至可以省略到很多配置和写法。但是ts可以为我们组件加上类型，并且使我们的组件有代码提示功能，未来ts也将成为主流)；less为了我们写样式方便，以及使用它的命名空间（这个暂时这里没用到，后面有时间再补

• 配置tsconfit.json

这里的配置就不细说了，可以自行搜索都是代表什么意思。或者你可以先直接复制

npx tsc --init

tsconfig.json:

{  "compilerOptions": {    "baseUrl": ".",    "jsx": "preserve",    "strict": true,    "target": "ES2015",    "module": "ESNext",    "skipLibCheck": true,    "esModuleInterop": true,    "moduleResolution": "Node",    "lib": ["esnext", "dom"]  }}

monorepo的实现

接下就是pnpm如何实现monorepo的了。

为了我们各个项目之间能够互相引用我们要新建一个pnpm-workspace.yaml文件将我们的包关联起来

packages:    - 'packages/**'    - 'examples'

这样就能将我们项目下的packages目录和examples目录关联起来了，当然如果你想关联更多目录你只需要往里面添加即可。根据上面的目录结构很显然你在根目录下新packages和examples文件夹，packages文件夹存放我们开发的包，examples用来调试我们的组件

examples文件夹就是接下来我们要使用vite搭建一个基本的Vue3脚手架项目的地方

手动搭建一个基于vite的vue3项目

其实搭建一个vite+vue3项目是非常容易的，因为vite已经帮我们做了大部分事情

初始化仓库

进入examples文件夹，执行

pnpm init

安装vite和@vitejs/plugin-vue

@vitejs/plugin-vue用来支持.vue文件的转译

pnpm install vite @vitejs/plugin-vue -D -w

这里安装的插件都放在根目录下

配置vite.config.ts

新建vite.config.ts

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({    plugins:[vue()] })

新建html文件

@vitejs/plugin-vue 会默认加载examples下的index.html

新建index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <div id="app"></div>    <script src="main.ts" type="module"></script></body></html>

注意： vite 是基于esmodule的 所以type="module"

新建app.vue模板

<template>    <div>        启动测试    </div></template>

新建main.ts

import {createApp} from 'vue'import App from './app.vue'const app = createApp(App) app.mount('#app')

此时会发现编译器会提示个错误：找不到模块“./app.vue”或其相应的类型声明

因为直接引入.vue文件 TS会找不到对应的类型声明；所以需要新建typings（命名没有明确规定，TS会自动寻找.d.ts文件）文件夹来专门放这些声明文件。

typings/vue-shim.d.ts

TypeScriptTS默认只认ES 模块。如果你要导入.vue文件就要declare module把他们声明出来。

declare module '*.vue' {    import type { DefineComponent } from "vue";    const component:DefineComponent<{},{},any> }

配置脚本启动项目

最后在package.json文件中配置scripts脚本

..."scripts": {    "dev": "vite"  }, ...

然后终端输入我们熟悉的命令：pnpm run dev

vite启动默认端口为3000；在浏览器中打开localhost:3000 就会看我们的“启动测试”页面。

本地调试

新建包文件

本节可能和目前组件的开发关联不大，但是未来组件需要引入一些工具方法的时候会用到

接下来就是要往我们的packages文件夹冲填充内容了。

• utils包

一般packages要有utils包来存放我们公共方法，工具函数等

既然它是一个包，所以我们新建utils目录后就需要初始化它，让它变成一个包；终端进入utils文件夹执行：pnpm init 然后会生成一个package.json文件；这里需要改一下包名，我这里将name改成@kitty-ui/utils表示这个utils包是属于kitty-ui这个组织下的。所以记住发布之前要登录npm新建一个组织；例如kitty-ui

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

因为我们使用ts写的，所以需要将入口文件index.js改为index.ts，并新建index.ts文件:(先导出一个简单的加法函数)

export const testfun = (a:number,b:number):number=>{    return a + b }

• 组件库包(这里命名为kitty-ui)

components是我们用来存放各种UI组件的包

新建components文件夹并执行 pnpm init 生成package.json

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

新建index.ts入口文件并引入utils包

import {testfun} from '@kitty-ui/utils'const result = testfun (1,1)console.log(result)

• esno

由于组件库是基于ts的，所以需要安装esno来执行ts文件便于测试组件之间的引入情况

控制台输入esno xxx.ts即可执行ts文件

npm i esno -g

包之间本地调试

进入components文件夹执行

pnpm install @kitty-ui/utils

你会发现pnpm会自动创建个软链接直接指向我们的utils包；此时components下的packages：

{  "name": "kitty-ui",  "version": "1.0.0",  "description": "",  "main": "src/index.ts",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC",  "dependencies": {    "@kitty-ui/utils": "workspace:^1.0.1"  } }

你会发现它的依赖@kitty-ui/utils对应的版本为：workspace:^1.0.0；因为pnpm是由workspace管理的，所以有一个前缀workspace可以指向utils下的工作空间从而方便本地调试各个包直接的关联引用。

到这里基本开发方法我们已经知道啦；接下来就要进入正题了，开发一个button组件