写一个 Vue3 库能收获 🍎 什么?

408 阅读3分钟

2020年毕业的我至今踏入职场已经满两年,和大部分人一样,前期对新鲜事物的好奇,对技术的无比狂热,让我快速进军了前端圈子,技术栈是 reactvue2 过渡 react 期间的历程这里不赘述了,有大哥带着,我的项目组只有我们两个,总体过的很不错。一年过去,我开始沾沾自喜,觉得啥都会,感觉ts 用的好六,react 写业务好优雅~ 直到一天,我浏览GitHub的时候,才发现自己的渺小 🤏。我明白我应该有阶段性的学习提升计划,前端技术这行没有上限,不能沉浸在业务原地踏步。

公司正好有个h5的项目,我力争采用 vue3 轻量化开发,由于那时 VueUse 的网络请求不太好用,于是便有了写库的想法。说干就干,写一个库给项目使用,长期迭代当作学习 ⛽️。

下面分享一下,在公司没办法学到的东西 & 写一个库对我的提升有多大?

🍎 收获

Vue3

  • 学习使用组合式API,不仅仅可以写库,还能运用到项目。
  • Vue3 组合式API的执行机制,尝试阅读源码。
  • ReactVue3 的区别。
  • hooks 我学习了很多react 中优秀的hook和结合自身业务进行书写。

库构建

  • Vite 进行库打包构建。
  • 发现只能打包成单文件库,虽然有tree shaking 但我还是希望模块分文件夹进行打包 (包括ts)。
  • 研究很久,使用了 Vite 循环多包多页面的形式去做,需要用户自定build,后来发现有大佬做了插件 vite-build
  • 学习优秀库思想将配置插件抽离到scripts文件夹进行处理。
  • 学习 vite 的源码和周期,写插件运行 👇。

文档

  • 学习使用 vitepress 搭建。
  • 开发文档首页,首屏 SSGbase64资源速度会更快。
  • 项目中集成文档 md 和 示例 demo.vue,这里是使用一个大佬的插件,在运行文档的时候会去读取src下的md文件,然后会解析出md里面引入的demo组件,进行示例展示。
  • 发现大佬的插件有点bug怎么办?学习 vscode 调试大佬的插件并且打包发布。
  • 发现vitepress 在执行工作流的时候程序不会被kill,阅读源码进行调试,提的PR 也被 Merge 了。

Typescript

  • 更高级的ts用法和实践。
  • 搭建 packages 下库、测试、文档的 ts 类型。
  • 学习 ts config 的配置。

单元测试

  • 学习使用 Vitest 配置单元测试。
  • 学习单元测试对于各场景的简单用法,模拟请求、模拟时间、模拟用户等操作。
  • 思考实现模拟vue环境的函数renderHook,用于测试vue的组合式API。

npm

  • 发布 npm 包,包括包的版本管理、package.json 字段的含义,记忆深刻的是 peerDependencies字段,限制vue版本需要3以上才能安装。
  • 发布 npm 组织包,平时看到@xxx/xxx 带 @ 开头的包为组织包。
  • 使用pnpm 搭建 monorepo 架构优雅管理依赖。

node

  • 学习node对文件进行操作,移动、复制、写入等操作。
  • 学习并写了简单 vite 插件用于项目打包完进行文件移动删除操作。
  • 借此机会了解了eggjs 服务端框架。

服务器

  • 配置使用nginx进行文档部署。
  • 学习使用shell 脚本进行文档自动化部署。
  • 发现服务器没有GitHub page 就迁移了。

开发格式规范

  • 学习配置 eslint、prettier、commitlint
  • 学习优秀的库思想对函数、对组件封装导出的方式。

GitHub

  • 建立组织进行多人开发协作。
  • 学习code review、PR、issue 的处理。
  • 编写CI工作流校验提交。
  • 学习编写README 学习 English,中英一起(包括pr、issue等)。

👨‍🏫 结语

一起尝试看看,try it!,共同进步 🏃‍♀

VueHooks Plus,高质量可靠,内置方便业务的钩子和强大的网络请求hook。

GitHub地址

文档地址

大家多多支持 🌟