前言
很高兴我的文章阅读量已经过万了, 在这之际, 再次放一个大招出来, 希望能帮到有重构项目需求的朋友们~_~
本期所要讲的插件是在原agmd上扩展的功能, 主要有:
✈️ 全程界面命令选择操作
⛵ 把工程所有引用更改绝对路径为相对路径(方便点击下钻查看文件)
♨️ 把工程所有引用文件都加上后缀(方便点击下钻查看文件)
☝️ 对路由进行自动分析
👏 把工程按路由标记分类(对拆分工程很重要)
☝️ 把工程按分类对拆分工程(自动拆分的错误可控, 手动拆分会有各种问题)
☝️ 一键更改文件名,驼峰命名为kable-case
另外本插件包含26个单元测试用例, 改用例覆盖84%的函数测试, 如果有兄弟需要二开扩展功能的, 这将会起到很大的帮助
制作动机
年前我就做了一个agmd的插件, 自动生成md文档加强版--cli制作 这个只是0.2的版本, 今年我不是又换了工作嘛, 新公司竟然没有做代码规范, 结果就是代码各种写法都有, 所以加入了一些新功能
功能介绍
✈️ 全程界面命令选择操作
这个使用了commander插件, 可以使得打入命令后能有个菜单弹出来供选择
⛵ 把工程所有引用更改绝对路径为相对路径/♨️ 把工程所有引用文件都加上后缀
注意这条命令需要在src目录下运行, 因为vue工程的@符号指向的是src目录,
import { UserRuler, aa } from '@/unuse/components/user-rulerts' </script>
根据引用关系被修改为
<script setup> import { UserRuler, aa } from '../../unuse/components/user-rulerts.vue' </script>
这样子修改的好处是能在vscode中直接点击对应引用方法或组件进行跳转查看, 也加快了vscode的解析速度, 同时能一目了然看到引用的到底是vue还是后缀为js, 还能补全index.vue或index.js的引用, 但生产中我们这么写相对路径会比较麻烦, 所以我的操作是书写用绝对路径, 后面用工具统一恢复一下一下
👏 把工程按路由标记分类(对拆分工程很重要)
这个主要是咱们公司用的是微服务, 前端qiankun, 某个工程功能加着加着就好大了, 这时就有必要再按业务拆分成1,2两个工程, 拆分时, 有的文件可能只有1工程用了, 但有的文件两个工程都用上了, 咋检测? 用这个命令可以帮助区分
插件内置对router目录下的文件进行自动分析, 也就是说咱可以两个工程一样的代码, 1工程把2工程的路由注释掉, 2工程把1工程注释掉, 两边都用插件打个标记, 再把没有打标记的文件,逐一干掉完事
☝️ 一键更改文件名,驼峰命名为kable-case
之前工程命名也是五花八门, 用这个可以把工程名字统一为现在流行的kable-case, 搞完后工程看上去都是很舒服了
写在最后
这个些功能使用起来感觉不难, 但真设计起来, 各种各样的bug和坑, 整个插件做到现在commit有265次, 都是自己来来回回修改,一点点敲的, 我也洗完把我的这些成果公布出来, 有需要学习源码的,可以进到我git地址去克隆查看, 开源不易, 如果对你有帮助, 还请不吝啬一个小小的start, 你的支持是我开源的动力!
往期原创文章链接