前端工具-agmd(重构项目的神器)

311 阅读3分钟

前言

很高兴我的文章阅读量已经过万了, 在这之际, 再次放一个大招出来, 希望能帮到有重构项目需求的朋友们~_~

本期所要讲的插件是在原agmd上扩展的功能, 主要有:

✈️ 全程界面命令选择操作

⛵ 把工程所有引用更改绝对路径为相对路径(方便点击下钻查看文件)

♨️ 把工程所有引用文件都加上后缀(方便点击下钻查看文件)

☝️ 对路由进行自动分析

👏 把工程按路由标记分类(对拆分工程很重要)

☝️ 把工程按分类对拆分工程(自动拆分的错误可控, 手动拆分会有各种问题)

☝️ 一键更改文件名,驼峰命名为kable-case

另外本插件包含26个单元测试用例, 改用例覆盖84%的函数测试, 如果有兄弟需要二开扩展功能的, 这将会起到很大的帮助

制作动机

年前我就做了一个agmd的插件, 自动生成md文档加强版--cli制作 这个只是0.2的版本, 今年我不是又换了工作嘛, 新公司竟然没有做代码规范, 结果就是代码各种写法都有, 所以加入了一些新功能

功能介绍

✈️ 全程界面命令选择操作

这个使用了commander插件, 可以使得打入命令后能有个菜单弹出来供选择

image.png

⛵ 把工程所有引用更改绝对路径为相对路径/♨️ 把工程所有引用文件都加上后缀

注意这条命令需要在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, 你的支持是我开源的动力!

往期原创文章链接

# 自动生成md文档加强版--cli制作

# 玩转vue-demi,打造vue2/3通用插件

# vue-echarts源码解读

# 自动生成目录md文件

# 大屏页面缩放插件---升级改造

# 乾坤+vite整个架子

# vue和vite中怎么批量导入图片