vue语法自动转打印稿(解放双手)

　　

代码的复用是一件很常见的事情,如果是公共代码的复用那还好说,直接做成一个内部私有库,想用的话安装一下npm包就行了,但是业务代码的复用就不好做成包了,一般都是复制粘贴
　　

　　

我一般写代码的时候,如果觉得某段业务代码以前见过其他人写过,那么考虑到业务优先性,只要别人的代码不是写得太烂,我一般会优先抄别人的代码,省得自己再写一遍
　　

　　

然后我就遇到了一个问题,公司目前前端项目大部分都是vue,早期没有ts这个说法,后来新项目才逐渐引入ts,所以新项目用的是vue-ts,而一般想抄的老代码都是没有引入ts的,固然,这二者是可以兼容存在的,但对于有着轻微代码洁癖的我来说,还是不想看到同一个项目代码里掺杂着ts和非ts两种写法的,所以只要有时间,我都会尽量手动把老代码转化为ts规范的
　　难度倒是没多少,只不过每一份都要手动转一遍,转得多了我忽然陷入沉思,我好像重复自己了啊,不太能忍,于是决定写一个自动将vue-js转成vue-ts的工具
　　

　　

这个工具的代码已经被我放到github上了,并且为了方便使用,我已经将其做成了一个npm包,感兴趣的可以亲自试一下
　　

　　

　　

涉及到js语法转换的东西,第一时间想到的就是巴别塔了,巴别塔早就提供了丰富完善的js语法的解析与反解析工具
　　

　　

<强> @babel/解析器
　　

　　

@babel/解析器是负责解析js语法的工具,可以理解为将js语法转化为ast,方便开发者进行自定义处理,通过插件来支持多种js语法,例如es6, es7, ts,流,jsx甚至是一些实验室的语法(实验语言建议)等
　　

　　

例如:
　　

　　 　　 　　const代码=甤onst=1’ 　　const ast=要求(“@babel/解析器”).parse(代码) 　　之前 　　 　　

转换后的ast就是一个对象、数据结构描述的就是const=1这一个表达式

　　

　　

对这个ast进行遍历,就可以获得所有当前解析的js语法的信息,自然也能对其进行修改
　　

　　

<强> @babel/发电机
　　

　　

有解析就有反解析,@babel/发电机用于将@babel/解析解析出的ast转化回字符串形式的js代码
　　

　　 　　 　　const代码=甤onst=1; 　　const ast=要求(“@babel/解析器”).parse(代码) 　　const codeStr=要求(@babel/发电机).default .code (ast) 　　代码===codeStr//=比;真正的 　　之前 　　 　　

　　

　　

一般@babel/解析器,@babel/发电机和@babel/遍历会一起出现使用,前两个前面已经介绍过了,至于@babel/导线,其主要作用就是对@babel/解析器生成的ast进行遍历,提供了一些方法,省得开发者自己去做各种判断
　　

　　

不过我这里写的这个程序,因为不需要太过细致的解析,所以没用@babel/遍历这个东西,我按照自己的意愿对ast进行遍历操作
　　

　　

除此之外,巴别塔还提供了一些其他的工具库啦帮助库啦,一般都不太用得到,想要详细了解的可以自己去看文档
　　

　　

本文下面所说的操作,基本上都是在@babel/解析器转换后的ast,以及@babel/发电机解析后的代码字符串上进行的
　　

　　

　　

　　

vue官网对于道具的介绍在道具
　　

　　

因此道具的以下几种写法都是符合规范的:
　　

　　 　　 　　出口默认{ 　　道具:“大小”,“myMessage”, 　　道具:{ 　　答:数字, 　　(数字、字符串), 　　c:“defaultValue”, 　　d: { 　　类型(数字、字符串): 　　} 　　艾凡:{ 　　类型:数字, 　　默认值:0, 　　要求:没错, 　　验证器:功能(价值){ 　　在返回值=0 　　} 　　} 　　} 　　} 　　之前 　　 　　

上述转换为ts对应如下:
　　

　　 　　 　　出口的默认类YourComponent延伸Vue { 　　@Prop()只读的大小:任何|定义 　　@Prop()只读的myMessage:任何|定义 　　@Prop({类型:数字})只读的:|数量定义 　　@Prop((数字、字符串))只读的b:数字字符串| |定义 　　@Prop()只读的c !:任何 　　@Prop({类型:(数字、字符串)})只读的d:数字字符串| |定义 　　@Prop({类型:数字,默认值:0,要求:真的,验证器:功能(价值){ 　　在返回值=0 　　}})只读的e !数量: 　　} 　　

vue语法自动转打印稿(解放双手)