CN117075873A - 组件转换方法、装置、设备及介质 - Google Patents

Abstract

本申请涉及金融科技领域，公开了一种组件转换方法，包括：获取初始组件代码，并确定初始组件代码对应的当前框架；获取目标框架对应的目标框架规则，其中，所述目标框架规则用于指导所述初始组件代码由所述当前框架转换至所述目标框架；将初始组件代码解析为第一抽象语法树，并根据目标框架规则转换第一抽象语法树，得到与目标框架对应的第二抽象语法树；还原第二抽象语法树，得到目标组件代码；利用在线编辑器运行目标组件代码，并根据运行结果确定目标组件代码是否通过运行测试，其中，在线编辑器集成在组件转换装置中。本申请的方法解决了现有前端代码转换工具功能单一，且需要手动搭建测试环境并进行测试的问题。

Description

组件转换方法、装置、设备及介质

技术领域

本申请涉及金融科技领域，尤其是涉及到一种组件转换方法、装置、设备及介质。

背景技术

在金融技术领域，前端应用通常需要与各种后端系统进行集成，而这些后端系统可能使用不同的技术栈和框架，常常会面对要二次开发前端应用的需求。此外，金融领域的前端应用通常需要长期维护并进行不断的迭代和优化，因此需要将前端组件代码转换到易于维护和扩展的框架，可以降低后续的开发成本，减少技术债务，并提供更大的灵活性来应对业务需求的变化。基于此，需要采用前端代码转换技术把一个前端框架的代码直接转换为另外一个前端框架的代码，开发人员开发一个公共的组件，然后采用前端代码转换技术转换成对应框架的公共组件，以便于这个公共组件用于到各个不同框架的项目中去。

然而目前市面上的前端代码转换工具功能比较单一，只能进行两个前端框架的之间的转换，不能进行多个框架的转化。同时现在的前端代码转换工具转换完后的代码运行的时候可能会有问题，需要测试人员手动搭建测试环境，在测试环境中测试代码并进行更改才能使得代码运行起来。

发明内容

有鉴于此，本申请提供了一种组件转换方法、装置、介质及设备，解决了现有前端代码转换工具功能单一，且需要手动搭建测试环境并进行测试的问题。

本申请的第一方面，提供了一种组件转换方法，应用于组件转换装置，所述方法包括：

获取初始组件代码，并确定所述初始组件代码对应的当前框架；

获取目标框架对应的目标框架规则，其中，所述目标框架规则用于指导所述初始组件代码由所述当前框架转换至所述目标框架；

将所述初始组件代码解析为第一抽象语法树，并根据所述目标框架规则转换所述第一抽象语法树，得到与所述目标框架对应的第二抽象语法树；

还原所述第二抽象语法树，得到目标组件代码；

利用在线编辑器运行所述目标组件代码，并根据运行结果确定所述目标组件代码是否通过运行测试，其中，所述在线编辑器集成在所述组件转换装置中。

本申请的第二方面，提供了一种组件转换装置，所述装置包括：

规则匹配模块，用于获取初始组件代码，并确定所述初始组件代码对应的当前框架；以及，获取目标框架对应的目标框架规则，其中，所述目标框架规则用于指导所述初始组件代码由所述当前框架转换至所述目标框架；

转换模块，用于将所述初始组件代码解析为第一抽象语法树，并根据所述目标框架规则转换所述第一抽象语法树，得到与所述目标框架对应的第二抽象语法树；以及，还原所述第二抽象语法树，得到目标组件代码；

在线编辑器，用于运行所述目标组件代码，并根据运行结果确定所述目标组件代码是否通过运行测试。

本申请的第三方面，提供了一种设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的指令或代码，所述处理器执行所述指令或代码时实现上述组件转换方法。

本申请的第四方面，提供了一种介质，其上存储有指令或代码，所述指令或代码被处理器执行时实现上述组件转换方法。

上述组件转换方法、装置、设备及介质所实现的方案，在组件转换装置中集成多个预设框架，并针对每两个框架设置转换规则，用于实现多种基于不同框架的转换功能，因而可根据实际需求选择不同的框架进行前端组件的转换，扩展了前端框架转化的范围，增强了转化的功能，解决了现有前端代码转换工具功能单一的问题。在此基础上，组件转换装置中集成了在线编辑器，在线编辑器可提供在线编辑以及运行功能，转换后的前端组件代码可直接运行在装置内嵌的在线编辑器中，并在测试通过后运用到对应框架的项目中，解决了转换框架后的目标组件代码报错或者代码不能运行，需要手动搭建测试环境并进行测试的问题。

上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1示出了本申请实施例提供的一种组件转换方法的流程示意图；

图2出了本申请实施例提供的另一种组件转换方法的流程示意图；

图3示出了本申请实施例提供的另一种组件转换方法的流程示意图；

图4出了本申请实施例提供的一种组件转换装置的结构框图；

图5出了本申请实施例提供的一种电子设备的结构框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本申请实施例提供的组件转换方法，可以应用在具有指令或程序运行能力的电子设备中。其中，电子设备可以但不限于各种服务器、工作站、个人计算机、笔记本电脑等。运行在不同的运算设备仅是方案在执行主体上的差异，本领域人员可预见在不同运算设备中运行能够产生相同的技术效果。下面通过具体的实施例对本发明进行详细的描述。

请参阅图1所示，图1为本发明实施例提供的组件转换方法的一个流程示意图，包括如下步骤：

S101：获取初始组件代码，并确定初始组件代码对应的当前框架。

S102：获取目标框架对应的目标框架规则，其中，目标框架规则用于指导初始组件代码由当前框架转换至目标框架。

本发明提供的方法应用于组件转换装置中，可用于把基于某个框架的组件代码转换为基于另一个框架的组件代码。具体地，组件转换装置中集成了多个前端框架，并相应地预设了多个框架规则，每个框架规则分别用于实现不同框架之间的代码转换。

在实际应用过程中，首先获取要进行转换的组件代码，也即初始组件代码，并确定初始组件代码基于哪个框架，将该框架作为当前框架。开发人员可直接输入当前框架信息以及目标框架信息，组件转换装置根据开发人员输入的信息确定当前框架以及目标框架，并获取相应的目标框架规则，进而依照目标框架规则实现初始组件代码由当前框架至目标框架的转换。此外，若开发人员未输入当前框架信息，则可解析初始组件代码，并根据代码规则以及特征来确定当前框架；若开发人员未输入目标框架信息，则组件转换装置生成提示信息，以提示开发人员确定要转换的目标框架。若开发人员输入的目标框架信息为该装置未集成的框架，则生成提示信息，以提示开发人员无法将初始组件代码转换成基于该目标框架的代码，并记录开发人员输入的目标框架信息，以便于针对组件转换装置扩展新的框架，进一步扩展了前端框架转化的范围，提高组件转换装置的适用广度。

例如，在金融行业中，开发人员可提供一个投资组合报表组件的代码作为初始组件代码，并分别输入当前框架信息为Angular框架，目标框架信息为React框架。则组件转换装置接收开发人员输入的代码以及这两个框架信息，在预设框架规则中选择用于实现Angular框架到React框架之间的转换的框架规则作为目标框架规则，进而利用该目标框架规则，将基于Angular框架开发的投资报表组件的代码转换至基于React框架的代码。

S103：将初始组件代码解析为第一抽象语法树，并根据目标框架规则转换第一抽象语法树，得到与目标框架对应的第二抽象语法树。

S104：还原第二抽象语法树，得到目标组件代码。

在步骤S103-S104中，将初始组件代码解析成抽象语法树(abstract syntaxtree，AST)的形式，得到第一语法抽象树，并基于该形式进行组件的转换，得到转换后的第二语法抽象树，最后将第二语法抽象树还原回到代码的形式，得到目标组件代码，其中，目标组件代码即为基于目标框架的组件代码。

其中，可以理解的是，抽象语法树是一种以树状结构表示代码的方式，通过这样的表达方式，可以更清晰地分辨代码中的层次结构、逻辑关系以及代码块之间的调用关系等。因此，可通过对语法抽象树进行遍历和修改，实现代码的生成和转换，得到基于目标框架的目标组件代码。

S105：利用在线编辑器运行目标组件代码，并根据运行结果确定目标组件代码是否通过运行测试，其中，在线编辑器集成在组件转换装置中。

在该步骤中，组件转换装置中集成了在线编辑器，在线编辑器具有解析前端代码的功能，可用于目标组件代码的编辑以及运行。具体地，在经过转换得到目标组件代码后，利用组件转换装置集成的在线编辑器直接运行目标组件代码，若目标组件代码不存在错误，则运行成功，通过运行测试；若目标组件代码存在错误，则会导致运行失败，显示相应的修改信息。开发人员可根据修改信息定位到存在错误的位置并进行修改，在修改后再次利用在线编辑器运行目标组件代码，直至运行成功，完成运行测试。

该实施例在组件转换装置中集成多个预设框架，并针对每两个框架设置转换规则，用于实现多种基于不同框架的转换功能，因而可根据实际需求选择不同的框架进行前端组件的转换，扩展了前端框架转化的范围，增强了转化的功能，解决了现有前端代码转换工具功能单一的问题。在此基础上，组件转换装置中集成了在线编辑器，在线编辑器可提供在线编辑以及运行功能，转换后的前端组件代码可直接运行在装置内嵌的在线编辑器中，并在测试通过后运用到对应框架的项目中，解决了转换框架后的目标组件代码报错或者代码不能运行，需要手动搭建测试环境并进行测试的问题。

进一步地，作为上述实施例具体实施方式的细化和扩展，为了完整说明本实施例的具体实施过程，提供了其他组件转换方法，如图2所示，另一种组件转换方法包括如下步骤：

S201：调用预设规则设置模板，其中，预设规则设置模板包括源框架字段、目标框架字段、节点标识字段以及与节点标识字段对应的转换函数字段。

S202：根据每两个框架之间的映射关系，填充预设规则设置模板，得到两个框架之间的预设框架规则。

在步骤S201-S202中，组件转换装置中预先设置了多个预设框架规则，每个预设框架规则均可用于实现两个框架之间的代码转换，从而组件转换装置可在其中选择与当前框架以及目标框架对应的预设框架规则作为目标框架规则，以实现初始组件代码由当前框架至目标框架的转换。

在具体应用过程中，可利用预设规则设置目标预先设置多个预设框架规则。具体地，预设规则设置模板包括多个字段，调用模板并对模板中的字段进行填充即可实现预设框架规则的编写。例如，预设规则设置模板中可包括源框架字段、目标框架字段、节点标识字段以及与节点标识字段对应的转换函数字段。其中，源框架字段以及目标框架字段可分别填入不同的框架名称或框架标识(ID)，在目标框架规则的选择过程中，可将每个预设框架规则的源框架字段与当前框架进行匹配，将目标框架字段与目标框架进行匹配，并根据匹配结果选择出目标框架规则。节点标识字段以及对应的转换函数字段根据源框架和目标框架之间的映射关系填写，首先确定由源框架转换至目标框架，要对哪些节点进行改写，将其填入节点标识字段中；然后确定每个节点的改写规则，并将其填入对应的转换函数字段中。

例如，在由Angular框架转换至React框架时，可利用React框架的useState和useEffect来管理组件的状态和生命周期。因此，将Angular框架的框架名或框架标识写入源框架字段；将React框架的框架名或框架标识写入目标框架字段；将组件类的声明和生命周期填入预设框架规则模板的节点标识字段，并根据useState和useEffect填写对应的转换函数字段，得到由Angular框架转换至React框架的预设框架规则。可以理解的是，每个预设框架规则中可包含多个节点标识字段，而不仅局限于本申请实施例中的具体节点。

S203：利用dumi框架生成初始组件库；响应于组件转换请求，在初始组件库中确定待转换组件，并确定待转换组件的源码为初始组件代码，并确定初始组件代码对应的当前框架。

在该步骤中，除开发人员手动编写初始组件代码外，还可利用dumi框架自动生成组件代码，得到初始组件库。可以理解的是，dumi是一个易于使用的React组件文档解决方案，提供了一些辅助工具和插件，可以辅助开发人员自动生成组件代码。例如dumi-tools可用于自动创建组件的骨架代码，可以使用dumi-tools命令来创建一个新的组件，并生成相应的文件结构和基本代码。此外，react-component-generator、create-react-app、umi等均可用于辅助开发人员自动生成基于React的组件代码，以填充初始组件库。

在具体应用过程中，初始组件库中包含多个利用dumi框架自动生成的、基于React的组件代码，开发人员可发送组件转换请求，组件转换装置响应于组件转换请求，解析请求中包含的初始组件信息，进而在初始组件库中确定与该初始组件信息对应的待转换组件，并将其源码作为初始组件代码。

例如，在金融行业，开发人员可利用dumi框架自动生成金融行业相关的组件代码，例如财务报表显示组件、投资组合列表显示组件等专用组件，也可生成前端基础组件，例如按钮组件、弹窗组件、输入框组件、Toast提示组件、滚动组件等通用组件。

S204：在多个预设框架规则中确定目标框架规则，其中，目标框架规则的源框架字段与当前框架匹配，且目标框架规则的目标框架字段与目标框架匹配。

在该步骤中，组件转换装置集成了多个预设框架，并预先设置了每两个预设框架之间的框架规则，每个预设框架规则均填写了源框架字段以及目标框架字段，标识该预设框架规则用于指导代码由源框架向目标框架转换。在实际使用过程中，选择源框架字段与当前框架匹配，并且目标框架字段与目标框架匹配的预设框架规则，作为目标框架规则。

S205：调用Babel工具，并利用parser插件解析初始组件代码，将初始组件代码转换为第一抽象语法树；遍历第一抽象语法树中的节点，并根据目标框架规则确定待转换节点；在目标框架规则中，调用与待转换节点对应的转换函数，并利用转换函数处理待转换节点，得到目标节点；在第一抽象语法树中，将待转换节点替换为目标节点，得到与目标框架对应的第二抽象语法树；利用generator插件将第二抽象语法树转换为目标组件代码。

在该步骤中，可利用Babel工具中的parser插件将初始组件代码转化为一个抽象语法树，也即第一抽象语法树。可以理解的是，Babel是一个source to source(源码到源码)的JavaScript编译器，将JavaScript代码输入Babel工具，即可利用Babel执行代码的修改，在此基础上，Babel工具可使用插件系统进行代码转换，以实现广泛的功能。在具体应用中，Babel工具的编译流程主要分为解析(parse)、转换(transform)、生成(generate)三个部分。

在遍历节点的过程中，可利用Babel工具中的traverse插件遍历第一抽象语法树，并利用types插件定义第一抽象语法树的节点，以实现第一语法树中节点的遍历。啊遍历过程中，找到要转换的节点，作为待转换节点。

例如，React组件使用JSX语法编写，第一抽象语法树的JSXElement节点表示一个React组件的元素，可将这些JSXElement节点转换为目标框架对应的元素，具体地，可修改这些节点对应的元素标签、属性、事件绑定等信息。

此外，在金融领域中，还可将变量以及函数命名作为待修改节点，由于金融领域的代码通常对变量以及函数命名有特殊的要求，例如用特定的命名规范、前缀或后缀，因此可修改第一抽象语法树中的相应节点，以符合金融领域的命名约定。还可将数据类型作为待修改节点，由于金融领域通常使用特定的数据类型和数据结构来处理财务数据，例如日期时间、货币、利率等，因此可修改第一抽象语法树中与这些数据类型相关的节点，确保在转换到其他框架时能正确处理和表示这些数据。还可将金融相关的计算逻辑作为待修改节点，由于金融领域的计算逻辑可能与其他行业有所不同，因此可修改第一抽象语法树中涉及数学计算、逻辑判断、统计分析等方面的节点，以确保在转换到其他框架时能正确处理金融计算需求。此外，基于金融领域的特殊性，还可将日期以及时间作为待修改节点，还可将合规性以及安全性相关的验证作为待修改节点，例如涉及数据隐私、敏感信息等的节点。

在转换过程中，可利用Babel工具中的visitor插件，在目标框架规则中分别调用与每个待转换节点对应的转换函数，将第一抽象语法树中的待替换节点作为参数输入转换函数，利用转换函数对待替换节点进行转换处理，得到目标节点。将第一抽象语法树中的每个待替换都替换成为相应的目标节点，即可得到与目标框架对应的第二抽象语法树。

最后，可利用Babel工具中的generator插件，根据修改后的第二抽象语法树生成代码字符串和sourcemap，进而将第二抽象语法树还原成代码的形式，得到转换后的目标组件代码。

S206：在多个预设框架对应的语法规则中选择与目标框架对应的目标语法规则；利用在线编辑器读取目标组件代码，并在目标组件代码中查找不符合目标语法规则的错误代码，生成错误代码对应的错误标识。

在该步骤中，在线编辑器预先集成了每个预设框架对应的语法规则，在生成目标组件代码后，可基于对应的语法规则进行校验。具体地，首先在每个预设框架对应的语法规则中，查找到目标框架对应的语法规则，作为目标语法规则；然后利用在线编辑器读取目标组件代码，并判断目标组件代码是否符合目标语法规则；若目标组件代码符合目标语法规则，则语法校验通过，可继续进行运行测试；若目标组件代码不符合目标语法规则，则语法校验不通过，并将不符合目标语法规则的部分作为错误代码，生成与其对应的错误标识。其中，错误标识可以为颜色高亮标识，也可以为下划线标识，还可以为校验日志信息中的错误日志等。

此外，在线编辑器还可预先集成eslint语法规则，同时基于eslint语法规则与目标语法规则对目标组件代码进行语法校验，进一步提高语法校验的准确度。

S207：利用在线编辑器运行目标组件代码，并根据运行结果判断目标组件代码是否通过运行测试。

S208：若目标组件代码通过运行测试，则在目标项目中添加目标组件代码，并运行目标项目，其中，目标项目为基于目标框架开发的项目。

在该步骤中，将完成运行测试的目标组件代码添加至目标项目中，并运行项目。通过前述组件转换，在不进行二次开发的情况下，实现前端组件代码直接用于目标框架的项目中，减少人工成本。

图3示出了本申请另一种组件转换方法的流程示意图，如图所示，开发人员选择要进行转换的公共组件，并将该公共组件的代码上传至前端代码转换工具(也即组件转换装置)中，组件转换装置根据开发人员输入的源框架信息确定当前框架，或分析公共组件的代码来确定当前框架；此后由开发人员在组件转换装置中选择要转换的框架作为目标框架，组件转换装置接收开发人员输入的目标框架，进而执行由源框架至目标框架的代码转换，将基于源框架的公共组件代码转换为基于目标框架；完成转换的代码可直接运行在内嵌于组件转换装置的在线编辑器上，若在线运行失败，则可显示错误信息，并提交给开发人员修改，若在线运行成功，也可基于开发人员的主动修改请求，修改转换后的代码；若在线运行成功，且开发人员不主动修改，则视为运行测试通过，得到转换框架后的公共组件；最后将转换框架后的公共租界运用到基于目标框架的项目中。通过这样的流程，可实现组件的自动转换以及在线编辑测试，节省二次开发以及搭建测试环境测试的时间成本以及人力成本。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

可见，本方案通过在组件转换装置中集成多个预设框架，例如vue、react、angular、svelte等，并针对每个两个框架设置转换规则，利用Babel工具中的插件，将初始组件代码转换为语法抽象树的形式，并对语法抽象树的节点进行修改，将修改后的语法抽象树还原至代码的形式，从而实现多种不同框架之间的组件代码转换，解决了现有前端代码转换工具只能实现vue或者react框架转换，功能较为单一的问题。此外，本方案提供了不同的当前框架确定方式，装置可自动对上传的代码进行框架分析，确定初始组件代码对应的当前框架，也可根据开发人员输入的框架信息确定当前框架，开发人员可根据使用习惯选择合适的方式，因此使用过程的灵活性更高。在此基础上，组件转换装置中集成了在线编辑器，可直接通过在线编辑器实现编辑、运行、预览组件效果等，相较于传统的搭建测试环境测试组件的方法，操作更加方便，效率更高。此外，在线编辑器中集成了eslint语法规则和多个框架语法规则，在进行语法校验时，可同时参考eslint语法规则和目标框架对应的目标语法规则，校验结果更加精准。进一步地，还可通过dumi框架自动生成若干前端组件代码，得到初始组件库，在开发过程中，可直接从初始组件库中选择组件并将其源码作为初始组件代码，执行转换操作，进一步降低了开发人员的工作量，提高了开发效率。

在一实施例中，提供一种组件转换装置，该组件转换装置与上述实施例中组件转换方法一一对应。如图4所示，该组件转换装置包括：规则匹配模块、转换模块以及在线编辑器。各功能模块详细说明如下：

规则匹配模块，用于获取初始组件代码，并确定初始组件代码对应的当前框架；以及，获取目标框架对应的目标框架规则，其中，目标框架规则用于指导初始组件代码由当前框架转换至目标框架；

转换模块，用于将初始组件代码解析为第一抽象语法树，并根据目标框架规则转换第一抽象语法树，得到与目标框架对应的第二抽象语法树；以及，还原第二抽象语法树，得到目标组件代码；

在线编辑器，用于运行目标组件代码，并根据运行结果确定目标组件代码是否通过运行测试。

在一个实施例中，在线编辑器中集成多个预设框架对应的语法规则；

相应地，在线编辑器还用于：

在多个预设框架对应的语法规则中选择与目标框架对应的目标语法规则；

读取目标组件代码，并在目标组件代码中查找不符合目标语法规则的错误代码，生成错误代码对应的错误标识。

在一个实施例中，装置还包括规则配置模块，用于：

调用预设规则设置模板，其中，预设规则设置模板包括源框架字段、目标框架字段、节点标识字段以及与节点标识字段对应的转换函数字段；

根据每两个框架之间的映射关系，填充预设规则设置模板，得到两个框架之间的预设框架规则

相应地，所述规则匹配模块还用于：

在多个预设框架规则中确定目标框架规则，其中，目标框架规则的源框架字段与当前框架匹配，且目标框架规则的目标框架字段与目标框架匹配。

在一个实施例中，转换模块用于：

遍历第一抽象语法树中的节点，并根据目标框架规则确定待转换节点；

在目标框架规则中，调用与待转换节点对应的转换函数，并利用转换函数处理待转换节点，得到目标节点；

在第一抽象语法树中，将待转换节点替换为目标节点。

在一个实施例中，转换模块用于：

调用Babel工具，并利用parser插件解析初始组件代码，将初始组件代码转换为第一抽象语法树；

遍历第一抽象语法树中的节点，包括：

利用traverse插件遍历第一抽象语法树，并利用type插件定义第一抽象语法树的节点；

调用与待转换节点对应的转换函数，并利用转换函数处理待转换节点，得到目标节点，包括：

利用visitor插件调用转换函数，并将第一抽象语法树种的待替换节点输入转换函数，得到目标节点；

还原第二抽象语法树，得到目标组件代码，包括：

利用generator插件将第二抽象语法树转换为目标组件代码。

在一个实施例中，装置还包括运行模块，用于：

若目标组件代码通过运行测试，则在目标项目中添加目标组件代码，并运行目标项目，其中，目标项目为基于目标框架开发的项目。

在一个实施例中，装置还包括初始化模块，用于：

利用dumi框架生成初始组件库；

相应地，规则匹配模块用于：

响应于组件转换请求，在初始组件库中确定待转换组件，并确定待转换组件的源码为初始组件代码。

在一个实施例中，提供了一种电子设备，该电子设备可为计算机、服务器、工作站等设备，也可为手机、平板、车载移动终端等移动设备，还可为其他具有程序执行能力的设备，该电子设备其内部结构图可以如图5所示。该电子设备包括通过处理器、存储器和网络模块。其中，该电子设备的处理器用于提供计算和控制能力。该电子设备的存储器包括非易失性和/或易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、指令或代码。该内存储器为非易失性存储介质中的操作系统和指令或代码的运行提供环境。该指令或代码被处理器执行时以实现一种上述组件转换方法的功能或步骤。该电子设备的网络模块可包括网络接口和/或无线网络模块，电子设备可通过网络模块与其他设备或服务平台通信。此外，该电子设备还可包括显示屏和输入装置等。

在一个实施例中，提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的指令或代码，处理器执行指令或代码时实现以下步骤：

获取初始组件代码，并确定初始组件代码对应的当前框架；

获取目标框架对应的目标框架规则，其中，所述目标框架规则用于指导所述初始组件代码由所述当前框架转换至所述目标框架；

将初始组件代码解析为第一抽象语法树，并根据目标框架规则转换第一抽象语法树，得到与目标框架对应的第二抽象语法树；

还原第二抽象语法树，得到目标组件代码；

利用在线编辑器运行目标组件代码，并根据运行结果判断目标组件代码是否通过运行测试，其中，在线编辑器集成在组件转换装置中。

在一个实施例中，提供了一种存储介质，其上存储有指令或代码，指令或代码被处理器执行时实现以下步骤：

获取初始组件代码，并确定初始组件代码对应的当前框架；

获取目标框架对应的目标框架规则，其中，所述目标框架规则用于指导所述初始组件代码由所述当前框架转换至所述目标框架；

将初始组件代码解析为第一抽象语法树，并根据目标框架规则转换第一抽象语法树，得到与目标框架对应的第二抽象语法树；

还原第二抽象语法树，得到目标组件代码；

利用在线编辑器运行目标组件代码，并根据运行结果判断目标组件代码是否通过运行测试，其中，在线编辑器集成在组件转换装置中。

需要说明的是，上述关于存储介质或电子设备所能实现的功能或步骤，可对应参阅前述方法实施例中的相关描述，为避免重复，这里不再一一描述。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过指令或代码来指令相关的硬件来完成，所述的指令或代码可存储于一非易失性可读取存储介质中，该指令或代码在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中的单元或流程并不一定是实施本申请所必须的。本领域技术人员可以理解实施场景中的系统中的单元可以按照实施场景描述进行分布于实施场景的系统中，也可以进行相应变化位于不同于本实施场景的一个或多个系统中。上述实施场景的单元可以合并为一个单元，也可以进一步拆分成多个子单元。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (10)

1.一种组件转换方法，其特征在于，应用于组件转换装置，所述方法包括：

获取初始组件代码，并确定所述初始组件代码对应的当前框架；

获取目标框架对应的目标框架规则，其中，所述目标框架规则用于指导所述初始组件代码由所述当前框架转换至所述目标框架；

将所述初始组件代码解析为第一抽象语法树，并根据所述目标框架规则转换所述第一抽象语法树，得到与所述目标框架对应的第二抽象语法树；

还原所述第二抽象语法树，得到目标组件代码；

利用在线编辑器运行所述目标组件代码，并根据运行结果确定所述目标组件代码是否通过运行测试，其中，所述在线编辑器集成在所述组件转换装置中。

2.根据权利要求1所述的方法，其特征在于，所述在线编辑器中集成多个预设框架对应的语法规则；

相应地，在所述利用在线编辑器运行所述目标组件代码之前，所述方法还包括：

在所述多个预设框架对应的语法规则中选择与所述目标框架对应的目标语法规则；

利用所述在线编辑器读取所述目标组件代码，并在所述目标组件代码中查找不符合所述目标语法规则的错误代码，生成所述错误代码对应的错误标识。

3.根据权利要求1所述的方法，其特征在于，在所述确定所述初始组件代码对应的当前框架之前，所述方法还包括：

调用预设规则设置模板，其中，所述预设规则设置模板包括源框架字段、目标框架字段、节点标识字段以及与所述节点标识字段对应的转换函数字段；

根据每两个框架之间的映射关系，填充所述预设规则设置模板，得到所述两个框架之间的预设框架规则；

相应地，所述获取目标框架对应的目标框架规则，包括：

在多个所述预设框架规则中确定所述目标框架规则，其中，所述目标框架规则的源框架字段与所述当前框架匹配，且所述目标框架规则的目标框架字段与所述目标框架匹配。

4.根据权利要求3所述的方法，其特征在于，所述根据所述目标框架规则转换所述第一抽象语法树，包括：

遍历所述第一抽象语法树中的节点，并根据所述目标框架规则确定待转换节点；

在所述目标框架规则中，调用与所述待转换节点对应的转换函数，并利用所述转换函数处理所述待转换节点，得到目标节点；

在所述第一抽象语法树中，将所述待转换节点替换为所述目标节点。

5.根据权利要求4所述的方法，其特征在于，所述将所述初始组件代码解析为第一抽象语法树，包括：

调用Babel工具，并利用parser插件解析所述初始组件代码，将所述初始组件代码转换为所述第一抽象语法树；

所述遍历所述第一抽象语法树中的节点，包括：

利用traverse插件遍历所述第一抽象语法树，并利用type插件定义所述第一抽象语法树的节点；

所述调用与所述待转换节点对应的转换函数，并利用所述转换函数处理所述待转换节点，得到目标节点，包括：

利用visitor插件调用所述转换函数，并将所述第一抽象语法树种的待替换节点输入所述转换函数，得到所述目标节点；

所述还原所述第二抽象语法树，得到目标组件代码，包括：

利用generator插件将所述第二抽象语法树转换为所述目标组件代码。

6.根据权利要求1所述的方法，其特征在于，所述方法还包括：

若所述目标组件代码通过运行测试，则在目标项目中添加所述目标组件代码，并运行所述目标项目，其中，所述目标项目为基于所述目标框架开发的项目。

7.根据权利要求1所述的方法，其特征在于，在所述获取初始组件代码之前，所述方法还包括：

利用dumi框架生成初始组件库；

相应地，所述获取初始组件代码，包括：

响应于组件转换请求，在所述初始组件库中确定待转换组件，并确定所述待转换组件的源码为所述初始组件代码。

8.一种组件转换装置，其特征在于，所述装置包括：

规则匹配模块，用于获取初始组件代码，并确定所述初始组件代码对应的当前框架；以及，获取目标框架对应的目标框架规则，其中，所述目标框架规则用于指导所述初始组件代码由所述当前框架转换至所述目标框架；

转换模块，用于将所述初始组件代码解析为第一抽象语法树，并根据所述目标框架规则转换所述第一抽象语法树，得到与所述目标框架对应的第二抽象语法树；以及，还原所述第二抽象语法树，得到目标组件代码；

在线编辑器，用于运行所述目标组件代码，并根据运行结果确定所述目标组件代码是否通过运行测试。

9.一种存储介质，其上存储有程序或指令，其特征在于，所述程序或指令被处理器执行时实现如权利要求1至7中任一项所述的方法。

10.一种电子设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至7中任一项所述的方法。