Cross-framework code automatic conversion method and device, computer equipment and storage medium

Abstract

The invention discloses a cross-frame code automatic conversion method and device, computer equipment and a storage medium, and the method comprises the steps: obtaining corresponding to-be-converted project code data in response to a code conversion instruction sent by a user terminal; performing syntactic analysis on the to-be-converted project code data to obtain a first abstract syntax tree; obtaining a preset syntax tree mapping strategy, and correspondingly converting the first abstract syntax tree into a second abstract syntax tree based on the syntax tree mapping strategy; generating target code data based on the second abstract syntax tree, and sending the target code data to the user terminal; wherein the target framework corresponding to the target code data is different from the initial framework of the to-be-converted project code data. According to the embodiment of the invention, the to-be-converted project code data constructed in the initial framework can be automatically extracted based on the two syntax trees and then is subjected to code conversion, so that the target code data under the target framework can be quickly obtained, the consumed time is short, and the accuracy is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method, device, computer equipment and storage medium for automatic cross-framework code conversion. Background Art

[0002] In front-end development, the Vue framework (a lightweight, progressive JavaScript framework suitable for building user interfaces) and the Taro framework (an open, cross-end, cross-framework solution) are both widely used. However, directly converting page code built with Vue and Webpack (a module bundling tool) into Taro app code often requires a lot of manual modification and adjustment, resulting in the following technical drawbacks:

[0003] 1) The manual conversion process is cumbersome and consumes a lot of time and manpower;

[0004] 2) Due to human factors, errors are prone to occur, affecting code quality and function implementation;

[0005] 3) For complex page structures and logic, manual conversion is more difficult and accuracy is difficult to guarantee. Summary of the Invention

[0006] The embodiments of the present invention provide a method, apparatus, computer device and storage medium for automatic cross-framework code conversion, aiming to solve the problem in the prior art that directly converting page code built based on Vue and Webpack into Taro applet code usually requires a lot of manual modification and adjustment, which is not only time-consuming but also has low accuracy.

[0007] In a first aspect, an embodiment of the present invention provides a method for automatic cross-framework code conversion, which includes:

[0008] Responding to the code conversion instruction sent by the user terminal, obtaining the corresponding project code data to be converted;

[0009] Performing syntax analysis on the project code data to be converted in the initial framework to obtain a first abstract syntax tree;

[0010] Converting the first abstract syntax tree into a second abstract syntax tree based on a preset syntax tree mapping strategy;

[0011] Generate target code data based on the second abstract syntax tree and grammatical rule information under the target framework, and send the target code data to the user terminal; wherein the target framework corresponding to the target code data is different from the initial framework of the project code data to be converted.

[0012] In a second aspect, an embodiment of the present invention further provides a cross-framework code automatic conversion device, which includes:

[0013] an initial code data acquisition unit, configured to acquire corresponding code data of an item to be converted in response to a code conversion instruction sent by a user terminal;

[0014] A first abstract syntax tree acquisition unit is configured to perform syntax analysis on the project code data to be converted in the initial frame to obtain a first abstract syntax tree;

[0015] A second abstract syntax tree acquisition unit, configured to convert the first abstract syntax tree into a second abstract syntax tree based on a preset syntax tree mapping strategy;

[0016] A target code data generating unit is used to generate target code data based on the second abstract syntax tree and the grammatical rule information under the target framework, and send the target code data to the user terminal; wherein the target framework corresponding to the target code data is different from the initial framework of the project code data to be converted.

[0017] In a third aspect, an embodiment of the present invention further provides a computer device comprising a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the method described in the first aspect is implemented.

[0018] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, wherein the computer storage medium stores a computer program, wherein the computer program includes program instructions, and when the program instructions are executed by a processor, the method described in the first aspect can be implemented.

[0019] The embodiment of the present invention provides a method, apparatus, computer device and storage medium for automatic cross-frame code conversion. The method includes: obtaining corresponding project code data to be converted in response to a code conversion instruction sent by a user terminal; performing syntax analysis on the project code data to be converted to obtain a first abstract syntax tree; obtaining a preset syntax tree mapping strategy, and converting the first abstract syntax tree into a second abstract syntax tree based on the syntax tree mapping strategy; generating target code data based on the second abstract syntax tree, and sending the target code data to the user terminal; wherein the target framework corresponding to the target code data is different from the initial framework of the project code data to be converted. The embodiment of the present invention can convert the project code data to be converted constructed in the initial framework based on two automatic extractions of syntax trees, thereby realizing rapid acquisition of target code data under the target framework, which not only saves time but also improves accuracy. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0021] Figure 1 A schematic diagram of an application scenario of the cross-framework code automatic conversion method provided by an embodiment of the present invention;

[0022] Figure 2 A schematic diagram of a process for automatically converting cross-framework code provided by an embodiment of the present invention;

[0023] Figure 3 A schematic diagram of a sub-process of a method for automatic cross-frame code conversion provided by an embodiment of the present invention;

[0024] Figure 4 A schematic diagram of a sub-process of a method for automatic cross-frame code conversion provided by an embodiment of the present invention;

[0025] Figure 5 A schematic diagram of a sub-process of a method for automatic cross-frame code conversion provided by an embodiment of the present invention;

[0026] Figure 6 A schematic diagram of a sub-process of a method for automatic cross-frame code conversion provided by an embodiment of the present invention;

[0027] Figure 7 A schematic diagram of a sub-process of a method for automatic cross-frame code conversion provided by an embodiment of the present invention;

[0028] Figure 8 A schematic block diagram of an automatic cross-frame code conversion device provided by an embodiment of the present invention;

[0029] Figure 9 A schematic block diagram of a computer device provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0030] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of them. All other embodiments obtained by ordinary technicians in this field based on the embodiments of the present invention without making any creative efforts shall fall within the scope of protection of the present invention.

[0031] It will be understood that when used in this specification and the appended claims, the terms “comprises” and “comprising” indicate the presence of described features, integers, steps, operations, elements and / or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or groups thereof.

[0032] It should also be understood that the terminology used in this specification is for the purpose of describing particular embodiments only and is not intended to limit the present invention. As used in the specification and appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms unless the context clearly indicates otherwise.

[0033] It should be further understood that the term "and / or" used in the present description and the appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.

[0034] Please also refer to Figure 1 and Figure 2 ,in Figure 1 This is a schematic diagram of a scenario of the cross-framework code automatic conversion method according to an embodiment of the present invention. Figure 2 Schematic diagram of the process of automatic cross-frame code conversion method provided by the embodiment of the present invention. Figure 1 As shown, the cross-frame code automatic conversion method provided by the embodiment of the present invention is applied to the server 10 , and the server 10 is communicatively connected with the user terminal 20 .

[0035] like Figure 2 As shown, the method includes the following steps S110-S140.

[0036] S110 . Responding to the code conversion instruction sent by the user terminal, obtaining corresponding code data of the project to be converted.

[0037] In this embodiment, the technical solution is described with the server as the execution entity. A cross-framework code conversion platform is deployed on the server. After a user successfully logs in to the cross-framework code conversion platform on the server by entering user login information (such as login account and password) using a user terminal, a communication connection is successfully established with the server. Afterwards, the user can operate the user terminal to import the project code data to be converted in the code import area of ​​the user interaction interface corresponding to the cross-framework code conversion platform, and then select the code conversion button in the user interaction interface to trigger the code conversion instruction. After the server detects the code conversion instruction, it obtains the project code data to be converted corresponding to the code conversion instruction, and the obtained project code data to be converted serves as the initial code data to be converted.

[0038] Among them, if the initial framework of the project code data to be converted is the Vue framework as an example, it can be converted across frameworks into target code data under a non-Vue framework (such as target code data under the Taro framework) through the cross-frame code automatic conversion platform in the server.

[0039] S120: Perform syntax analysis on the project code data to be converted in the initial framework to obtain a first abstract syntax tree.

[0040] In this embodiment, still referring to the above example, the project code to be converted using the Vue framework can be first parsed, and at least project initialization, parser determination, extraction and conversion of preset template components (such as Vue template files), and JavaScript code extraction and conversion can be performed in sequence to obtain a first abstract syntax tree. The obtained first abstract syntax tree is an abstract syntax tree for the initial framework. If it is not converted in any way to generate code data, it will still be code data under the initial framework, which does not meet the actual needs of the user. The first abstract syntax tree needs to be processed.

[0041] In one embodiment, if Figure 3 As shown, step S120 includes:

[0042] S121, obtaining the project structure of the project code data to be converted and extracting the entry file based on the project structure;

[0043] S122. Obtain a preset template component file and JavaScript code based on the entry file;

[0044] S123: Based on the syntax analysis strategy preset in the initial framework, abstract syntax trees are extracted from the preset template component file and the JavaScript code respectively, and the first abstract syntax tree is formed.

[0045] In this embodiment, to quickly and accurately obtain the abstract syntax tree of the project code being converted, the project structure must first be obtained and the entry file extracted from this structure. The entry file can then be used to quickly locate the preset template component files and JavaScript code. Finally, syntax trees are extracted for the preset template component files and JavaScript code separately and then merged to obtain the first abstract syntax tree.

[0046] In one embodiment, if Figure 4 As shown, step S121 includes:

[0047] S1211: If it is determined that the project structure of the project code data to be converted corresponds to a single-page structure, extract the entry file from the root directory in the project structure;

[0048] S1212. If it is determined that the project structure of the project code data to be converted corresponds to a multi-page structure, extract the entry file from the multi-page folder in the project structure.

[0049] In this embodiment, if it is determined that the project structure of the project code data to be converted corresponds to a single-page structure, the entry file is extracted from the root directory in the project structure, such as src / main.js; if it is determined that the project structure of the project code data to be converted corresponds to a multi-page structure, the entry file is extracted from a multi-page folder in the project structure, such as src / pages / xx / main.js (where xx represents the subdirectory name in the file path). It can be seen that by determining the single-page or multi-page structure of the project structure, the entry file can be located more quickly, so that the relevant data generated by the abstract syntax tree in the project code data to be converted can be obtained more quickly later.

[0050] In one embodiment, if Figure 5 As shown, step S123 includes:

[0051] S1231: Acquire template data, script data, and style data in the preset template component file based on the syntax analysis strategy, and compile the template data, script data, and style data respectively based on a first preset parser in the syntax analysis strategy to form a first sub-abstract syntax tree;

[0052] S1232: Compile the JavaScript code based on the second preset parser in the syntax analysis strategy to obtain a second sub-abstract syntax tree;

[0053] S1233: Compose the first abstract syntax tree from the first sub-abstract syntax tree and the second sub-abstract syntax tree.

[0054] In this embodiment, the parsing strategy pre-deployed in the server includes at least a first preset parser and a second preset parser, wherein the first preset parser is the parser encapsulated by the vueTemplateCompiler.compile method, and the second preset parser is the @babel / parser tool. After the parsing strategy obtains the template data, script data, and style data in the preset template component file (such as a Vue component file), the obtained data is compiled separately based on the first preset parser and then aggregated to obtain the first sub-abstract syntax tree.

[0055] Similarly, after obtaining the JavaScript code in the entry file, its core information can also be parsed based on the second preset parser to obtain the corresponding second sub-abstract syntax tree. Finally, the first sub-abstract syntax tree and the second sub-abstract syntax tree are aggregated and merged (which can be understood as directly splicing the two) to obtain the first abstract syntax tree. For example, in the first sub-abstract syntax tree, information such as component data and style data can be obtained, in the second sub-abstract syntax tree, API call data, routing data, third-party library data and performance optimization data can be obtained, and in the first abstract syntax tree, all the information included in the above two sub-abstract syntax trees can be obtained. It can be seen that through the above method, the relevant data in the entry file can be quickly extracted and converted into the first abstract syntax tree through multiple preset parsers in the syntax analysis strategy.

[0056] S130: Convert the first abstract syntax tree into a second abstract syntax tree based on a preset syntax tree mapping strategy.

[0057] In this embodiment, if a syntax tree mapping strategy is pre-deployed in the server, which is used to convert the first abstract syntax tree into the second abstract syntax tree, the second abstract syntax tree suitable for the target framework can be quickly obtained through the above syntax mapping process.

[0058] In one embodiment, if Figure 6 As shown, step S130 includes:

[0059] S131. Obtain component data, API call data, routing data, compiled style data, third-party library data, and performance optimization data in the first abstract syntax tree;

[0060] S132: Based on the syntax tree mapping strategy, the component data, the API call data, the routing data, the compiled style data, the third-party library data, and the performance optimization data are syntax-mapped to obtain the second abstract syntax tree.

[0061] In this embodiment, still referring to the aforementioned example, component data, API call data (API stands for Application Programming Interface), routing data, compiled style data, third-party library data, and performance optimization data can be obtained in the first abstract syntax tree. The above data are important related data that need to be syntax-mapped. After the component data, the API call data, the routing data, the compiled style data, the third-party library data, and the performance optimization data are syntax-mapped respectively through the syntax tree mapping strategy, the second abstract syntax tree can be composed of each mapped data. It can be seen that after all the important related data in the first abstract syntax tree are syntax-mapped, a second abstract syntax tree for guiding the generation of target code data can be obtained.

[0062] In one embodiment, if Figure 7 As shown, step S132 includes:

[0063] S1321, performing syntax mapping on the component structure, template syntax, component life cycle, and state management data in the component data based on the syntax tree mapping strategy to obtain component mapping data;

[0064] S1322: Perform syntax mapping on the network request and native API data in the API call data based on the syntax tree mapping strategy to obtain API call mapping data;

[0065] S1323. Perform syntax mapping on the routing configuration data in the routing data based on the syntax tree mapping strategy to obtain routing mapping data;

[0066] S1324: Perform syntax mapping on the CSS style data in the compiled style data based on the syntax tree mapping strategy to obtain style mapping data;

[0067] S1325. Perform syntax mapping on the third-party library data based on the syntax tree mapping strategy to obtain third-party library mapping data;

[0068] S1326. Perform syntax mapping on the performance optimization data based on the syntax tree mapping strategy to obtain performance optimization data mapping data;

[0069] S1327: The second abstract syntax tree is composed of the component mapping data, the API call mapping data, the routing mapping data, the style mapping data, the third-party library mapping data, and the performance optimization data mapping data.

[0070] In this embodiment, when the component data, the API call data, the routing data, the compiled style data, the third-party library data, and the performance optimization data are respectively syntax-mapped using the syntax tree mapping strategy, the specific process is as follows:

[0071] A1) Based on the syntax tree mapping strategy, the component structure, template syntax, component life cycle and state management data in the component data are respectively syntax mapped. Specifically: the single file component in the Vue component data is mapped <template> 、 <script>和<style>这三个部分需要语法映射至目标框架下的组件模板、逻辑处理部分和样式部分；将Vue组件数据中的模板语法转换成目标框架下的JSX语法(是一种JavaScript的语法扩展)；将Vue组件数据中的组件生命周期对应的生命周期钩子函数(如created、mounted等)转换成目标框架下的生命周期方法；将Vue组件数据中的状态管理数据由Vuex转换成目标框架下的状态管理机制；

[0072] A2)基于所述语法树映射策略将所述API调用数据中的网络请求、原生API数据进行语法映射具体是：将API调用数据中的网络请求转换成目标框架下的API方法如taro.request；将在初始框架下的原生API数据转换成目标框架下的对应API调用方法，如将API调用数据中的localStorage替换为目标框架下的taro.setStorage和taro.getStorage；

[0073] A3)基于所述语法树映射策略将所述路由数据中的路由配置数据进行语法映射具体是：将初始框架下的Vue Router转换成目标框架下的Taro路由解决方案；

[0074] A4)基于所述语法树映射策略将所述编译后样式数据中的CSS类样式数据进行语法映射具体是：将初始框架下的CSS类样式数据转换成目标框架下Taro所支持的样式；

[0075] A5)基于所述语法树映射策略将所述第三方库数据进行语法映射具体是：将初始框架下的Vue.js中使用的第三方库需要检查是否支持目标框架，若支持则直接使用该第三方库，否则需要寻找替代且支持目标框架的第三方库；

[0076] A6)基于所述语法树映射策略将所述性能优化数据进行语法映射具体是：基于目标框架的代码性能限制要求，将初始框架下的性能优化数据进行调整以重新对在目标框架下的目标代码数据进行额外的性能优化和分包。

[0077] 在完成了对第一抽象语法树中的重要相关数据全部进行语法映射后，全部数据即可组成第二抽象语法树。可见，通过上述遍历方式实现了对第一抽象语法树中的重要相关数据全部进行语法映射。

[0078] S140、基于所述第二抽象语法树和在目标框架下的语法规则信息生成目标代码数据，并将所述目标代码数据发送至所述用户终端。

[0079] 其中，所述目标代码数据对应的目标框架和所述待转换项目代码数据的初始框架不相同。

[0080] 在本实施例中，当在服务器中获取到了第二抽象语法树后，结合与目标框架对应的代码生成策略，即可快速生成目标代码数据。所得到的目标代码数据可以由服务器发送至用户终端，以及时提示用户已完成了跨框架代码自动处理过程。

[0081] 在一实施例中，步骤S140包括：

[0082] 获取与所述语法规则信息对应的代码转换策略，并基于所述代码转换策略将所述第二抽象语法树进行代码转换，得到所述目标代码数据。

[0083] 在本实施例中，仍参考上述示例，若目标框架为Taro框架时，与所述第二抽象语法树对应的代码转换策略则是与Taro框架对应的代码转换策略，通过该代码转换策略对所述第二抽象语法树依次进行环境准备(如安装与目标框架对应的依赖，如为npminstall--save-dev@babel / core@babel / parser@babel / traverse@babel / generator)，通过第一预设工具(如@babel / traverse)遍历所述第二抽象语法树中的所有<Text>组件替换成<View>组件，通过第二预设工具(如@babel / generator)将通过第一预设工具修改后的第二抽象语法树进行代码生成，从而得到所述目标代码数据。可见，通过上述方式实现了目标框架下目标代码数据的自动生成，且无需人工参与。

[0084] 可见，实施该方法的实施例能将在初始框架中构建的待转换项目代码数据基于两次语法树自动抽取后进行代码转换，实现了快速获取目标框架下的目标代码数据，不仅耗时短，而且提升了准确率。

[0085] 图8是本发明实施例提供的一种跨框架代码自动转换装置的示意性框图。如图8所示，对应于以上跨框架代码自动转换方法，本发明还提供一种跨框架代码自动转换装置100。该跨框架代码自动转换装置100包括用于执行上述跨框架代码自动转换方法的单元。请参阅图8，该跨框架代码自动转换装置100包括：初始代码数据获取单元110、第一抽象语法树获取单元120、第二抽象语法树获取单元130和目标代码数据生成单元140。

[0086] 初始代码数据获取单元110，用于响应于用户终端发送的代码转换指令，获取对应的待转换项目代码数据。

[0087] 在本实施例中，是以服务器为执行主体描述技术方案。在服务器中部署有跨框架代码自动转换平台，用户使用用户终端录入了用户登录信息(如包括登录账号和登录密码等)成功登录了服务器中的跨框架代码自动转换平台后，则成功与服务器建立了通讯连接。之后，用户可以操作用户终端在跨框架代码自动转换平台对应的用户交互界面中的代码导入区域中导入待转换项目代码数据，然后选择用户交互界面中的代码转换按钮以触发代码转换指令。在服务器检测到了代码转换指令后，则获取与该代码转换指令对应的所述待转换项目代码数据，而且所获取到的待转换项目代码数据则作为初始待转换的代码数据。

[0088] 其中，若以待转换项目代码数据的初始框架为Vue框架为例，通过服务器中的跨框架代码自动转换平台可以将其跨框架转换为非Vue框架下的目标代码数据(如Taro框架下的目标代码数据)。

[0089] 第一抽象语法树获取单元120，用于对在初始框架中的所述待转换项目代码数据进行语法分析，得到第一抽象语法树。

[0090] 在本实施例中，仍参考上述示例，可先对采用Vue框架的待转换项目代码进行语法分析，至少依次进行项目初始化、解析器确定、预设模板组件(如为Vue模板文件)提取及转换、JavaScript代码提取及转换即可对应得到第一抽象语法树。所得到的第一抽象语法树是针对初始框架的抽象语法树，若对其不作任何转换处理以用于生成代码数据，仍会是初始框架下的代码数据，不满足用户实际需求，还需对第一抽象语法树进行处理。

[0091] 在一实施例中，第一抽象语法树获取单元120用于：

[0092] 获取所述待转换项目代码数据的项目结构并基于所述项目结构提取入口文件；

[0093] 基于所述入口文件获取预设模板组件文件和JavaScript代码；

[0094] 基于所述初始框架中预设的语法分析策略对所述预设模板组件文件和所述JavaScript代码分别进行抽象语法树提取，并组成所述第一抽象语法树。

[0095] 在本实施例中，为了实现快速且准确对待转换项目代码的抽象语法树获取，首先需获取到其项目结构，并通过所述项目结构来提取入口文件。之后，通过入口文件可以快速定位到预设模板组件文件和JavaScript代码。最后，分别对预设模板组件文件和JavaScript代码进行语法树提取后再进行合并，即可得到所述第一抽象语法树。

[0096] 在一实施例中，所述基于所述入口文件获取预设模板组件文件和JavaScript代码，包括：

[0097] 若确定所述待转换项目代码数据的项目结构对应于单页结构，则从所述项目结构中的根目录提取所述入口文件；

[0098] 若确定所述待转换项目代码数据的项目结构对应于多页结构，则从所述项目结构中的多页面文件夹中提取所述入口文件。

[0099] 在本实施例中，若确定所述待转换项目代码数据的项目结构对应于单页结构，则从所述项目结构中的根目录如为src / main.js提取所述入口文件；若确定所述待转换项目代码数据的项目结构对应于多页结构，则从所述项目结构中的多页面文件夹如为src / pages / xx / main.js中提取所述入口文件(其中，xx表示文件路径中的子目录名称)。可见，通过确定项目结构的单页或多页结构，能更加快速定位到入口文件，以便于后续更快速的获取到所述待转换项目代码数据中与抽象语法树生成的相关数据。

[0100] 在一实施例中，所述基于所述初始框架中预设的语法分析策略对所述预设模板组件文件和所述JavaScript代码分别进行抽象语法树提取，并组成所述第一抽象语法树，包括：

[0101] 基于所述语法分析策略获取所述预设模板组件文件中的模板数据、脚本数据和样式数据，并基于所述语法分析策略中的第一预设解析器分别对所述模板数据、脚本数据和样式数据进行编译以组成第一子抽象语法树；

[0102] 基于所述语法分析策略中的第二预设解析器对所述JavaScript代码进行编译，得到第二子抽象语法树；

[0103] 由所述第一子抽象语法树和所述第二子抽象语法树组成所述第一抽象语法树。

[0104] 在本实施例中，在服务器中预先部署的语法分析策略中至少包括第一预设解析器和第二预设解析器，其中第一预设解析器为vueTemplateCompiler.compile方法所封装得到的解析器，第二预设解析器为@babel / parser工具。通过所述语法分析策略获取所述预设模板组件文件(如Vue组件文件)中的模板数据、脚本数据和样式数据后，基于第一预设解析器将获取到的上述数据分别进行编译后再汇总，即可得到第一子抽象语法树。

[0105] 同样的，在获取到了入口文件中的JavaScript代码后，也可基于第二预设解析器对其核心信息进行解析从而得到相应的第二子抽象语法树。最后将第一子抽象语法树和第二子抽象语法树汇总合并(可以理解为将两者直接拼接)，从而得到所述第一抽象语法树。例如，在第一子抽象语法树中可以获取到组件数据及样式数据等信息，在第二子抽象语法树中可以获取到API调用数据、路由数据、第三方库数据和性能优化数据，在第一抽象语法树中则能获取到上述两个子抽象语法树中包括的全部信息。可见，通过上述方式，可以快速通过语法分析策略中的多个预设解析器将入口文件中的相关数据抽取并转换成第一抽象语法树。

[0106] 第二抽象语法树获取单元130，用于基于预设的语法树映射策略将所述第一抽象语法树对应转换成第二抽象语法树。

[0107] 在本实施例中，若在服务器中预先部署了语法树映射策略，其用于将第一抽象语法树对应转换成第二抽象语法树，通过上述语法映射处理，可以快速得到适用于目标框架下的第二抽象语法树。

[0108] 在一实施例中，第二抽象语法树获取单元130用于：

[0109] 获取所述第一抽象语法树中的组件数据、API调用数据、路由数据、编译后样式数据、第三方库数据和性能优化数据；

[0110] 基于所述语法树映射策略将所述组件数据、所述API调用数据、所述路由数据、所述编译后样式数据、所述第三方库数据和所述性能优化数据分别进行语法映射，得到所述第二抽象语法树。

[0111] 在本实施例中，仍参考前述示例，在第一抽象语法树中能获取到组件数据、API调用数据(API全称是Application Programming Interface，表示应用程序编程接口)、路由数据、编译后样式数据、第三方库数据和性能优化数据，上述数据是需要进行语法映射的重要相关数据，通过所述语法树映射策略将所述组件数据、所述API调用数据、所述路由数据、所述编译后样式数据、所述第三方库数据和所述性能优化数据分别进行语法映射后，由各映射数据即可组成所述第二抽象语法树。可见，通过对第一抽象语法树中的重要相关数据全部进行语法映射后，可以得到用于引导目标代码数据生成的第二抽象语法树。

[0112] 在一实施例中，所述基于所述语法树映射策略将所述组件数据、所述API调用数据、所述路由数据、所述编译后样式数据、所述第三方库数据和所述性能优化数据分别进行语法映射，得到所述第二抽象语法树，包括：

[0113] 基于所述语法树映射策略将所述组件数据中的组件结构、模板语法、组件生命周期及状态管理数据分别进行语法映射，得到组件映射数据；

[0114] 基于所述语法树映射策略将所述API调用数据中的网络请求、原生API数据进行语法映射，得到API调用映射数据；

[0115] 基于所述语法树映射策略将所述路由数据中的路由配置数据进行语法映射，得到路由映射数据；

[0116] 基于所述语法树映射策略将所述编译后样式数据中的CSS类样式数据进行语法映射，得到样式映射数据；

[0117] 基于所述语法树映射策略将所述第三方库数据进行语法映射，得到第三方库映射数据；

[0118] 基于所述语法树映射策略将所述性能优化数据进行语法映射，得到性能优化数据映射数据；

[0119] 由所述组件映射数据、所述API调用映射数据、所述路由映射数据、所述样式映射数据、所述第三方库映射数据和所述性能优化数据映射数据组成所述第二抽象语法树。

[0120] 在本实施例中，通过所述语法树映射策略将所述组件数据、所述API调用数据、所述路由数据、所述编译后样式数据、所述第三方库数据和所述性能优化数据分别进行语法映射时，具体过程如下：

[0121] B1)基于所述语法树映射策略将所述组件数据中的组件结构、模板语法、组件生命周期及状态管理数据分别进行语法映射具体是：将Vue组件数据中单文件组件<template>、<script>和<style>这三个部分需要语法映射至目标框架下的组件模板、逻辑处理部分和样式部分；将Vue组件数据中的模板语法转换成目标框架下的JSX语法(是一种JavaScript的语法扩展)；将Vue组件数据中的组件生命周期对应的生命周期钩子函数(如created、mounted等)转换成目标框架下的生命周期方法；将Vue组件数据中的状态管理数据由Vuex转换成目标框架下的状态管理机制；

[0122] B2)基于所述语法树映射策略将所述API调用数据中的网络请求、原生API数据进行语法映射具体是：将API调用数据中的网络请求转换成目标框架下的API方法如taro.request；将在初始框架下的原生API数据转换成目标框架下的对应API调用方法，如将API调用数据中的localStorage替换为目标框架下的taro.setStorage和taro.getStorage；

[0123] B3)基于所述语法树映射策略将所述路由数据中的路由配置数据进行语法映射具体是：将初始框架下的Vue Router转换成目标框架下的Taro路由解决方案；

[0124] B4)基于所述语法树映射策略将所述编译后样式数据中的CSS类样式数据进行语法映射具体是：将初始框架下的CSS类样式数据转换成目标框架下Taro所支持的样式；

[0125] B5)基于所述语法树映射策略将所述第三方库数据进行语法映射具体是：将初始框架下的Vue.js中使用的第三方库需要检查是否支持目标框架，若支持则直接使用该第三方库，否则需要寻找替代且支持目标框架的第三方库；

[0126] B6)基于所述语法树映射策略将所述性能优化数据进行语法映射具体是：基于目标框架的代码性能限制要求，将初始框架下的性能优化数据进行调整以重新对在目标框架下的目标代码数据进行额外的性能优化和分包。

[0127] 在完成了对第一抽象语法树中的重要相关数据全部进行语法映射后，全部数据即可组成第二抽象语法树。可见，通过上述遍历方式实现了对第一抽象语法树中的重要相关数据全部进行语法映射。

[0128] 目标代码数据生成单元140，用于基于所述第二抽象语法树和在目标框架下的语法规则信息生成目标代码数据，并将所述目标代码数据发送至所述用户终端。

[0129] 其中，所述目标代码数据对应的目标框架和所述待转换项目代码数据的初始框架不相同。

[0130] 在本实施例中，当在服务器中获取到了第二抽象语法树后，结合与目标框架对应的代码生成策略，即可快速生成目标代码数据。所得到的目标代码数据可以由服务器发送至用户终端，以及时提示用户已完成了跨框架代码自动处理过程。

[0131] 在一实施例中，目标代码数据生成单元140用于：

[0132] 获取与所述语法规则信息对应的代码转换策略，并基于所述代码转换策略将所述第二抽象语法树进行代码转换，得到所述目标代码数据。

[0133] 在本实施例中，仍参考上述示例，若目标框架为Taro框架时，与所述第二抽象语法树对应的代码转换策略则是与Taro框架对应的代码转换策略，通过该代码转换策略对所述第二抽象语法树依次进行环境准备(如安装与目标框架对应的依赖，如为npminstall--save-dev@babel / core@babel / parser@babel / traverse@babel / generator)，通过第一预设工具(如@babel / traverse)遍历所述第二抽象语法树中的所有<Text>组件替换成<View>组件，通过第二预设工具(如@babel / generator)将通过第一预设工具修改后的第二抽象语法树进行代码生成，从而得到所述目标代码数据。可见，通过上述方式实现了目标框架下目标代码数据的自动生成，且无需人工参与。

[0134] 可见，实施该装置的实施例能将在初始框架中构建的待转换项目代码数据基于两次语法树自动抽取后进行代码转换，实现了快速获取目标框架下的目标代码数据，不仅耗时短，而且提升了准确率。

[0135] 上述跨框架代码自动转换装置可以实现为一种计算机程序的形式，该计算机程序可以在如图9所示的计算机设备上运行。

[0136] 请参阅图9，图9是本发明实施例提供的一种计算机设备的示意性框图。该计算机设备集成了本发明实施例所提供的任一种跨框架代码自动转换装置。

[0137] 参阅图9，该计算机设备400包括通过系统总线401连接的处理器402、存储器和网络接口405，其中，存储器可以包括存储介质403和内存储器404。

[0138] 该存储介质403可存储操作系统4031和计算机程序4032。该计算机程序4032包括程序指令，该程序指令被执行时，可使得处理器402执行一种跨框架代码自动转换方法。

[0139] 该处理器402用于提供计算和控制能力，以支撑整个计算机设备的运行。

[0140] 该内存储器404为存储介质403中的计算机程序4032的运行提供环境，该计算机程序4032被处理器402执行时，可使得处理器402执行上述的跨框架代码自动转换方法。

[0141] 该网络接口405用于与其它设备进行网络通信。本领域技术人员可以理解，图9中示出的结构，仅仅是与本发明方案相关的部分结构的框图，并不构成对本发明方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

[0142] 其中，所述处理器402用于运行存储在存储器中的计算机程序4032，以实现如上述的跨框架代码自动转换方法。

[0143] 应当理解，在本发明实施例中，处理器402可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器402还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。其中，通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

[0144] 本领域普通技术人员可以理解的是实现上述实施例的方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成。该计算机程序包括程序指令，计算机程序可存储于一存储介质中，该存储介质为计算机可读存储介质。该程序指令被该计算机系统中的至少一个处理器执行，以实现上述方法的实施例的流程步骤。

[0145] 因此，本发明还提供一种计算机可读存储介质。该计算机可读存储介质存储有计算机程序，其中计算机程序包括程序指令。该程序指令被处理器执行时使处理器执行如上述的跨框架代码自动转换方法。

[0146] 存储介质可以是U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的计算机可读存储介质。

[0147] 本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

[0148] 在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的。例如，各个单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

[0149] 本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。本发明实施例装置中的单元可以根据实际需要进行合并、划分和删减。另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。

[0150] 该集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，终端，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。

[0151] 以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。< / script> < / template>

Claims

1. A cross-frame code automatic conversion method, characterized in that: include: Responding to the code conversion instruction sent by the user terminal, obtaining the corresponding project code data to be converted; Performing syntax analysis on the project code data to be converted in the initial framework to obtain a first abstract syntax tree; Converting the first abstract syntax tree into a second abstract syntax tree based on a preset syntax tree mapping strategy; Generate target code data based on the second abstract syntax tree and grammatical rule information under the target framework, and send the target code data to the user terminal; wherein the target framework corresponding to the target code data is different from the initial framework of the project code data to be converted.

2. The method according to claim 1, characterized in that The step of performing syntax analysis on the project code data to be converted in the initial framework to obtain a first abstract syntax tree includes: Obtaining a project structure of the project code data to be converted and extracting an entry file based on the project structure; Obtaining a preset template component file and JavaScript code based on the entry file; Based on the syntax analysis strategy preset in the initial framework, abstract syntax trees are extracted from the preset template component file and the JavaScript code respectively, and the first abstract syntax tree is formed.

3. The method according to claim 2, characterized in that The extracting abstract syntax trees from the preset template component file and the JavaScript code based on the syntax analysis strategy preset in the initial framework and forming the first abstract syntax tree includes: Acquire template data, script data, and style data in the preset template component file based on the syntax analysis strategy, and compile the template data, script data, and style data respectively based on a first preset parser in the syntax analysis strategy to form a first sub-abstract syntax tree; Compile the JavaScript code based on the second preset parser in the syntax analysis strategy to obtain a second sub-abstract syntax tree; The first abstract syntax tree is composed of the first sub-abstract syntax tree and the second sub-abstract syntax tree.

4. The method according to claim 2, characterized in that The step of obtaining the project structure of the project code data to be converted and extracting the entry file based on the project structure includes: If it is determined that the project structure of the project code data to be converted corresponds to a single-page structure, extracting the entry file from the root directory in the project structure; If it is determined that the project structure of the project code data to be converted corresponds to a multi-page structure, the entry file is extracted from the multi-page folder in the project structure.

5. The method according to claim 3, characterized in that The converting the first abstract syntax tree into a second abstract syntax tree based on a preset syntax tree mapping strategy includes: Obtaining component data, API call data, routing data, compiled style data, third-party library data, and performance optimization data in the first abstract syntax tree; Based on the syntax tree mapping strategy, the component data, the API call data, the routing data, the compiled style data, the third-party library data and the performance optimization data are syntax-mapped respectively to obtain the second abstract syntax tree.

6. The method according to claim 5, characterized in that The step of performing syntax mapping on the component data, the API call data, the routing data, the compiled style data, the third-party library data, and the performance optimization data based on the syntax tree mapping strategy to obtain the second abstract syntax tree includes: Based on the syntax tree mapping strategy, the component structure, template syntax, component life cycle and state management data in the component data are syntax-mapped to obtain component mapping data; Performing syntax mapping on the network request and native API data in the API call data based on the syntax tree mapping strategy to obtain API call mapping data; Performing syntax mapping on the routing configuration data in the routing data based on the syntax tree mapping strategy to obtain routing mapping data; Performing syntax mapping on the CSS class style data in the compiled style data based on the syntax tree mapping strategy to obtain style mapping data; Performing syntax mapping on the third-party library data based on the syntax tree mapping strategy to obtain third-party library mapping data; Performing syntax mapping on the performance optimization data based on the syntax tree mapping strategy to obtain performance optimization data mapping data; The second abstract syntax tree is composed of the component mapping data, the API call mapping data, the routing mapping data, the style mapping data, the third-party library mapping data and the performance optimization data mapping data.

7. The method according to claim 1, characterized in that The generating target code data based on the second abstract syntax tree and grammar rule information in the target framework includes: A code conversion strategy corresponding to the grammar rule information is acquired, and the second abstract syntax tree is code converted based on the code conversion strategy to obtain the target code data.

8. A cross-frame code automatic conversion device, characterized in that: include: an initial code data acquisition unit, configured to acquire corresponding code data of an item to be converted in response to a code conversion instruction sent by a user terminal; A first abstract syntax tree acquisition unit is configured to perform syntax analysis on the project code data to be converted in the initial frame to obtain a first abstract syntax tree; A second abstract syntax tree acquisition unit, configured to convert the first abstract syntax tree into a second abstract syntax tree based on a preset syntax tree mapping strategy; A target code data generating unit is used to generate target code data based on the second abstract syntax tree and the grammatical rule information under the target framework, and send the target code data to the user terminal; wherein the target framework corresponding to the target code data is different from the initial framework of the project code data to be converted.

9. A computer device, characterized in that: The computer device includes a memory and a processor, the memory stores a computer program, and the processor implements the cross-framework code automatic conversion method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, wherein the computer program includes program instructions. When the program instructions are executed by a processor, the method for automatic cross-framework code conversion according to any one of claims 1 to 7 can be implemented.

Images