成都网站建设设计

将想法与焦点和您一起共享

vue语法自动转typescript(解放双手)-创新互联

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

创新互联主营仙游网站建设的网络公司,主营网站建设方案,app开发定制,仙游h5微信小程序定制开发搭建,仙游网站营销推广欢迎仙游等地区企业咨询

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


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


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


@babel

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


@babel/parser


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


例如:


const code = 'const a = 1'
const ast = require("@babel/parser").parse(code)

文章名称:vue语法自动转typescript(解放双手)-创新互联
当前路径:http://chengdu.cdxwcx.cn/article/cohhic.html