乐趣区

关于前端:Vue3-企业级优雅实战-组件库框架-5-组件库通用工具包

jiezi

本文持续组件库开发环境的搭建，后面两篇别离介绍了组件库中组件我的项目的初始化、组件库 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 mitt@1.1.3

仔细的同学会发现，在引入 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 中对立将其导入并导出。

退出移动版