经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue3 企业级优雅实战 - 组件库框架 - 5 组件库通用工具包
来源:cnblogs  作者:程序员优雅哥(\/同)  时间:2022/11/17 9:17:52  对本文有异议

该系列已更新文章:
分享一个实用的 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 初始化。

  1. pnpm init

修改自动生成的 package.json 文件中的 namemain ,内容如下:

  1. {
  2. "name": "@yyg-demo-ui/utils",
  3. "version": "1.0.0",
  4. "description": "通用工具函数",
  5. "main": "index.ts",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1"
  8. },
  9. "keywords": [],
  10. "author": "",
  11. "license": "ISC"
  12. }

由于工具包咱们也采用 TypeScript 编写,在 utils 下也提供一份 tsconfig.json 文件:

  1. {
  2. "compilerOptions": {
  3. "target": "es2015",
  4. "lib": [
  5. "es2015"
  6. ],
  7. "module": "commonjs",
  8. "rootDir": "./",
  9. "allowJs": true,
  10. "isolatedModules": false,
  11. "esModuleInterop": true,
  12. "forceConsistentCasingInFileNames": true,
  13. "strict": true,
  14. "skipLibCheck": true
  15. }
  16. }

1.2 编写第一个工具函数

需求描述:组件间通信是一个刚需,当组件层级较多时,可以使用全局总线来通信。Vue 2.x 中通常使用 EventBus 作为全局总线,而 Vue 3.x 可以使用 mittmitt 体积小,支持全部事件的监听和批量移除,不依赖 Vue 实例,可以跨框架使用。咱们的第一个工具函数就是简单封装 mitt,导出 mitt 对象即可。

首先在 utils 包下安装 mitt 依赖:

  1. 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

  1. import mitt from 'mitt'
  2. const Mitt = mitt
  3. export const emitter: mitt.Emitter = new Mitt()
  4. 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 文件:

  1. export const testLog = (str: string) => {
  2. console.log('test log: ', str)
  3. }

1.4 入口文件

前面的 package.json 中指定了 mainindex.ts,在 utils 目录下创建 index.ts 文件,导入并导出所有的工具函数等。

  1. export { emitter } from './src/emitter'
  2. export { testLog } from './src/test-log'

总结一下,组件库通用工具包的目录结构如下:

  1. packages/
  2. |- utils/
  3. |- src/
  4. |- emitter.ts
  5. |- test-log.ts
  6. |- index.ts
  7. |- tsconfig.json
  8. |- package.json

2 在组件中使用工具包

2.1 安装依赖

前面已经开发了 foo 示例组件,如果该组件要使用工具包,首先需要安装依赖。在命令行中进入 foo 目录:

  1. pnpm install @yyg-demo-ui/utils

执行后 foo 的 package.json 中会多了一行依赖:

  1. "dependencies": {
  2. "@yyg-demo-ui/utils": "workspace:^1.0.0"
  3. }

2.2 使用工具

由于 utils 包指定了 mainindex.ts,并且所有的工具都在 index.ts 中导入并导出,所以在使用时只需引入 utils 包即可。

例如要使用上面创建的 testLog 函数,则只需要在代码中如下引入:

  1. import { testLog } from '@yyg-demo-ui/utils'

setup 中的按钮点击事件调用该方法:

  1. const onBtnClick = () => {
  2. console.log('点击按钮测试', props.msg)
  3. testLog(props.msg)
  4. }

后面再开发过程中如果新增工具函数:如 JSON Schema 的解析等,则往 utils 中添加即可,并在 utils/index.ts 中统一将其导入并导出。

感谢你阅读本文,如果本文给了你一点点帮助或者启发,还请三连支持一下,点赞、关注、收藏,程序员优雅哥会持续与大家分享更多干货

原文链接:https://www.cnblogs.com/youyacoder/p/16892329.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号