本文继续构建组件库开发环境。前两篇分别介绍了组件库中组件项目的初始化和组件库的CSS架构。工具库建设。在组件开发过程中，可能会调用一些常用的实用函数，可以将这些实用函数抽取成一个独立的npm包。1创建工具包1.1初始化工具包至此，packages目录下已经有了三个包：foo示例组件、scss样式、yyg-demo-ui组件库聚合，现在创建第四个：utils。命令行进入utils目录，使用pnpm初始化。pnpminit修改自动生成的package.json文件中的name和main，内容如下：{"name":"@yyg-demo-ui/utils","version":"1.0.0","description":"通用实用函数","main":"index.ts","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"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写第一个工具功能需求描述：组件之间的通信是刚需。当组件层数较多时，可以使用全局总线进行通信。Vue2.x通常使用EventBus作为全局总线，而Vue3.x可以使用mitt。mitt体积小，支持监听和批量移除所有事件，不依赖Vue实例，可以跨框架使用。我们的第一个工具功能就是简单封装mitt，导出mitt对象。首先在utils包下安装mitt依赖：pnpminstallmitt@1.1.3细心的同学会发现优雅哥在引入mitt的时候指定了版本号1.1.3。这是因为优雅哥在使用最新的3.0.0版本时，一直提示类型错误或者找不到类型声明文件。既然来不及处理，就简单粗暴的降级到1.1.3版本。在utils目录下创建一个源代码目录src，并在src中创建一个emitter.ts文件。utils/src/emitter.ts:importmittfrom'mitt'constMitt=mittexportconstemitter:mitt.Emitter=newMitt()exportdefaultemitter上面的第二行代码看起来多余，因为它本质上是newmitt()，这是为了满足eslint的规则：构造函数名称不应以小写字母开头。1.3编写第二个效用函数。上面的emitter对象会在后面的组件开发中用到，foo中不会用到。因此，让我们创建另一个用于测试的实用函数。在utils/src/目录下创建test-log.ts文件：exportconsttestLog=(str:string)=>{console.log('testlog:',str)}1.4在package.json前面指定入口文件主要是index.ts，在utils目录下创建index.ts文件，导入导出所有实用函数。export{emitter}from'./src/emitter'export{testLog}from'./src/test-log'综上，组件库generaltoolkit的目录结构如下：packages/|-utils/|-来源/|-emitter.ts|-test-log.ts|-index.ts|-tsconfig.json|-package.json2使用组件中的工具包2.1安装依赖foo示例组件之前已经开发好了，如果组件需要使用工具包，首先需要安装依赖项。命令行进入foo目录：pnpminstall@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中的按钮点击事件中调用该方法：constonBtnClick=()=>{console.log('Clickthebuttontotest',props.msg)testLog(props.msg)}后期开发过程中，如果加入工具功能：比如JSONSchema解析等.,只需将它们添加到utils中，并在utils/index.ts中统一导入和导出。
