具体实施方式

为使本发明的目的、内容和优点更加清楚，下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。

为了解决上述问题，本发明提出一种web前端代码的转换方法，可以快速的根据原有软件前端框架重新构建新的软件前端框架。例如可以将Vue(一个创建单页应用的Web应用框架)和React(一个为数据提供渲染为HTML视图的开源JavaScript库)相互转换，将Vue2(Vue框架的一个版本)升级为Vue3(Vue2框架的升级版本，与Vue2差异较大)。将需要转换的前端文件提交后，根据旧有框架在可转换的新框架中选择需要转换的框架，转换成功后即可获取新的前端文件。

本发明创造过程中需经过基础步骤S0，基础步骤S0包括以下步骤：

S01、调研前端项目常用软件框架；

S02、根据每两个框架的语法文档等信息确定该两框架是否可进行相互转换，并进行记录；

S03、根据每个框架的语法文档等信息对该框架设置语法代码规范标准；

S04、根据每个框架的配置所需等信息设置每个框架所需的文件结构；

S05、根据每个框架的语法文档等信息设置该框架所需的抽象语法树(AbstractSyntax Tree，简称AST，是源代码语法结构的一种抽象表示)格式；

S06、对两个可进行相互转换的框架进行对应的抽象语法树格式转换函数开发；

S07、对每个框架进行对应的抽象语法树反编译函数文件开发；

S08、对两个可相互转换的框架进行文件结构对应关系调研记录。

其中基础步骤S06的函数流程可分解为以下几步：

S061、使用Javascript的遍历方法等对抽象语法树进行遍历，提取出定义属性的属性值、属性类型、默认值等信息；

S062、处理不同格式的属性值，根据新抽象语法树的格式转换其中的生命周期、组件状态等信息；

S063、根据新抽象语法树的格式拼接处理后的信息，最后获取新的抽象语法树。

本发明的系统架构如下所示，该架构包括如下步骤：

S1、选择框架

输入前端项目文件后，先选择现有框架的名称，根据基础步骤S02的调研结果可展示出现有框架可转换的框架，从中选择想要转换的新框架。

S2、代码检测及规范

在框架转换前需要对代码进行检测，根据输入文件的框架配置信息检测输入文件的框架是否为选择的现有框架，然后根据基础步骤S03设置的代码规范标准检测输入文件的框架是否符合对应标准，如果不太规范，可用eslint等代码格式化工具进行格式化代码，规范代码后才可进行下一步。

S3、代码转换

代码检测和规范后进行代码转换，转换成选择的新框架格式代码。

此模块为该发明的重点，该模块架构及操作步骤如下：

在进行模块S2代码检测和规范后，该方法将进行以下几步操作：

S31、对于通过第S2模块“代码检测及规范”过程的项目文件，首先通过Javascript的FileSystemObject对象(具有访问计算机文件系统的功能)等方法提取项目文件的目录结构，并根据上述基础步骤S04设置的框架所需文件结构创造选择的新框架的相应的结构文件和根据上述基础步骤S08记录的新旧框架之间的文件结构对应关系保存新旧框架文件结构的对应关系；

S32、然后对项目文件使用解析器例如babylon解析器(一种babel中使用的JavaScript解析器)来解析，解析最后生成抽象语法树；

S33、对抽象语法树进行代码重铸，根据基础步骤S05设置的新框架所需的抽象语法树格式和基础步骤S06开发的抽象语法树格式转换函数将抽象语法树转换成新框架所需格式；

S34、使用基础步骤S07的抽象语法树反编译函数将重铸的抽象语法树反编译为新框架的代码；

S35、通过代码格式化工具如prettier-eslint美化新框架的代码后输出代码文件；

S36、根据步骤S31中的新旧框架文件结构的对应关系将步骤S35输出的文件放入新框架对应文件夹下；

S37、以上任意一步操作出现异常，将会把异常记录下来，并判断是否能进行下一步，可以进行的话继续下一步，不可以进行则停止该模块操作并进入模块S5阶段。

S4、输出文件

代码转换没有出现异常时将进入该阶段，输出的文件即新的前端框架文件。

S5、输出失败原因及解决方案

代码转换出现异常并结束代码转换操作后将进入该阶段，转换过程出现的异常及对应的解决方案会被提示出来，研发人员可根据解决方案进行操作后再重新输入文件进行框架转换。

以前端转换React框架为Vue框架为例，本发明所述的典型使用流程包括以下步骤：

(1)输入前端项目文件后首先进行框架选择，原有框架选定React框架，根据基础步骤S02的调研结果给出的对应可转换框架中选择Vue框架，进行下一步；

(2)选择框架后需进行代码检测，根据输入文件的框架配置信息检测输入文件的框架是否为React框架，根据基础步骤S03设置的代码规范标准检测输入文件的框架是否符合对应标准，不符合的情况下通过eslint等格式化工具进行规范后进行下一步，符合则直接进入下一步；

(3)进行代码检测和规范后进行代码转换，转换成选择的新框架格式代码，具体操作见下方描述；

(4)转换成功，则进行成功提示后输出转换后的文件；

(5)转换失败，则输出失败原因以及相关的解决方案，解决后再进行重新输入转换，重新进入步骤(1)。

其中步骤(3)具体将经历以下操作：

①通过Javascript的FileSystemObject对象等方法提取原React框架项目文件的目录结构，并根据基础步骤S04设置的框架所需文件结构生成框架为Vue的新的项目文件并根据上述基础步骤S08记录的新旧框架之间的文件结构对应关系保存React和Vue框架的文件结构的对应关系；

②对于原React框架的项目文件使用babylon等解析器来解析，解析生成抽象语法树；

③对抽象语法树进行代码重铸，根据基础步骤S05设置的Vue框架所需的抽象语法树格式和基础步骤S06开发的抽象语法树格式转换函数将抽象语法树转换成Vue框架所需格式；

④使用基础步骤S07的抽象语法树反编译函数将重铸的抽象语法树反编译为Vue框架的代码；

⑤通过prettier-eslint等代码格式化工具来美化代码；

⑥根据上方步骤(3)的操作①保存的React和Vue框架的文件结构的对应关系，将输出的文件放入Vue框架项目对应文件夹下；

⑦以上任意一步操作出现异常，将会把异常记录下来，并判断是否能进行下一步，可以进行的话继续下一步，不可以进行则停止步骤(3)，转入转换失败阶段，进入步骤(5)。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变形，这些改进和变形也应视为本发明的保护范围。