并且在这段话上,还专门用红色感叹号标识了一下,说白了就是不建议你在业务代码中,因为这不利于数据的追踪,完全可以使用成熟的 vueBus或者 vuex代替,一般也不会用到这个东西的,我写这个转换程序也是为了转换业务代码,所以我没有对这两个做处理,如果发现代码中存在这两个属性,会提示你自己手动处理
emit && ref
这两个都只是一种类似语法糖的东西,可以不做处理
文件处理
上述是针对一份 .vue文件的详细处理的逻辑,想要真正的接入实际文件乃至文件夹的处理,自然少不了文件的读取和更新操作,这就涉及到 node的文件处理内容了,不过并不复杂,就不多说了
npm 包
代码写完之后,为了简化使用流程,我将其打包成了一个 npm包上传到 npm上去了,想要使用的话,只需要下载这个包,然后在命令行中输入指令即可
npm i transvue2ts -g
安装完之后,默认是跟 vue-cli一样,会把此库的路径写到系统的 path中,直接打开命令行工具即可使用,同时支持单文件和文件目录耳朵转化transvue2ts是库的指令,第二个参数是需要处理的文件(夹)的 完整全路径例如:处理 E:\project\testA\src\test.vue文件:
transvue2ts E:\project\testA\src\test.vue => 输出路径:E:\project\testA\src\testTs.vue
处理 E:\project\testA\src文件夹下的所有 .vue文件:
transvue2ts E:\project\testA\src => 输出路径:E:\project\testA\srcTs
对于单文件来说,其必须是 .vue结尾,转化后的文件将输出到同级目录下,文件名为原文件名 + Ts,例如 index.vue => indexTs.vue;对于文件目录来说,程序将会对此文件目录进行递归遍历,找出这个文件夹下所有的 .vue文件进行转化,转化后的文件将按照原先的目录结构全部平移到同级目录下的一个新文件夹中,例如 /src => /srcTs
总结
这个转化程序看起来很麻烦的样子,概括一下,其实就三步:
列举所有需要进行转化的 vue-js语法及其多变的写法
列举 js-ts语法之间的转化映射关系
写语法转化代码
本质上这个程序就是一个翻译器,将 vue-js语法翻译成 vue-ts语法,难点在于你要找到二者之间所有语法的映射关系,并知道如何进行处理,所以实际上大部分都是体力活
只要你明白了这其中的套路,其实换个什么 vue 转 wepy,或者 react转微信小程序,其实都是一样,都是翻译器,都是体力活,只不过有些很轻松,也就是搬几块砖的事情,而有些体力活比较辛苦还需要动脑子罢了