2020年毕业的我至今踏入职场已经满两年,和大部分人一样,前期对新鲜事物的好奇,对技术的无比狂热,让我快速进军了前端圈子,技术栈是
react
,vue2
过渡react
期间的历程这里不赘述了,有大哥带着,我的项目组只有我们两个,总体过的很不错。一年过去,我开始沾沾自喜,觉得啥都会,感觉ts
用的好六,react
写业务好优雅~ 直到一天,我浏览GitHub
的时候,才发现自己的渺小 🤏。我明白我应该有阶段性的学习提升计划,前端技术这行没有上限,不能沉浸在业务原地踏步。
公司正好有个
h5
的项目,我力争采用vue3
轻量化开发,由于那时VueUse
的网络请求不太好用,于是便有了写库的想法。说干就干,写一个库给项目使用,长期迭代当作学习 ⛽️。
下面分享一下,在公司没办法学到的东西 & 写一个库对我的提升有多大?
🍎 收获
Vue3
- 学习使用组合式API,不仅仅可以写库,还能运用到项目。
Vue3
组合式API的执行机制,尝试阅读源码。React
和Vue3
的区别。hooks
我学习了很多react
中优秀的hook
和结合自身业务进行书写。
库构建
Vite
进行库打包构建。- 发现只能打包成单文件库,虽然有
tree shaking
但我还是希望模块分文件夹进行打包 (包括ts)。 - 研究很久,使用了
Vite
循环多包多页面的形式去做,需要用户自定build
,后来发现有大佬做了插件vite-build
。 - 学习优秀库思想将配置插件抽离到
scripts
文件夹进行处理。 - 学习
vite
的源码和周期,写插件运行 👇。
文档
- 学习使用
vitepress
搭建。 - 开发文档首页,首屏
SSG
加base64资源
速度会更快。 - 项目中集成文档
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。
大家多多支持 🌟