Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包
该系列已更新文章：
分享一个实用的 vite + vue3 组件库脚手架工具，提升开发效率
开箱即用 yyg-cli 脚手架：快速创建 vue3 组件库和vue3 全家桶项目
Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo
Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root
Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
本文继续组件库开发环境的搭建，前面两篇分别介绍了组件库中组件项目的初始化、组件库 CSS 架构，本文介绍通用工具库的搭建。在组件开发过程中，可能会调用一些通用的工具函数，这些工具函数便可以提取到一个独立的 npm 包中。
1 创建工具包
1.1 初始化工具包
到目前为止，packages 目录下有三个包：foo 示例组件、scss 样式、yyg-demo-ui 组件库聚合，现创建第四个：utils。
在命令行中进入 utils 目录，使用 pnpm 初始化。
pnpm init
修改自动生成的 package.json 文件中的 name 和 main ，内容如下：
{
"name": "@yyg-demo-ui/utils",
"version": "1.0.0",
"description": "通用工具函数",
"main": "index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
由于工具包咱们也采用 TypeScript 编写，在 utils 下也提供一份 tsconfig.json 文件：
{
"compilerOptions": {
"target": "es2015",
"lib": [
"es2015"
],
"module": "commonjs",
"rootDir": "./",
"allowJs": true,
"isolatedModules": false,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
1.2 编写第一个工具函数
需求描述：组件间通信是一个刚需，当组件层级较多时，可以使用全局总线来通信。Vue 2.x 中通常使用 EventBus 作为全局总线，而 Vue 3.x 可以使用 mitt。mitt 体积小，支持全部事件的监听和批量移除，不依赖 Vue 实例，可以跨框架使用。咱们的第一个工具函数就是简单封装 mitt，导出 mitt 对象即可。
首先在 utils 包下安装 mitt 依赖：
pnpm install [email protected]
细心的同学会发现，在引入 mitt 时优雅哥指定了版本号 1.1.3，这是因为，优雅哥在使用当前最新的 3.0.0 版本时一直提示类型错误或找不到类型声明文件，由于没空处理，就简单粗暴的降到 1.1.3 版本。
在 utils 目录下创建源码目录 src，并在 src 中创建 emitter.ts 文件。
utils/src/emitter.ts：
import mitt from 'mitt'
const Mitt = mitt
export const emitter: mitt.Emitter = new Mitt()
export default emitter
上面的第二行代码看着多余，因为本质上就是 new mitt()，这么做是为了满足 eslint 的规则：
A constructor name should not start with a lowercase letter.
1.3 编写第二个工具函数
上面的 emitter 对象会在后面的组件开发中使用到，在 foo 中并未使用到，所以咱们再创建一个测试使用的工具函数。
在 utils/src/ 目录下创建 test-log.ts 文件：
export const testLog = (str: string) => {
console.log('test log: ', str)
}
1.4 入口文件
前面的 package.json 中指定了 main 为 index.ts，在 utils 目录下创建 index.ts 文件，导入并导出所有的工具函数等。
export { emitter } from './src/emitter'
export { testLog } from './src/test-log'
总结一下，组件库通用工具包的目录结构如下：
packages/
|- utils/
|- src/
|- emitter.ts
|- test-log.ts
|- index.ts
|- tsconfig.json
|- package.json
2 在组件中使用工具包
2.1 安装依赖
前面已经开发了 foo 示例组件，如果该组件要使用工具包，首先需要安装依赖。在命令行中进入 foo 目录：
pnpm install @yyg-demo-ui/utils
执行后 foo 的 package.json 中会多了一行依赖：
"dependencies": {
"@yyg-demo-ui/utils": "workspace:^1.0.0"
}
2.2 使用工具
由于 utils 包指定了 main 为 index.ts，并且所有的工具都在 index.ts 中导入并导出，所以在使用时只需引入 utils 包即可。
例如要使用上面创建的 testLog 函数，则只需要在代码中如下引入：
import { testLog } from '@yyg-demo-ui/utils'
在 setup 中的按钮点击事件调用该方法：
const onBtnClick = () => {
console.log('点击按钮测试', props.msg)
testLog(props.msg)
}
后面再开发过程中如果新增工具函数：如 JSON Schema 的解析等，则往 utils 中添加即可，并在 utils/index.ts 中统一将其导入并导出。
感谢你阅读本文，如果本文给了你一点点帮助或者启发，还请三连支持一下，点赞、关注、收藏，程序员优雅哥会持续与大家分享更多干货