CN115951890A - Method, system and device for code conversion between different front-end frames - Google Patents

Abstract

The invention discloses a code conversion method, system and device between different front-end frameworks, and relates to the field of front-end technology. The method includes acquiring the source file component type and screening out the first file component and the second file component by matching. The first file component is parsed to obtain the template block, code block and style block, the code block is parsed to obtain the first abstract syntax tree, the first abstract syntax tree is traversed to obtain the second abstract syntax tree, and the template block is traversed to obtain the third abstract syntax tree , merge the second abstract syntax tree and the third abstract syntax tree to obtain the fourth abstract syntax tree, generate the first code based on the fourth abstract syntax tree and merge it with the code of the style block, and complete the conversion; parse the second file component to obtain the fifth The abstract syntax tree traverses the fifth abstract syntax tree to obtain the sixth abstract syntax tree, generates the second code based on the sixth abstract syntax tree, and completes the conversion. Through the present invention, the code conversion rate between different front-end frameworks can be improved.

Description

Code conversion method, system and device between different front-end frameworks

technical field

The present invention relates to the field of front-end technology, in particular, to a code conversion method, system and device between different front-end frameworks.

Background technique

In modern web front-end development projects, except for a very few that still use the development model that does not separate the front and back ends, almost all of them use the three front-end frameworks to develop web applications. The three frameworks are React, Vue, and Angular. Most companies use the React and Vue frameworks the most. As a latecomer in the framework, Vue has some references to React and Angular. Therefore, source code conversion between Vue, React and Angular is feasible and not difficult. However, when converting various The grammar and writing level is repetitive and cumbersome, and only a small amount of code can be transferred manually. At present, there is another solution for code conversion between React and Vue frameworks, which is to allow different frameworks to coexist in one project. You can use multiple frameworks without converting the source code, but the project as a whole is not easy to maintain. It is not suitable for projects that need to unify the technology stack. Be applicable. Therefore, how to solve the problem of transplantation between different front-end framework components is very meaningful. In the existing technology, the conversion between React and Vue framework code is through the Vue2 single-file source code through the plug-in vue-compiler officially provided by Vue. -sfc is converted to AST (Abstract Syntax Tree), and then the resulting AST is modified to conform to the grammar of the React class component, and then the modified AST is used to generate the source code converted into the React component. However, the above-mentioned method of inter-framework code conversion cannot handle the mutual conversion of some frameworks' unique syntax and user-defined commands, and there are certain limitations. The effect is poor.

Contents of the invention

In order to improve the code conversion rate between different front-end frameworks, the present invention provides a code conversion method between different front-end frameworks, said method comprising the following steps:

S1. Obtain the type of the source file component;

S2. Match the type of the source file component with the first preset file type, if the match is successful, name the source file component as the first file component and execute step S3, if the match fails, execute step S9 ;

S3. Parse the first file component to obtain a template block, a code block, and a style block;

S4. Analyzing the code block to obtain a first abstract syntax tree;

S5. Traversing the first abstract syntax tree to obtain a second abstract syntax tree includes obtaining the node type in the first abstract syntax tree and matching it with the first preset node type. If the match is successful, use the first The rules process the nodes that match successfully, and if the match fails, the user sets the corresponding second rule for all nodes that fail to match;

S6. Traversing the template block to obtain the third abstract syntax tree includes obtaining the node type in the third abstract syntax tree and matching it with the second preset node type, and if the match is successful, using the third rule pair to match Successful nodes are processed, and if the matching fails, the user sets the corresponding fourth rule for all matching failed nodes to process;

S7. Merging the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree;

S8. Based on the fourth abstract syntax tree, generate a first code, merge the first code with the code of the style block, and obtain the file code of the first target component;

S9. Match the type of the source file component with the second preset file type, if the matching is successful, name the source file component as the second file component and execute step S10, and exit if the matching fails;

S10. Analyzing the second file component to obtain a fifth abstract syntax tree;

S11. Traversing the fifth abstract syntax tree to obtain the sixth abstract syntax tree includes obtaining the node type in the fifth abstract syntax tree and matching it with the third preset node type. If the match is successful, use the fifth abstract syntax tree. The rules process the nodes that match successfully, and if the match fails, the user sets the corresponding sixth rule for all nodes that fail to match;

S12. Based on the sixth abstract syntax tree, generate a second code, where the second code is a file code of a second target component.

Invention principle: first obtain the type of the source file component and match it with the first preset file type, filter out the first file component, and then parse the first file component to obtain the template block, code block and style block, where the template block is The template code of the first file component, the code block is the JS code of the first file component (JavaScript is referred to as "JS", which is a lightweight, interpreted or just-in-time compiled programming language with function priority.), style block Style code for the first file component. Parse the code block to get the first abstract syntax tree (the abstract syntax tree is a tree representation of the abstract syntax structure of the source code, each node on the tree represents a structure in the source code, that is, the js code is structured transformation into a data structure.), and then traverse the first abstract syntax tree to obtain the second abstract syntax tree. When the code is transferred between the frameworks, the existing first abstract syntax tree can be used for the regular syntax of the framework. However, for the unique syntax between frameworks, users need to set different second rules for processing. For the built-in instructions of the framework, the existing third rules can be used for processing, but for custom instructions, users need to set different ones. The fourth rule is processed. Then traverse the template block to get the third abstract syntax tree. For the built-in hooks (hook functions) of the framework, the existing fifth rule can be used for processing, but for the custom hooks of the framework, the user needs to set a different sixth rule for processing . Merge the second abstract syntax tree and the third abstract syntax tree to obtain the fourth abstract syntax tree, and use the fourth abstract syntax tree to generate the first code (deeply traverse the fourth abstract syntax tree to construct characters that can represent the converted code string, and then converted into code by a code generation tool), since the code of the style block is common to all components, the first code and the code of the style block are directly merged to obtain the file code of the first target component. By matching the type of the source file component with the second preset file type, the second file component is screened out, and the second file component is parsed to obtain the fifth abstract syntax tree, and then the fifth abstract syntax tree is traversed to obtain the sixth Abstract syntax tree, use the sixth abstract syntax tree to generate the second code (deeply traverse the sixth abstract syntax tree, construct a string that can represent the converted code, and then convert it into code through the code generation tool), the second code is The file code of the second target component. Through the above method, the overall conversion rate of codes between different front-end frameworks can be improved.

Preferably, if the matching fails, the user sets the corresponding second rule for all nodes that fail to match to process including:

a1. Obtain the processing result of the node corresponding to the matching failure;

a2. judging whether the processing result is successful, if so, execute step a3, if not, execute step a4;

a3. adding the node type of the node corresponding to the matching failure to the first preset node type, and adding the second rule of the corresponding node of the matching failure to the first rule;

a4. Set the seventh rule for the matching failure corresponding node for processing;

a5. Repeat steps a1-a4 until the processing results of all matching failure nodes are successful.

Among them, because the user sets the second rule to process the node, there is a case that the processing result is not successful. By obtaining the processing result of the node, it is judged whether the processing result is successful. If it is successful, the node type corresponding to the node and the first The second rule is added to the first preset node type and the first rule respectively, so that when the node is encountered for the second time, the first rule can be directly used for processing to improve the conversion efficiency; but if the processing result fails, it needs to be The node resets the seventh rule for processing until the processing result of the node is successful, and then adds the node type corresponding to the node and the rules for successfully processing the node to the first preset node type and the first rule.

Preferably, the method further includes acquiring version information of a preset front-end framework component, based on the version information, acquiring framework information of the preset front-end framework component, and based on the framework information, configuring the first preset The node type, the first rule, the second preset node type, the third rule, the third preset node type and the fourth rule are updated.

Among them, since the versions of different front-end frameworks will be updated all the time, there will be differences between the frameworks before and after the update. Therefore, by obtaining the version information and framework information of the preset framework, the rules of code conversion between the frameworks are updated, so that this method is also It can handle the code transfer between the updated front-end frameworks.

Preferably, if the matching is successful, using the first rule to process the successfully matched nodes includes, based on the depth-first traversal method, converting several first preset functions in the successfully matched nodes to obtain corresponding several first functions, All of the first functions satisfy the first syntax of the first target component. Among them, due to the different writing methods between different front-end frameworks, several first functions obtained by processing successfully matched nodes using the first rule need to meet the first grammar of the first target component, otherwise, several first functions after conversion Doesn't work properly in the first target component.

Preferably, if the matching is successful, using the third rule to process the successfully matching node includes, based on the depth-first traversal method, converting several built-in instructions in the successfully matching node. Among them, due to the different writing methods between different front-end frameworks, the purpose of converting several built-in instructions in the first file component is to enable the first target component to achieve the same functions as several built-in instructions, and at the same time, the converted several built-in instructions satisfy the first The writing method of a target component.

Preferably, based on the fourth abstract syntax tree, generating the first code and merging it with the code of the style block to obtain the file code of the first target component includes: based on the first preset code generation tool, generating the first code Four abstract syntax trees are processed to obtain the first code string, and the first code string is written into the first preset suffix file to obtain the first code, and the code string of the style block is written into the second The third code is obtained from the preset suffix file, and the first code and the third code are combined to obtain the file code of the first target component.

Among them, the code of the style block is used to design the style of the web page or file, which is common to different framework components, so it is not necessary to convert the code of the style block when performing code conversion of different frameworks, and the first generated based on the fourth abstract syntax tree A code string is written into the first preset suffix file and a code string of the style block is written into the second preset suffix file. One is for code specification and easy reading, and the other is for prompting the compiler to compile.

Preferably, if the matching is successful, using the fifth rule to process the successfully matching nodes includes, based on the depth-first traversal method, rewriting several second preset functions in the successfully matching nodes to obtain several rewriting results, all of which The rewriting results all satisfy the second syntax of the second target component. Among them, different front-end frameworks have different writing methods, and there are also differences in the way of realizing the same function. Therefore, several second preset functions in the successfully matched nodes are rewritten to obtain several rewriting results, and all the rewriting results satisfy the first The second syntax of the second target component, that is, several second preset functions can also be implemented in the second target component after rewriting the functions realized by the first file component.

Preferably, generating the second code based on the sixth abstract syntax tree, the second code being the file code of the second target component includes: performing the sixth abstract syntax tree on the basis of the second preset code generation tool A second code string is obtained through processing, and the second code string is written into a third preset suffix file to obtain the second code, and the second code is the file code of the second target component. Among them, the second code string is written into the third preset suffix file, one is to make the code standard and easy to read, and the other is to prompt the compiler to compile.

In order to improve the code conversion effect between different front-end frameworks, the present invention also provides a code conversion system between different front-end frameworks, said system comprising:

Acquisition unit, used to obtain the type of the source file component;

The first matching unit is configured to match the type of the source file component with the first preset file type, if the match is successful, name the source file component as the first file component and execute the first parsing unit, if If the matching fails, execute the second matching unit;

A first parsing unit, configured to parse the first file component to obtain a template block, a code block, and a style block;

a second parsing unit, configured to parse the code block to obtain a first abstract syntax tree;

The first traversal unit, configured to traverse the first abstract syntax tree to obtain the second abstract syntax tree includes, obtaining the node type in the first abstract syntax tree and matching with the first preset node type, if the matching is successful , the first rule is used to process the nodes that match successfully, and if the match fails, the user sets the corresponding second rule for all nodes that fail to match;

The second traversal unit, configured to traverse the template block to obtain a third abstract syntax tree includes: obtaining the node type in the third abstract syntax tree and matching it with the second preset node type, and if the matching is successful, using The third rule processes the nodes that match successfully, and if the match fails, the user sets the corresponding fourth rule for all nodes that fail to match;

a merging unit, configured to merge the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree;

a first code generation unit, configured to generate a first code based on the fourth abstract syntax tree, and combine the first code with the code of the style block to obtain the file code of the first target component;

The second matching unit is used to match the type of the source file component with the second preset file type, if the match is successful, name the source file component as the second file component and execute the third parsing unit, if If the match fails, exit;

a third parsing unit, configured to parse the second file component to obtain a fifth abstract syntax tree;

The third traversal unit, configured to traverse the fifth abstract syntax tree to obtain the sixth abstract syntax tree includes, obtaining the node type in the fifth abstract syntax tree and matching with the third preset node type, if the matching is successful , the fifth rule is used to process the nodes that match successfully, and if the match fails, the user sets the corresponding sixth rule for all nodes that fail to match;

The second code generation unit is configured to generate a second code based on the sixth abstract syntax tree, where the second code is the file code of the second target component.

The present invention also provides a code conversion device between different front-end frameworks, including a memory, a processor, and a computer program stored in the memory and operable on the processor, and the processor executes the computer program The steps of implementing the code conversion method between the different front-end frameworks at the same time.

One or more technical solutions provided by the present invention have at least the following technical effects or advantages:

The present invention improves the conversion rate of codes between different front-end frameworks as a whole by adding conversion methods for unique syntax, self-defined instructions and self-defined hooks between the frameworks.

In the present invention, by adding the method of successfully converting the unique syntax between frames, self-defined instructions and custom hooks into the conversion rules of inter-frame codes, the same unique syntax, custom instructions and custom hooks can be directly used in subsequent processing. The code conversion rules are processed, and there is no need to process each unique syntax, custom instruction and custom hooks separately, so as to improve the code conversion efficiency while improving the code conversion rate.

The present invention continuously obtains the version information and framework information of the preset framework, and updates the code conversion rules between different front-end frameworks, so that the present invention can deal with the code mutual conversion problem after the framework version is updated.

Description of drawings

The drawings described here are used to provide a further understanding of the embodiments of the present invention, constitute a part of the present invention, and do not constitute a limitation to the embodiments of the present invention;

Fig. 1 is a schematic flow chart of a code conversion method between different front-end frameworks in the present invention;

Fig. 2 is a schematic diagram of the composition of a code conversion system between different front-end frameworks in the present invention.

Detailed ways

In order to understand the above-mentioned purpose, features and advantages of the present invention more clearly, the present invention will be further described in detail below in conjunction with the accompanying drawings and specific embodiments. It should be noted that the embodiments of the present invention and the features in the embodiments may be combined with each other under the condition that they do not conflict with each other.

In the following description, many specific details are set forth in order to fully understand the present invention. However, the present invention can also be implemented in other ways different from the scope of this description. Therefore, the protection scope of the present invention is not limited by the following disclosure. The limitations of specific examples.

Embodiment one

Please refer to Fig. 1, which is a schematic flow chart of a code conversion method between different front-end frameworks in the present invention, and the method includes the following steps:

S1. Obtain the type of the source file component;

S2. Match the type of the source file component with the first preset file type, if the match is successful, name the source file component as the first file component and execute step S3, if the match fails, execute step S9 ;

S3. Parse the first file component to obtain a template block, a code block, and a style block;

S4. Analyzing the code block to obtain a first abstract syntax tree;

S5. Traversing the first abstract syntax tree to obtain a second abstract syntax tree includes obtaining the node type in the first abstract syntax tree and matching it with the first preset node type. If the match is successful, use the first The rules process the nodes that match successfully, and if the match fails, the user sets the corresponding second rule for all nodes that fail to match;

S6. Traversing the template block to obtain the third abstract syntax tree includes obtaining the node type in the third abstract syntax tree and matching it with the second preset node type, and if the match is successful, using the third rule pair to match Successful nodes are processed, and if the matching fails, the user sets the corresponding fourth rule for all matching failed nodes to process;

S7. Merging the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree;

S8. Based on the fourth abstract syntax tree, generate a first code, merge the first code with the code of the style block, and obtain the file code of the first target component;

S9. Match the type of the source file component with the second preset file type, if the matching is successful, name the source file component as the second file component and execute step S10, and exit if the matching fails;

S10. Analyzing the second file component to obtain a fifth abstract syntax tree;

S11. Traversing the fifth abstract syntax tree to obtain the sixth abstract syntax tree includes obtaining the node type in the fifth abstract syntax tree and matching it with the third preset node type. If the match is successful, use the fifth abstract syntax tree. The rules process the nodes that match successfully, and if the match fails, the user sets the corresponding sixth rule for all nodes that fail to match;

S12. Based on the sixth abstract syntax tree, generate a second code, where the second code is a file code of a second target component.

Among them, parsing the code into an abstract syntax tree (AST) includes two stages of lexical analysis and syntactic analysis. The lexical analysis stage converts the code in the form of a string into tokens. The token stream is similar to the nodes in the AST. In the grammatical analysis stage, the lexical stream will be converted into the form of AST, and the information in the lexical stream will be converted into the expression structure of AST. The conversion of the abstract syntax tree includes receiving the AST and performing depth-first traversal on it, maintaining the overall state of the AST tree, and performing operations such as adding, updating, and removing nodes during the process. The parameters of the conversion method are the original AST tree and Preset conversion rules, the returned result is the converted AST tree. Generating code through the abstract syntax tree includes traversing the entire AST in depth first, then constructing a string that can represent the converted code, and then converting the string into code through a code generation tool. The above code analysis, abstract syntax tree conversion and code generation are all applicable to the present invention, and will not be described in detail later.

Among them, match the type of the source file component with the first preset file type (the suffix file of .vue), filter out the first file component (Vue component), and then use the component parsing tool (@vue/compiler-sfc) Parse the first file component to get the template block (template code), code block (js code) and style block (css code), and then use the AST parsing tool (@babel/parser) to parse the code block to get the first abstract syntax Tree. Use the AST traversal operation tool (@babel/traverse) to traverse the first abstract syntax tree and the template block to obtain the second abstract syntax tree and the third abstract syntax tree respectively, and then perform the second abstract syntax tree and the third abstract syntax tree Merge to get the fourth abstract syntax tree (merge according to React+JSX syntax, JSX is a JavaScript syntax extension, the full name is JavaScript XML, which is used in the React architecture and is the markup language of React.), use the fourth abstract syntax tree The AST code generation tool (@babel/generator) generates the first code, and then merges the first code and the code of the style block to obtain the file code of the first target component (React component), and completes the first file component to the first target component conversion. When the type of the source file component fails to match the first preset file type, match the type of the source file component with the second preset file type (files with .jsx or .tsx suffixes), and exit if the matching fails , if the match is successful, filter out the second file component (React component), use the AST parsing tool (@babel/parser) and add the jsx plug-in to parse the second file component to get the fifth abstract syntax tree, use the AST traversal tool (@babel/parser) babel/traverse) traverse the fifth abstract syntax tree to obtain the sixth abstract syntax tree, and use the AST code generation tool (@babel/generator) to generate the second code for the sixth abstract syntax tree, and the second code is the second target The file code of the component (Vue component).

Wherein, traversing the first abstract syntax tree to obtain the second abstract syntax tree includes obtaining the node type in the first abstract syntax tree and matching with the first preset node type, and if the matching is successful, using the first The rules process the successfully matched nodes. Based on the depth-first traversal method, several first preset functions (such as ref, reactive, props, computed, watch, and life cycle hook functions) in the successfully matched nodes are converted and processed to obtain corresponding Several first functions (such as useRef function corresponding to ref, useReactive function corresponding to reactive, useProps function corresponding to props, useComputed function corresponding to computed, and useWatch function corresponding to watch), all of the first functions satisfy the first syntax of the first target component (such as Hooks syntax for React components). If the matching fails, the user sets the corresponding second rule for all matching failed nodes to process, including: a1. Obtaining the processing result of the node corresponding to the matching failure; a2. Judging whether the processing result is successful, if so, then execute step a3, If not, then execute step a4; a3. Add the node type of the node corresponding to the matching failure to the first preset node type, and add the second rule of the node corresponding to the matching failure to the first rule; a4. Set the seventh rule for the matching failure corresponding nodes for processing; a5. Repeat steps a1-a4 until the processing results of all matching failure corresponding nodes are successful. Since there are some frame unique grammars that cannot be processed by unified rules during frame conversion, and nodes that fail to match the first preset node type correspond to this part of unique grammars, the user handles the nodes corresponding to matching failures by setting the second rule , but there may be processing failures when processing these nodes (such as the unique grammar contained in the node does not satisfy the grammar of the target component after processing), so it is necessary to judge whether the processing result is successful, if not, you need to set the seventh rule (new rules) to process these nodes until all the node processing results corresponding to the matching failures are successful, and then add the node type of the matching failure to the first preset node type, and add the rules for successfully processing the matching failure nodes into the first rule. The present invention uses the fourth rule to process the nodes in the third abstract syntax tree that fail to match the second preset node type, because some self-defined instructions in the first file component cannot be processed by unified rules, and the sixth rule is used to process the first node. The node corresponding to the failure to match the third preset node type in the fifth abstract syntax tree corresponds to some custom hooks in the second file component that cannot be processed by unified rules. For the specific processing method, please refer to the above-mentioned process using the second rule The nodes in an abstract syntax tree that fail to match the first preset node type will not be elaborated in the present invention.

Wherein, traversing the template block to obtain the third abstract syntax tree includes obtaining the node type in the third abstract syntax tree and matching with the second preset node type, and if the matching is successful, using the third rule to match The successful node is processed, and based on the depth-first traversal method, several built-in instructions (such as v-if, v-model, and v-for instructions) in the successfully matched node are converted, for example, in the template block of the Vue component. When you want to loop the data in the array, you can directly use the packaged v-for instruction to implement it, but there is no such instruction in the React component. React needs to use the map() function to implement the loop of the list. Several built-in instructions in the template block have corresponding implementation methods in the React component. For details, please refer to the conversion method of the v-for instruction, which will not be elaborated in the present invention.

Wherein, traversing the fifth abstract syntax tree to obtain the sixth abstract syntax tree includes obtaining the node type in the fifth abstract syntax tree and matching with the third preset node type, and if the matching is successful, using the fifth abstract syntax tree The rules process the successfully matched nodes. Based on the depth-first traversal method, rewrite several second preset functions (such as built-in hooks such as useState, useEffect, and useMemo) in the successfully matched nodes to obtain several rewritten results. All the rewritten The results all meet the second syntax (Composition API syntax) of the second target component. For example, in the React component, the basic principle of useState is to store the relevant information of useState Hooks in the fiber node of the corresponding function component (fiber is a A data structure, each fiber node internally stores dom-related information and fiber tree-related references, etc.), and in order to achieve the same function as useState in the Vue component, you need to store the relevant information of useStateHooks in the corresponding On the instance object of the function component. The above examples are just for explanation. For the rewriting of the specific second preset function according to the third preset rule, please refer to the rewriting method of useState Hooks, which will not be elaborated in the present invention.

Wherein, based on the fourth abstract syntax tree, generating the first code and merging it with the code of the style block to obtain the file code of the first target component includes: based on the first preset code generation tool (@babel/generator) , process the fourth abstract syntax tree to obtain the first code string, write the first code string into the first preset suffix file (file with .jsx or .tsx suffix) to obtain the first code, write the code string of the style block into the second preset suffix file (file with .css suffix) to obtain the third code, and combine the first code and the third code to obtain the first target The component's file code.

Wherein, generating the second code based on the sixth abstract syntax tree, the second code being the file code of the second target component includes: based on the second preset code generation tool (@babel/generator), for the first Six abstract syntax trees are processed to obtain the second code string, and the second code string is written into the third preset suffix file (file with .vue suffix) to obtain the second code, and the second code is The file code of the second object component.

Wherein, the method further includes acquiring the version information of the preset front-end framework component, and based on the version information, acquiring the framework information of the preset front-end framework component, and based on the framework information, configuring the first preset node type, the first rule, the second preset node type, the third rule, the third preset node type and the fourth rule are updated. Since different front-end frameworks are constantly being updated, and there are large differences between the frameworks before and after the update, for example, Vue2.0 is an Option API (Option API) syntax, while Vue3.0 is a Composition API (Composition API) syntax, such as React16.8.0 The version began to introduce Hooks syntax, but the previous version of React did not have Hooks syntax, so the code conversion rules of different versions of the same front-end framework are also different, so it is necessary to constantly update the code conversion rules before the front-end framework.

Embodiment two

Please refer to Figure 2, which is a schematic diagram of the composition of a code conversion system between different front-end frameworks in the present invention, the system includes:

Acquisition unit, used to obtain the type of the source file component;

The first matching unit is used to match the type of the source file component with the first preset file type, if the matching is successful, then name the source file component as the first file component and execute the first parsing unit, if If the matching fails, execute the second matching unit;

A first parsing unit, configured to parse the first file component to obtain a template block, a code block, and a style block;

a second parsing unit, configured to parse the code block to obtain a first abstract syntax tree;

The first traversal unit, configured to traverse the first abstract syntax tree to obtain the second abstract syntax tree includes, obtaining the node type in the first abstract syntax tree and matching with the first preset node type, if the matching is successful , the first rule is used to process the nodes that match successfully, and if the match fails, the user sets the corresponding second rule for all nodes that fail to match;

The second traversal unit, configured to traverse the template block to obtain a third abstract syntax tree includes: obtaining the node type in the third abstract syntax tree and matching it with the second preset node type, and if the matching is successful, using The third rule processes the nodes that match successfully, and if the match fails, the user sets the corresponding fourth rule for all nodes that fail to match;

a merging unit, configured to merge the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree;

a first code generation unit, configured to generate a first code based on the fourth abstract syntax tree, and combine the first code with the code of the style block to obtain the file code of the first target component;

The second matching unit is used to match the type of the source file component with the second preset file type, if the match is successful, name the source file component as the second file component and execute the third parsing unit, if If the match fails, exit;

a third parsing unit, configured to parse the second file component to obtain a fifth abstract syntax tree;

The third traversal unit, configured to traverse the fifth abstract syntax tree to obtain the sixth abstract syntax tree includes, obtaining the node type in the fifth abstract syntax tree and matching with the third preset node type, if the matching is successful , the fifth rule is used to process the nodes that match successfully, and if the match fails, the user sets the corresponding sixth rule for all nodes that fail to match;

The second code generation unit is configured to generate a second code based on the sixth abstract syntax tree, where the second code is the file code of the second target component.

Embodiment three

Embodiment 3 of the present invention provides a code conversion device between different front-end frameworks, including a memory, a processor, and a computer program stored in the memory and operable on the processor, and the processor executes the The computer program is the step of implementing the code conversion method between different front-end frameworks.

Wherein, the processor can be a central processing unit (CPU, Central Processing Unit), and can also be other general-purpose processors, digital signal processors (digital signal processors), application specific integrated circuits (Application Specific Integrated Circuits), off-the-shelf programmable Gate array (Fieldprogrammablegate array) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor, or the processor may be any conventional processor, or the like.

The memory can be used to store the computer programs and/or modules, and the processor implements various functions of a code conversion device between different front-end frameworks in the invention by running or executing data stored in the memory. The memory may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, at least one application required by a function (such as a sound playback function, an image playback function, etc.) and the like. In addition, the memory can include high-speed random access memory, and can also include non-volatile memory, such as hard disk, internal memory, plug-in hard disk, smart memory card, secure digital card, flash memory card, at least one magnetic disk storage device, flash memory device, or other volatile solid-state memory devices.

The present invention has described the basic concepts. Obviously, for those skilled in the art, the above detailed disclosure is only an example, and does not constitute a limitation to this specification. Although not expressly stated here, those skilled in the art may make various modifications, improvements and corrections to this description. Such modifications, improvements and corrections are suggested in this specification, so such modifications, improvements and corrections still belong to the spirit and scope of the exemplary embodiments of this specification.

Meanwhile, this specification uses specific words to describe the embodiments of this specification. For example, "one embodiment", "an embodiment", and/or "some embodiments" refer to a certain feature, structure or characteristic related to at least one embodiment of this specification. Therefore, it should be emphasized and noted that two or more references to "an embodiment" or "an embodiment" or "an alternative embodiment" in different places in this specification do not necessarily refer to the same embodiment . In addition, certain features, structures or characteristics in one or more embodiments of this specification may be properly combined.

In addition, those skilled in the art will understand that various aspects of this specification can be illustrated and described by several patentable categories or situations, including any new and useful process, machine, product or combination of substances, or any combination of them Any new and useful improvements. Correspondingly, various aspects of this specification may be entirely executed by hardware, may be entirely executed by software (including firmware, resident software, microcode, etc.), or may be executed by a combination of hardware and software. The above hardware or software may be referred to as "block", "module", "engine", "unit", "component" or "system". Additionally, aspects of this specification may be embodied as a computer product comprising computer readable program code on one or more computer readable media.

A computer storage medium may contain a propagated data signal embodying a computer program code, for example, in baseband or as part of a carrier wave. The propagated signal may have various manifestations, including electromagnetic form, optical form, etc., or a suitable combination. A computer storage medium may be any computer-readable medium, other than a computer-readable storage medium, that can be used to communicate, propagate, or transfer a program for use by being coupled to an instruction execution system, apparatus, or device. Program code residing on a computer storage medium may be transmitted over any suitable medium, including radio, electrical cable, fiber optic cable, RF, or the like, or combinations of any of the foregoing.

The computer program codes required for the operation of each part of this manual can be written in any one or more programming languages, including object-oriented programming languages such as Java, Scala, Smalltalk, Eiffel, JADE, Emerald, C++, C#, VB.NET, Python etc., conventional procedural programming languages such as C language, Visual Basic, Fortran 2003, Perl, COBOL 2002, PHP, ABAP, dynamic programming languages such as Python, Ruby and Groovy, or other programming languages. The program code may run entirely on the user's computer, or as a stand-alone software package, or run partly on the user's computer and partly on a remote computer, or entirely on the remote computer or server. In the latter case, the remote computer can be connected to the user computer through any form of network, such as a local area network (LAN) or wide area network (WAN), or to an external computer (such as through the Internet), or in a cloud computing environment, or as a service Use software as a service (SaaS).

In addition, unless explicitly stated in the claims, the order of processing elements and sequences described in this specification, the use of numbers and letters, or the use of other names are not used to limit the sequence of processes and methods in this specification. While the foregoing disclosure has discussed by way of various examples some embodiments of the invention that are presently believed to be useful, it should be understood that such detail is for illustrative purposes only and that the appended claims are not limited to the disclosed embodiments, but rather, the claims The claims are intended to cover all modifications and equivalent combinations that fall within the spirit and scope of the embodiments of this specification. For example, although the system components described above may be implemented by hardware devices, they may also be implemented by a software-only solution, such as installing the described system on an existing server or mobile device.

In the same way, it should be noted that in order to simplify the expression disclosed in this specification and help the understanding of one or more embodiments of the invention, in the foregoing description of the embodiments of this specification, sometimes multiple features are combined into one embodiment, drawings or descriptions thereof. This method of disclosure does not, however, imply that the subject matter of the specification requires more features than are recited in the claims. Indeed, embodiment features are less than all features of a single foregoing disclosed embodiment.

Each patent, patent application, patent application publication, and other material, such as article, book, specification, publication, document, etc., cited in this specification is hereby incorporated by reference in its entirety. Application history documents that are inconsistent with or conflict with the content of this specification are excluded, and documents (currently or later appended to this specification) that limit the broadest scope of the claims of this specification are also excluded. It should be noted that if there is any inconsistency or conflict between the descriptions, definitions, and/or terms used in the accompanying materials of this manual and the contents of this manual, the descriptions, definitions and/or terms used in this manual shall prevail .

Finally, it should be understood that the embodiments described in this specification are only used to illustrate the principles of the embodiments of this specification. Other modifications are also possible within the scope of this description. Therefore, by way of example and not limitation, alternative configurations of the embodiments of this specification may be considered consistent with the teachings of this specification. Accordingly, the embodiments of this specification are not limited to the embodiments explicitly introduced and described in this specification.

While preferred embodiments of the invention have been described, additional changes and modifications to these embodiments can be made by those skilled in the art once the basic inventive concept is appreciated. Therefore, it is intended that the appended claims be construed to cover the preferred embodiment as well as all changes and modifications which fall within the scope of the invention.

Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalent technologies, the present invention also intends to include these modifications and variations.

Claims (10)

1. a code conversion method between different front-end frameworks, it is characterized in that, described method comprises the following steps: S1. Obtain the type of the source file component; S2. Match the type of the source file component with the first preset file type, if the match is successful, name the source file component as the first file component and execute step S3, if the match fails, execute step S9 ; S3. Parse the first file component to obtain a template block, a code block, and a style block; S4. Analyzing the code block to obtain a first abstract syntax tree; S5. Traversing the first abstract syntax tree to obtain a second abstract syntax tree includes obtaining the node type in the first abstract syntax tree and matching it with the first preset node type. If the match is successful, use the first The rules process the nodes that match successfully, and if the match fails, the user sets the corresponding second rule for all nodes that fail to match; S6. Traversing the template block to obtain the third abstract syntax tree includes obtaining the node type in the third abstract syntax tree and matching it with the second preset node type, and if the match is successful, using the third rule pair to match Successful nodes are processed, and if the matching fails, the user sets the corresponding fourth rule for all matching failed nodes to process; S7. Merging the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree; S8. Based on the fourth abstract syntax tree, generate a first code, merge the first code with the code of the style block, and obtain the file code of the first target component; S9. Match the type of the source file component with the second preset file type, if the matching is successful, name the source file component as the second file component and execute step S10, and exit if the matching fails; S10. Analyzing the second file component to obtain a fifth abstract syntax tree; S11. Traversing the fifth abstract syntax tree to obtain the sixth abstract syntax tree includes obtaining the node type in the fifth abstract syntax tree and matching it with the third preset node type. If the match is successful, use the fifth abstract syntax tree. The rules process the nodes that match successfully, and if the match fails, the user sets the corresponding sixth rule for all nodes that fail to match; S12. Based on the sixth abstract syntax tree, generate a second code, where the second code is a file code of a second target component. 2. a kind of code conversion method between different front-end frameworks according to claim 1, it is characterized in that, if matching fails, the user then sets the corresponding second rule to all matching failed nodes and handles and comprises: a1. Obtain the processing result of the node corresponding to the matching failure; a2. judging whether the processing result is successful, if so, execute step a3, if not, execute step a4; a3. adding the node type of the node corresponding to the matching failure to the first preset node type, and adding the second rule of the corresponding node of the matching failure to the first rule; a4. Set the seventh rule for the matching failure corresponding node for processing; a5. Repeat steps a1-a4 until the processing results of all matching failure nodes are successful. 3. A code conversion method between different front-end frameworks according to claim 1, characterized in that the method further comprises, obtaining version information of preset front-end framework components, and obtaining the preset version information based on the version information Set the framework information of the front-end framework component, based on the framework information, the first preset node type, the first rule, the second preset node type, the third rule, the third preset Set the node type and the fourth rule to be updated. 4. A code conversion method between different front-end frameworks according to claim 1, wherein, if the matching is successful, using the first rule to process the successfully matching node includes, based on the depth-first traversal method, matching Several first preset functions in successful nodes are transformed to obtain corresponding several first functions, all of which satisfy the first syntax of the first target component. 5. A code conversion method between different front-end frameworks according to claim 1, wherein if the matching is successful, using the third rule to process the successfully matching node includes, based on the depth-first traversal method, matching Several built-in directives in the successful node convert. 6. A code conversion method between different front-end frameworks according to claim 1, characterized in that, based on the fourth abstract syntax tree, the first code is generated and merged with the code of the style block to obtain the first code The file code of a target component includes: based on the first preset code generation tool, processing the fourth abstract syntax tree to obtain a first code string, and writing the first code string into the first preset suffix file to obtain the first code, write the code string of the style block into the second preset suffix file to obtain the third code, combine the first code and the third code to obtain the first target component file code. 7. A code conversion method between different front-end frameworks according to claim 1, wherein, if the matching is successful, then using the fifth rule to process the successfully matching node includes, based on the depth-first traversal method, matching Several second preset functions in successful nodes are rewritten to obtain several rewriting results, all of which satisfy the second syntax of the second target component. 8. The code conversion method between different front-end frameworks according to claim 1, characterized in that, based on the sixth abstract syntax tree, a second code is generated, and the second code is a file of the second target component The code includes: processing the sixth abstract syntax tree to obtain a second code string based on a second preset code generation tool, and writing the second code string into a third preset suffix file to obtain the first Two codes, the second code is the file code of the second target component. 9. A code conversion system between different front-end frameworks, characterized in that the system comprises: Acquisition unit, used to obtain the type of the source file component; The first matching unit is configured to match the type of the source file component with the first preset file type, if the match is successful, name the source file component as the first file component and execute the first parsing unit, if If the matching fails, execute the second matching unit; A first parsing unit, configured to parse the first file component to obtain a template block, a code block, and a style block; a second parsing unit, configured to parse the code block to obtain a first abstract syntax tree; The first traversal unit, configured to traverse the first abstract syntax tree to obtain the second abstract syntax tree includes, obtaining the node type in the first abstract syntax tree and matching with the first preset node type, if the matching is successful , the first rule is used to process the nodes that match successfully, and if the match fails, the user sets the corresponding second rule for all nodes that fail to match; The second traversal unit, configured to traverse the template block to obtain a third abstract syntax tree includes: obtaining the node type in the third abstract syntax tree and matching it with the second preset node type, and if the matching is successful, using The third rule processes the nodes that match successfully, and if the match fails, the user sets the corresponding fourth rule for all nodes that fail to match; a merging unit, configured to merge the second abstract syntax tree and the third abstract syntax tree to obtain a fourth abstract syntax tree; a first code generation unit, configured to generate a first code based on the fourth abstract syntax tree, and combine the first code with the code of the style block to obtain the file code of the first target component; The second matching unit is used to match the type of the source file component with the second preset file type, if the match is successful, name the source file component as the second file component and execute the third parsing unit, if If the match fails, exit; a third parsing unit, configured to parse the second file component to obtain a fifth abstract syntax tree; The third traversal unit, configured to traverse the fifth abstract syntax tree to obtain the sixth abstract syntax tree includes, obtaining the node type in the fifth abstract syntax tree and matching with the third preset node type, if the matching is successful , the fifth rule is used to process the nodes that match successfully, and if the match fails, the user sets the corresponding sixth rule for all nodes that fail to match; The second code generation unit is configured to generate a second code based on the sixth abstract syntax tree, where the second code is the file code of the second target component. 10. A code conversion device between different front-end frameworks, comprising a memory, a processor, and a computer program stored in the memory and operable on the processor, wherein the processor executes the computer program The program is the step of realizing the code conversion method between different front-end frameworks as described in any one of claims 1-7.

Images