一种不同前端框架间的代码转换方法及系统及装置制造方法及图纸

本发明专利技术公开了一种不同前端框架间的代码转换方法及系统及装置，涉及前端技术领域，该方法包括获取源文件组件类型并通过匹配的方式筛选出第一文件组件和第二文件组件，对第一文件组件解析得到模板块、代码块和样式块，对代码块解析得到第一抽象语法树，对第一抽象语法树遍历得到第二抽象语法树，对模板块遍历得到第三抽象语法树，合并第二抽象语法树和第三抽象语法树得到第四抽象语法树，基于第四抽象语法树生成第一代码并与样式块的代码合并，完成转换；对第二文件组件解析得到第五抽象语法树，对第五抽象语法树遍历得到第六抽象语法树，基于第六抽象语法树生成第二代码，完成转换。通过本发明专利技术能够提高不同前端框架间代码转换率。换率。换率。

【技术实现步骤摘要】
一种不同前端框架间的代码转换方法及系统及装置


[0001]本专利技术涉及前端
，具体地，涉及一种不同前端框架间的代码转换方法及系统及装置。

技术介绍

[0002]在现代web前端开发项目中，除极少数还在使用前后端不分离的开发模式外，几乎都是使用前端三大框架来开发web应用，三大框架分别是React、Vue和Angular，而国内大多数公司使用最多的是React和Vue框架，Vue作为框架中的后来者，有借鉴React和Angular的地方，所以Vue和React、Angular之间源码转换是可行且难度不高的，但在转换各种语法写法层面上重复繁琐，人工手动只能转少量的代码。目前还有一种针对React和Vue框架代码互转的方案是让不同框架共存一个项目里，可以不转换源码来使用多个框架，但项目整体不易于维护，对于要统一技术栈的项目来说不适用。因此如何解决不同前端框架组件之间的移植问题是很有意义的，现有技术中对于React和Vue框架代码之间的互转，是通过将Vue2单文件源码通过Vue官方提供的插件vue
‑
compiler
‑
sfc转换为AST（抽象语法树），再修改所得的AST使其符合React类组件的语法，然后再使用修改后的AST生成转换成React组件的源码。但上述框架间代码互转的方法无法处理一些框架独特语法的互转和用户自定义命令的互转，存在一定的局限性，对含有用户自定义命令和独特语法较多的框架代码互转整体效果较差。

技术实现思路

[0003]为提高不同前端框架间的代码转换率，本专利技术提供了一种不同前端框架间的代码转换方法，所述方法包括以下步骤：S1.获取源文件组件的类型；S2.将所述源文件组件的类型与第一预设文件类型进行匹配，若匹配成功，则将所述源文件组件命名为第一文件组件并执行步骤S3，若匹配失败，则执行步骤S9；S3.对所述第一文件组件进行解析得到模板块、代码块和样式块；S4.对所述代码块进行解析得到第一抽象语法树；S5.对所述第一抽象语法树进行遍历得到第二抽象语法树包括，获取所述第一抽象语法树中节点类型并与第一预设节点类型进行匹配，若匹配成功，则使用第一规则对匹配成功的节点进行处理，若匹配失败，用户则对所有匹配失败的节点设置对应的第二规则进行处理；S6.对所述模板块进行遍历得到第三抽象语法树包括，获取所述第三抽象语法树中节点类型并与第二预设节点类型进行匹配，若匹配成功，则使用第三规则对匹配成功的节点进行处理，若匹配失败，用户则对所有匹配失败的节点设置对应的第四规则进行处理；S7.合并所述第二抽象语法树和所述第三抽象语法树得到第四抽象语法树；S8.基于所述第四抽象语法树，生成第一代码，将所述第一代码与所述样式块的代
码进行合并，得到第一目标组件的文件代码；S9.将所述源文件组件的类型与第二预设文件类型进行匹配，若匹配成功，则将所述源文件组件命名为第二文件组件并执行步骤S10，若匹配失败，则退出；S10.对所述第二文件组件进行解析得到第五抽象语法树；S11.对所述第五抽象语法树进行遍历得到第六抽象语法树包括，获取所述第五抽象语法树中节点类型并与第三预设节点类型进行匹配，若匹配成功，则使用第五规则对匹配成功的节点进行处理，若匹配失败，用户则对所有匹配失败的节点设置对应的第六规则进行处理；S12.基于所述第六抽象语法树，生成第二代码，所述第二代码为第二目标组件的文件代码。
[0004]专利技术原理：首选获取源文件组件的类型并与第一预设文件类型进行匹配，筛选出第一文件组件，然后对第一文件组件进行解析得到模板块、代码块和样式块，其中模板块为第一文件组件的模板代码，代码块为第一文件组件的JS代码（JavaScript简称“JS”，是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。），样式块为第一文件组件的样式代码。对代码块进行解析得到第一抽象语法树（抽象语法树是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，也就是将js代码进行结构化的转化，转化为一种数据结构。），然后对第一抽象语法树进行遍历得到第二抽象语法树，框架间在进行代码互转时，对于框架的常规语法可以采用现有的第一规则进行处理，但对于框架间的独特语法就需要用户设置不同的第二规则进行处理，对于框架的内置指令可以采用现有的第三规则进行处理，但对于自定义指令就需要用户设置不同的第四规则进行处理。再对模板块进行遍历得到第三抽象语法树，对于框架的内置hooks（钩子函数）可以采用现有第五规则进行处理，但对于框架的自定义hooks就需要用户设置不同的第六规则进行处理。将第二抽象语法树和第三抽象语法树进行合并得到第四抽象语法树，利用第四抽象语法树生成第一代码（对第四抽象语法树进行深度遍历，构建可以表示转换后代码的字符串，再通过代码生成工具转换成代码），由于样式块的代码对于所有组件都是通用的，因此直接将第一代码和样式块的代码进行合并得到第一目标组件的文件代码。通过将源文件组件的类型与第二预设文件类型进行匹配，筛选出第二文件组件，并对第二文件组件进行解析得到第五抽象语法树，再对第五抽象语法树遍历得到第六抽象语法树，利用第六抽象语法树生成第二代码（对第六抽象语法树进行深度遍历，构建可以表示转换后代码的字符串，再通过代码生成工具转换成代码），第二代码就为第二目标组件的文件代码。通过上述方法，可以提高不同前端框架间代码的整体转换率。
[0005]优选的，若匹配失败，用户则对所有匹配失败的节点设置对应的第二规则进行处理包括：a1.获取匹配失败对应节点的处理结果；a2.判断所述处理结果是否成功，若是，则执行步骤a3，若否，则执行步骤a4；a3.将匹配失败对应节点的节点类型添加到所述第一预设节点类型中，将匹配失败对应节点的第二规则添加到所述第一规则中；a4.为匹配失败对应节点设置第七规则进行处理；a5.循环步骤a1
‑
a4，直到所有匹配失败对应节点的处理结果都成功。
[0006]其中，由于是用户设置第二规则对节点进行处理，因此存在处理结果不成功的情况，通过获取节点的处理结果，判断该处理结果是否成功，如果成功，则将该节点对应的节点类型及第二规则分别加入到第一预设节点类型和第一规则中，这样在第二次遇到该节点时，可以直接使用第一规则进行处理，提高转换效率；但如果处理结果失败，则需要为该节点重新设置第七规则进行处理，直到该节点的处理结果为成功，再将节点对应的节点类型和成功处理该节点的规则加入到第一预设节点类型和第一规则中。
[0007]优选的，所述方法还包括，获取预设前端框架组件的版本信息，基于所述版本信息，获取所述预设前端框架组件的框架信息，基于所述框架信息，对所述第一预设节点类型、所述第一规则、所述第二预设节点类型、所述第三规则、所述第三预设节点类型和所述第四规则进行更新。
[0008]其中，由于不同前端框架的版本会一直更新，更新前后的框架也会存在差异，因此通过获取预设框架的版本信息和框架信息，来对框架间代码转换的规则进行更新，使该方法同样也能处理更新后前端框架间的代码互转问题。
[00本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种不同前端框架间的代码转换方法，其特征在于，所述方法包括以下步骤：S1.获取源文件组件的类型；S2.将所述源文件组件的类型与第一预设文件类型进行匹配，若匹配成功，则将所述源文件组件命名为第一文件组件并执行步骤S3，若匹配失败，则执行步骤S9；S3.对所述第一文件组件进行解析得到模板块、代码块和样式块；S4.对所述代码块进行解析得到第一抽象语法树；S5.对所述第一抽象语法树进行遍历得到第二抽象语法树包括，获取所述第一抽象语法树中节点类型并与第一预设节点类型进行匹配，若匹配成功，则使用第一规则对匹配成功的节点进行处理，若匹配失败，用户则对所有匹配失败的节点设置对应的第二规则进行处理；S6.对所述模板块进行遍历得到第三抽象语法树包括，获取所述第三抽象语法树中节点类型并与第二预设节点类型进行匹配，若匹配成功，则使用第三规则对匹配成功的节点进行处理，若匹配失败，用户则对所有匹配失败的节点设置对应的第四规则进行处理；S7.合并所述第二抽象语法树和所述第三抽象语法树得到第四抽象语法树；S8.基于所述第四抽象语法树，生成第一代码，将所述第一代码与所述样式块的代码进行合并，得到第一目标组件的文件代码；S9.将所述源文件组件的类型与第二预设文件类型进行匹配，若匹配成功，则将所述源文件组件命名为第二文件组件并执行步骤S10，若匹配失败，则退出；S10.对所述第二文件组件进行解析得到第五抽象语法树；S11.对所述第五抽象语法树进行遍历得到第六抽象语法树包括，获取所述第五抽象语法树中节点类型并与第三预设节点类型进行匹配，若匹配成功，则使用第五规则对匹配成功的节点进行处理，若匹配失败，用户则对所有匹配失败的节点设置对应的第六规则进行处理；S12.基于所述第六抽象语法树，生成第二代码，所述第二代码为第二目标组件的文件代码。2.根据权利要求1所述的一种不同前端框架间的代码转换方法，其特征在于，若匹配失败，用户则对所有匹配失败的节点设置对应的第二规则进行处理包括：a1.获取匹配失败对应节点的处理结果；a2.判断所述处理结果是否成功，若是，则执行步骤a3，若否，则执行步骤a4；a3.将匹配失败对应节点的节点类型添加到所述第一预设节点类型中，将匹配失败对应节点的第二规则添加到所述第一规则中；a4.为匹配失败对应节点设置第七规则进行处理；a5.循环步骤a1
‑
a4，直到所有匹配失败对应节点的处理结果都成功。3.根据权利要求1所述的一种不同前端框架间的代码转换方法，其特征在于，所述方法还包括，获取预设前端框架组件的版本信息，基于所述版本信息，获取所述预设前端框架组件的框架信息，基于所述框架信息，对所述第一预设节点类型、所述第一规则、所述第二预设节点类型、所述第三规则、所述第三预设节点类型和所述第四规则进行更新。4.根据权利要求1所述的一种不同前端框架间的代码转换方法，其特征在于，若匹配成功，则使用第一规则对匹配成功的节点进行处理包括，基于深度优先遍历方法，将匹配成功
的节点中的若干第一预设函数进行转换处理得到对应若干第一函数，所有所述第一函数均满足第一目标组件的第一语法。5.根据权利要求1所述的一种不同前端框架间的代码转换方法，其特征在于，若匹配成功，则使用第三规则对匹配成功的节点进行处理包括，基于深度优先遍历方法，将匹配成功的节点中的若干内置指令进行转换。6.根据权利要求1所述的一种不同前端框架间的代码转换方法，其特征在于，基于...

【专利技术属性】
技术研发人员：请求不公布姓名，
申请(专利权)人：成都数之联科技股份有限公司，
类型：发明
国别省市：