需求背景
前提
现在越来越多的公司会根据自己内部的需求去独立开发维护一套公司内部的组件库项目,我司也是这样,内部二次封装了一个组件库项目(jsx+ts+vue3),并且随着项目需求不断的增加与变更,组件也一直在去适配需求, 因此内部定义的props属性等一直都在发生变化。那么这种变动就会涉及到API表格的修改,但是由于开发时间问题或者有部分同事在修改完属性后没有注意到API表格的同步修正,导致了现在所有组件都要去比对更新字段,维护成本很高。
作为一个新时代程序员。手动去对比有点low ,想着可以使用代码去实现自动化。同时也可以避免以后再发生类似的问题。
正好想到了之前技术调研时看到过类似的功能
因此决定开发根据props自动生成API文档的功能。
具体效果如下
外部定义props:
转成API文档表格后:
技术选型
在之前组件库和命令行工具开发中了解到了ts-morph 参考链接:zhuanlan.zhihu.com/p/616134364
插件简介: 该插件使得开发人员可以通过编程的方式访问和操作 TypeScript 抽象语法树(AST)。 TS Compiler API 提供了一系列的 API 接口,可以帮助我们分析、修改和生成 TypeScript 代码。 不过 TS Compiler API 的使用门槛较高,需要比较深厚的 TypeScript 知识储备。 为了简化这个过程,社区出现了一些基于 TS Compiler API 的工具, 如 ts-simple-ast、dprint、ttypescript 等,而 ts-morph 就是其中之一, 它提供了更加友好的 API 接口,并且可以轻松地访问 AST, 完成各种类型的代码操作,例如重构、生成、检查和分析等。
不过相关使用资料太少了,研究了好几天才知道要怎么做,并且该种方法百分百通用, 同时学会了之后我们就可以随意操文件了,方便日后来的各种需求
实现思路及ts-morph使用分析
我们外部定义props如上图所示,需要将其变成对象数组格式,从而使用fs操作文件。
1:安装并引入我们的ts-morph库
2.这时候就需要借助神器了,ts-morph.com/setup/ast-v…
...后续待补充中