A project change method and change device based on VUE engineering code project

By forming and processing abstract syntax trees through the VUE compiler, parser, and converter, the high cost and low efficiency problems in the merging and splitting of main applications and micro applications are solved, an efficient project change method is implemented, maintenance costs are reduced, and development efficiency is improved.

CN116107543BActive Publication Date: 2025-09-23BOE TECHNOLOGY GROUP CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202211548041.5
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-12-05
Publication Date
2025-09-23
Estimated Expiration
2042-12-05

Smart Images

  • Figure CN116107543B_ABST
    Figure CN116107543B_ABST
Patent Text Reader

Abstract

The present invention discloses a project change method and change device based on a VUE engineering code project, wherein the project change method of one embodiment includes: based on an original VUE engineering code project including a main application and at least one micro-application, forming an abstract syntax tree according to a js object literal format by a VUE compiler; in response to a project change option set by a user, parsing the abstract syntax tree and generating a keyword identifier by a VUE parser; according to the keyword identifier, performing project conversion on the original VUE engineering code project by a VUE converter to generate and store a VUE engineering code update project. The project change method provided by the present invention can realize the adaptive compilation conversion of configuration files and the addition of project dependencies, thereby realizing the merging or splitting of Vue projects with the same framework by modifying the structure of the VUE engineering file, effectively reducing maintenance costs, improving development efficiency, reducing workload, and having practical application value.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of Internet technology, and in particular to a project change method and device based on a VUE engineering code project. Background Art

[0002] In actual project development, changes in business and project requirements will lead to the need to split, reorganize, and rebuild projects. For example, in independently deployed projects, micro-applications in the main application need to be deployed and maintained separately. This requires manual modification of the basic framework, splitting aggregate dependencies, modifying configuration files, and adapting project isolation. This results in high maintenance costs and error rates. Manually merging and reconstructing multiple projects increases the workload and reduces work efficiency.

[0003] How to achieve convenient and quick splitting or merging of main applications and micro-applications has become a technical problem that needs to be solved urgently by those skilled in the art. Summary of the Invention

[0004] In order to solve at least one of the above problems, the first aspect of the present invention provides a project change method based on a VUE engineering code project, comprising:

[0005] Based on the original VUE project code project, an abstract syntax tree is formed according to the js object literal format by the VUE compiler, and the original VUE project code project includes a main application and at least one micro application;

[0006] In response to a project change option set by a user, the abstract syntax tree is parsed by a VUE parser and a keyword identifier is generated;

[0007] According to the keyword identifier, the original VUE engineering code project is converted by a VUE converter to generate and store a VUE engineering code update project.

[0008] Furthermore, the forming of an abstract syntax tree based on the original VUE engineering code project according to the js object literal format by the VUE compiler further includes:

[0009] Traversing the main application of the original VUE engineering code project and the first engineering files of each micro-application through the VUE compiler to obtain the relationship information of the original VUE engineering code project;

[0010] According to the relationship information, an abstract syntax tree is formed in the js object literal format through the VUE compiler.

[0011] Furthermore, in response to the project change option set by the user being a merge option, parsing the abstract syntax tree by the VUE parser and generating keyword identifiers further includes:

[0012] According to the preset merging strategy, the abstract syntax tree is parsed by the VUE parser according to the VUE project framework to obtain the resource information of the main application and each micro-application of the original VUE project code project and perform resource integration;

[0013] Package each micro-application into a component package named after the project according to a preset merging strategy, and form a first update configuration file of the VUE engineering code update project;

[0014] According to a preset merging strategy, resource information of each micro-application is used to generate a first keyword identifier according to at least one of module type, source, isolation strategy and merging mode.

[0015] Furthermore, generating a first keyword identifier based on the resource information of each micro-application according to at least one of module type, source, isolation strategy, and merging mode according to a preset merging strategy further includes at least one of the following steps:

[0016] According to a preset merging strategy, the resource information of each micro-application is generated into a merged module type identifier according to the module type;

[0017] According to a preset merging strategy, the resource information of each micro-application is identified by a source generation module according to the source;

[0018] According to the preset merging strategy, the resource information of each micro-application is generated into a merge isolation mode identifier according to the isolation strategy;

[0019] According to the preset merging strategy, the resource information of each micro-application is generated into a packaging mode identifier according to the merging mode.

[0020] Furthermore, packaging each micro-application into a component package named after the project name according to a preset merging strategy further includes:

[0021] Based on the nested relationship between the main application and each micro-application in the merging strategy, each micro-application is packaged into a component package named after the project name.

[0022] Furthermore, the converting the original VUE engineering code project by a VUE converter according to the keyword identifier to generate and store a VUE engineering code update project further includes:

[0023] Creating a second project file of the VUE project code update project through a VUE converter, wherein the second project file includes a plurality of folders;

[0024] Retrieve the first keyword identifier through the VUE converter and obtain the first dependency attribution information of the VUE engineering code update project, merge and remove duplicates according to the first dependency attribution information, the main application and the resource information of each micro-application to generate a resource file of the VUE engineering code update project and store it in the corresponding folder in the second engineering file;

[0025] Generate the configuration items of the VUE engineering code update project according to the first update configuration file through the VUE converter and store them in the corresponding folder of the second engineering file;

[0026] According to the original VUE engineering code project, other files of the VUE engineering code update project are generated by a VUE converter and stored in corresponding folders in the second engineering file.

[0027] Furthermore, in response to the project change option set by the user being a split option, parsing the abstract syntax tree by the VUE parser and generating keyword identifiers further includes:

[0028] According to the preset splitting strategy, the abstract syntax tree is parsed by the VUE parser according to the VUE project framework to obtain the resource information of the main application and each micro-application of the original VUE project code project and perform resource splitting;

[0029] Generate multiple page exits named after the project name, the main application name or the corresponding micro-application name according to the preset splitting strategy, and form a second update configuration file of the VUE engineering code update project, wherein the second update configuration file includes the split first sub-update configuration file of the main application and the second sub-update configuration file of each micro-application;

[0030] According to a preset splitting strategy, resource information of each micro-application is used to generate a second keyword identifier according to at least one of module type, source, isolation strategy and splitting mode.

[0031] Furthermore, generating a second keyword identifier based on at least one of module type, source, isolation strategy, and split mode for the resource information of each micro-application according to a preset splitting strategy further includes at least one of the following steps:

[0032] According to a preset splitting strategy, the resource information of each micro-application is generated into a split module type identifier according to the module type;

[0033] According to a preset splitting strategy, the resource information of each micro-application is identified by a source generation module according to the source;

[0034] According to the preset splitting strategy, the resource information of each micro-application is generated into a split isolation mode identifier according to the isolation strategy;

[0035] According to the preset splitting strategy, the resource information of each micro-application is generated into a packaging mode identifier according to the splitting mode.

[0036] Furthermore, generating multiple page exits named after the project name, the main application name or the corresponding micro-application name according to the preset splitting strategy further includes:

[0037] Based on the nested relationship between the main application and each micro-application in the original VUE engineering code project and the splitting requirements of the splitting strategy, multiple page exits named with the project name, the main application name or the corresponding micro-application name are generated.

[0038] Furthermore, the converting the original VUE engineering code project by a VUE converter according to the keyword identifier to generate and store a VUE engineering code update project further includes:

[0039] Creating a third project file of the VUE project code update project through a VUE converter, wherein the third project file includes a plurality of folders;

[0040] Retrieve the second keyword identifier through the VUE converter and obtain the second dependency attribution information of the VUE engineering code update project, split and add according to the second dependency attribution information, the main application and the resource information of each micro-application to generate a resource file of the VUE engineering code update project and store it in the corresponding folder in the third engineering file;

[0041] Generate the configuration items of the VUE engineering code update project according to the second update configuration file through the VUE converter and store them in the corresponding folder of the third engineering file;

[0042] According to the original VUE engineering code project, other files of the VUE engineering code update project are generated by a VUE converter and stored in corresponding folders in the third engineering file.

[0043] A second aspect of the present invention provides a project change device based on a VUE engineering code project, comprising a VUE compiler, a VUE parser, a VUE converter, and a controller, wherein the controller is configured to:

[0044] Based on the original VUE project code project, an abstract syntax tree is formed according to the js object literal format by the VUE compiler, and the original VUE project code project includes a main application and at least one micro application;

[0045] In response to a project change option set by a user, the abstract syntax tree is parsed and data processed by a VUE parser to generate a keyword identifier;

[0046] According to the keyword identifier, a project conversion is performed by a VUE converter to generate and store a VUE engineering code update project.

[0047] A third aspect of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method described in the first aspect.

[0048] A fourth aspect of the present invention provides a computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method described in the first aspect when executing the program.

[0049] The beneficial effects of the present invention are as follows:

[0050] In response to the current existing problems, the present invention develops a project change method and change device based on the VUE engineering code project, which realizes the adaptive compilation and conversion of configuration files and the addition of project dependencies through the VUE compiler, VUE parser and VUE converter, thereby realizing the merging or splitting of Vue projects with the same framework through structural modification of the VUE engineering file, and can conveniently and quickly realize the construction requirements of main applications and micro-applications in different projects, effectively reduce maintenance costs, improve development efficiency, reduce workload, and has practical application value. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] In order to more clearly illustrate the technical solutions in 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 only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0052] Figure 1 A flowchart showing a project change method according to an embodiment of the present invention;

[0053] Figure 2 A schematic diagram showing the specific framework structure of the VUE engineering code project;

[0054] Figures 3a-3e A schematic diagram illustrating a VUE engineering code project of an independently deployed main application and at least one micro-application according to an embodiment of the present invention;

[0055] Figure 4 A schematic diagram showing an abstract syntax tree according to an embodiment of the present invention;

[0056] Figure 5 A schematic diagram showing a merged and reconstructed page file according to an embodiment of the present invention;

[0057] Figure 6 A structural block diagram of a project change device according to an embodiment of the present invention is shown;

[0058] Figure 7 A schematic structural diagram of a computer device according to another embodiment of the present invention is shown. DETAILED DESCRIPTION

[0059] In order to more clearly illustrate the present invention, the present invention is further described below in conjunction with preferred embodiments and accompanying drawings. Similar components in the accompanying drawings are represented by the same reference numerals. It should be understood by those skilled in the art that the following detailed description is illustrative rather than restrictive and should not be used to limit the scope of protection of the present invention.

[0060] In response to the problems existing in the relevant technology, the inventors proposed after extensive research and experiments that the reason for the shortcomings of manual merging or splitting is that when merging, the resources and configurations of each micro-application need to be integrated to form unified resources and configurations, while when splitting, each independent micro-application needs to add its own resources and configurations separately, which leads to increased workload, easy errors and reduced work efficiency.

[0061] According to the above problems and the causes of the problems, such as Figure 1 As shown, one embodiment of the present invention provides a project change method based on a VUE engineering code project, comprising: based on the original VUE engineering code project, forming an abstract syntax tree according to the js object literal format through the VUE compiler, the original VUE engineering code project including a main application and at least one micro application; in response to the project change option set by the user, parsing the abstract syntax tree through the VUE parser and generating a keyword identifier; according to the keyword identifier, performing project conversion on the original VUE engineering code project through the VUE converter to generate and store a VUE engineering code update project.

[0062] Vue is a progressive JavaScript framework for building user interfaces. Designed for bottom-up, layer-by-layer application, Vue's core principles include data-driven views, the MVVM pattern (M: data model, V: view page, and VM: controller view model), and component-based development, effectively improving development efficiency. JavaScript is a lightweight, function-first, interpreted, or just-in-time compiled programming language.

[0063] In this embodiment, based on the file type framework of the VUE project, the VUE compiler is first used to form an abstract syntax tree including a main application and at least one micro-application representing the original project according to the original VUE project code project, and then the VUE parser is used to parse the abstract syntax tree according to the merge or split instruction to generate a keyword identifier for merging or splitting, and finally the VUE converter is used to convert the original project and generate a new project according to the file type framework of the VUE project. This embodiment completes the automated construction of the original VUE project according to the merge or split instruction, through the adaptive compilation conversion and project dependency addition of the configuration file, and by modifying the structure based on the VUE project file to realize the merging or splitting of the Vue same framework project, thereby conveniently and quickly realizing the construction requirements of the main application and micro-application in different projects, effectively reducing maintenance costs, improving development efficiency, reducing workload, and having practical application value.

[0064] In a specific example, the process of merging and reconstructing the main application and each micro-application in the VUE project code project is described in detail, where the main application and each micro-application are deployed separately. Specifically, the process includes:

[0065] In the first step, based on the original VUE project code project, an abstract syntax tree is formed according to the js object literal format through the VUE compiler, and the original VUE project code project includes a main application and at least one micro application.

[0066] In this embodiment, if Figure 2 The following shows the specific framework structure of the VUE project code package.json, including multiple folders and file types, such as interface files api, resource files assets, layout files layout, routing files router, style files styles, etc., which are used to describe the specific information of the VUE project code package.json. Figures 3a-3e As shown, the original VUE project code project includes a main application and at least one micro application, specifically, Figure 3a As shown, according to the specific framework structure of the VUE project, the main application A, micro application B and micro application C are formed; Figure 3b The following is the folder of the main application A, which contains page files, resource files, assets, and routing files. Figure 3c The following is the folder of micro application B, which has an independent set of page files, resource files assets and routing files router and other files; Figure 3d The following is the folder of micro application C, which has an independent set of page files, resource files assets and routing files router and other files; Figure 3eThe following shows the specific content of the page file of the main application A, where the microApp of microViews includes micro application B and micro application C, as shown in the following figure: Figures 3a-3e It can be seen that the VUE project code project is stored in different folders under package.json. In other words, micro-application B and micro-application C each include multiple independent folders, which are used to store the configuration files of micro-application B and micro-application C respectively. The abstract syntax tree is used to represent the VUE project code project. The abstract syntax tree AST is essentially a JS object expressed in the form of a string. In other words, the abstract syntax tree AST serves the compilation of the VUE project code project. The VUE compiler can convert the VUE project code project into an abstract syntax tree AST, including JS object literals in string form, including the logical relationship between the main application and each micro-application.

[0067] This embodiment uses the VUE compiler to form an abstract syntax tree according to the js object literal format, specifically including:

[0068] First, the relationship information of the original VUE project code project is obtained by traversing the main application and the first project files of each micro-application of the original VUE project code project through the VUE compiler.

[0069] In this embodiment, the first project file includes the project project, configuration file, and directory structure of the original VUE project code project, and the relationship information includes the dependencies, packaging strategies, and deployment rules of the main application and each micro-application. Specifically, the VUE compiler traverses the main application and micro-application project package.json, configuration files babel.config.js, vue.config.js, and .prettierrc of the original VUE project code project to obtain the main dependencies, packaging strategies, and deployment rules in the directory structure of the original VUE project code project.

[0070] Secondly, based on the relationship information, an abstract syntax tree is formed in the js object literal format through the VUE compiler.

[0071] In this embodiment, the abstract syntax tree AST is generated by the VUE compiler according to the js object literal format mapping. The abstract syntax tree AST is a json or js file based on descriptions including nested relationships, routing / resource / data state configuration, related dependency collection, directory structure and formatting functions.

[0072] like Figure 4As shown, part of the abstract syntax tree of this embodiment is in an object-based string format, where the name of the main application A is "mainA", the dependency relationship dependent includes the micro-application B named "mainB", the dependency relationship dependent and configuration list configList of micro-application B, and the configuration list configList, routing file routes and resource file assets of the main application A.

[0073] In this embodiment, an abstract syntax tree including a main application and at least one micro-application representing the original project is formed according to the original VUE project code project by the VUE compiler, so that the VUE parser can parse according to the abstract syntax tree.

[0074] In the second step, in response to the project change option set by the user, the abstract syntax tree is parsed by the VUE parser and a keyword identifier is generated.

[0075] In this embodiment, the VUE parser obtains resource allocation of the original VUE engineering code project by parsing the abstract syntax tree, and performs a preparation operation for resource reorganization by generating keyword identifiers according to project change options.

[0076] Specifically include:

[0077] First, according to a preset merging strategy, the abstract syntax tree is parsed by a VUE parser according to the VUE project framework to obtain resource information of the main application and each micro-application of the original VUE project code project and perform resource integration.

[0078] In this embodiment, the VUE parser parses the abstract syntax tree according to the VUE engineering framework, specifically parsing the AST description file according to the file type (vue, html, css, js, image, etc.), module reference dependency, application isolation and other strategies of the VUE engineering framework, thereby obtaining the resource information of the main application and each micro-application of the original VUE engineering code project, and the resource information includes the routing file, configuration file, resource file and other related files of the main application.

[0079] In this embodiment, based on the merge operation selected by the user through the visual interface and the parameter options involved in the merge operation, or based on the merge operation represented by the user through instructions and the parameter options involved in the merge operation, the VUE parser integrates the resource information of the main application and each micro-application obtained by parsing the AST description file according to the merge operation and parameter options.

[0080] Specifically, Figures 3a-3eThe independent deployment of the main application A and micro-applications B and C is shown as an example for explanation. The main application A includes micro-applications B and micro-applications C. Micro-applications B and micro-applications C are parallel structures. The VUE parser is associated with all included applications through the main application mainA dependency chain according to the merge operation and parameter options, that is, associated with micro-applications B and micro-applications C to achieve similar combinations.

[0081] Secondly, each micro-application is packaged into a component package named after the project according to a preset merging strategy, and a first update configuration file of the VUE engineering code update project is formed.

[0082] In this embodiment, the VUE parser packages each micro-application according to the project name according to the rules of the merge operation. For example, micro-application B and micro-application C are packaged to form a component package named after the project name. At the same time, for the merged micro-application B and micro-application C, a first update configuration file of the VUE engineering code update project is formed, that is, based on the configuration file of the original VUE engineering code project, a merged update configuration file is formed according to the merge strategy, that is, the VUE project includes a vue.config.js file. Taking into account that the micro-applications under the main application are nested structures, in an optional embodiment, based on the nested relationship between the main application and the micro-applications described in the merge strategy, each micro-application is packaged as a component package named after the project name.

[0083] In this embodiment, for example, main application A includes micro-application B and micro-application C, and micro-application B and micro-application C are nested structures. For example, micro-application B includes micro-application C. In this case, micro-application B and micro-application C are packaged based on their nested relationship, and the resulting component package includes the nested relationship between the two, and the component package is named using the project name.

[0084] Thirdly, according to the preset merging strategy, the resource information of each micro-application is used to generate a first keyword identifier according to at least one of the module type, source, isolation strategy and merging mode.

[0085] In this embodiment, the VUE parser further generates a merge module type identifier (including micro-applications, main applications and components, etc.) based on the merging strategy and the component file content of type:micro / main / component based on the merge strategy, indicating that the modules of the same type will be integrated; and based on the source involved in the resource integration, for example, a module source identifier is generated according to the from:appA / mainA file content, indicating that the same module source will be integrated; and based on the isolation strategy involved in the resource integration, for example, a merge isolation mode identifier (for example, including strict mode and experimental mode) is generated according to the sandbox:strict / experimental and activeRule:[url1,url2] file contents, indicating that the same mode modules will be integrated; and based on the merge combination mode involved in the resource integration, for example, a packaging mode identifier (for example, including dependency packages, fusion packages, split packages and plug-in packages) is generated according to schema:module / merge / split / plugin, indicating that the same packaging mode modules will be integrated, thereby generating a keyword identifier based on at least one of the above identifiers to facilitate the VUE converter to perform project conversion.

[0086] In the third step, according to the keyword identifier, the original VUE engineering code project is converted by a VUE converter to generate and store a VUE engineering code update project.

[0087] In this embodiment, the VUE converter performs the substantive operation of file reorganization based on the keyword identifier generated by the VUE parser, that is, converting the original VUE engineering code project to generate a VUE engineering code update project. Specifically, it includes:

[0088] First, a second project file of the VUE project code update project is created through a VUE converter, where the second project file includes a plurality of folders.

[0089] In this embodiment, a project file of the reorganization project is created through the VUE converter, that is, a new project file is formed according to the VUE project framework, and each folder included in the project file is empty.

[0090] Secondly, the first keyword identifier is retrieved through the VUE converter to obtain the first dependency attribution information of the VUE engineering code update project, and the resource information of the first dependency attribution information, the main application and each micro-application are merged and deduplicated to generate the resource file of the VUE engineering code update project and store it in the corresponding folder in the second engineering file.

[0091] In this embodiment, the VUE converter retrieves the dependency attribution information of the main application and each micro-application based on the keyword identifier generated by the VUE parser, such as the module type, source, isolation strategy and merge combination mode, and merges the package.json to perform deduplication and generate a merged resource file, which is stored in the corresponding folder of the new project file to fill the second project file of the VUE project code update project.

[0092] Specifically, Figures 3a-3e The independent deployment of the main application A and micro-applications B and C is shown as an example. In the original VUE engineering code project, the main application A includes its own resource files, and micro-applications B and micro-applications C also include their own resource files. During the merging process, the resource files of the main application A, micro-applications B and micro-applications C are integrated, and the overlapping resource files are removed to generate updated resource files. On the one hand, it can ensure the accurate operation of the main application A, micro-applications B and micro-applications C, while avoiding operation errors caused by resource redundancy, and further reduce the space occupied by resource files; on the other hand, a single resource file is convenient for maintenance, upgrading and deployment, effectively reducing the maintenance cost of the VUE engineering code project and improving the development efficiency of R&D personnel.

[0093] Thirdly, the configuration items of the VUE engineering code update project are generated according to the first update configuration file by a VUE converter and stored in a corresponding folder in the second engineering file.

[0094] In this embodiment, based on the generation of a new resource file, a merged configuration item file is generated by the VUE converter according to the update configuration file generated by the VUE parser, and stored in the corresponding folder of the new project file to fill the second project file of the VUE project code update project.

[0095] Finally, based on the original VUE project code project, other files of the VUE project code update project are generated by a VUE converter and stored in corresponding folders in the second project file.

[0096] In this embodiment, the original VUE engineering code project is further converted by the VUE converter to fill in the second engineering file of the VUE engineering code update project, specifically, for example, filling in files such as lib, public, src, components, config, router, store, assets, fetch, common, tools, types, constant, vue.config.json, babel.config.json, package.json, and main.js.

[0097] Specifically, such as Figure 5 The following figure shows the page file for the merged VUE project code update project, which includes multiple merged page sub-projects. The file defines the entry address entry, template template, and file name filename for the main application main. The page file also includes the merged micro-application B, which includes the entry address entry, template template, and file name filename. As the figure shows, after merging and reconstructing the independently configured main application and micro-applications, a unified merged page file is formed, including the page settings for the main application and micro-applications.

[0098] At this point, the process of merging and reconstructing the main application and each micro-application is completed. This embodiment uses the VUE compiler, VUE parser, and VUE converter to implement the adaptive compilation and conversion of configuration files and the addition of project dependencies, thereby modifying the structure of the VUE project file to achieve the merging of Vue with the same framework project, which can conveniently and quickly meet the construction requirements of the main application and micro-application in different projects, effectively reducing maintenance costs, improving development efficiency, and reducing workload.

[0099] In another specific example, the process of splitting and reconstructing the main application and each micro-application in the VUE project code project is described in the case where the main application and each micro-application are deployed as a whole, specifically including:

[0100] In the first step, based on the original VUE project code project, an abstract syntax tree is formed according to the js object literal format through the VUE compiler, and the original VUE project code project includes a main application and at least one micro application.

[0101] In this embodiment, the relationship information of the original VUE project code project is obtained by traversing the main application of the original VUE project code project and the first project file of each micro-application through the VUE compiler, and an abstract syntax tree is formed according to the js object literal format. Specifically, the original VUE project code project includes a main application and at least one micro-application. According to the specific framework structure of the VUE project, different folders are set to form a main application A, as well as micro-application B and micro-application C. The main application A, micro-application B and micro-application C of this embodiment are uniformly deployed, that is, stored in a unified folder under the VUE project code project package.json, for example, with a unified resource file and configuration file.

[0102] The specific implementation of this embodiment is the same as that of the above embodiment and will not be repeated here.

[0103] In the second step, in response to the project change option set by the user, the abstract syntax tree is parsed by the VUE parser and a keyword identifier is generated.

[0104] In this embodiment, the VUE parser obtains resource allocation of the original VUE engineering code project by parsing the abstract syntax tree, and performs a preparation operation for resource reorganization by generating keyword identifiers according to project change options.

[0105] Specifically include:

[0106] First, according to a preset splitting strategy, the abstract syntax tree is parsed by a VUE parser according to a VUE project framework to obtain resource information of the main application and each micro-application of the original VUE project code project and perform resource splitting.

[0107] In this embodiment, the VUE parser parses the abstract syntax tree according to the VUE engineering framework, specifically parsing the AST description file according to the file type (vue, html, css, js, image, etc.), module reference dependency, application isolation and other strategies of the VUE engineering framework, thereby obtaining the unified resource information of the main application and each micro-application of the original VUE engineering code project, and the resource information includes the routing files, configuration files, resource files and other related files of the main application and each micro-application.

[0108] In this embodiment, according to the split operation selected by the user through the visual interface and the parameter options involved in the split operation, or according to the split operation represented by the user through instructions and the parameter options involved in the split operation, the VUE parser performs resource splitting on the resource information of the main application and each micro-application obtained by parsing the AST description file according to the split operation and parameter options.

[0109] Specifically, Figure 5 The unified deployment of the main application A and micro-applications B and C is shown as an example for explanation. The main application A includes micro-applications B and micro-applications C. Micro-applications B and micro-applications C are parallel structures. The VUE parser associates to all included applications through the main application mainA dependency chain according to the split operation and parameter options, that is, associates micro-applications B and micro-applications C respectively to realize the split operation.

[0110] Secondly, according to the preset splitting strategy, multiple page exits named with the project name, main application name or corresponding micro-application name are generated, and a second update configuration file of the VUE engineering code update project is formed. The second update configuration file includes the first sub-update configuration file of the split main application and the second sub-update configuration file of each micro-application.

[0111] In this embodiment, the VUE parser splits according to the project name, main application name or corresponding micro-application according to the rules of the split operation. For example, the main application A, micro-application B and micro-application C are split and respectively form different page exits, and are named with different names. Specifically, micro-application B and micro-application C are split out from the main application A, and the independent page exit of the main application A is named with the project name + the main application name, the independent page exit of micro-application B is named with the project name + the micro-application B name, and the independent page exit of micro-application C is named with the project name + the micro-application C name. At the same time, for the relatively independent main application A, micro-application B and micro-application C after the split, a second update configuration file of the VUE project code update project is formed, that is, based on the configuration file of the original VUE project code project, according to the split strategy, a split update configuration file is formed, including multiple sub-update configuration files, that is, the VUE project includes multiple vue.config.js files stored in different applications.

[0112] Taking into account that the micro-applications under the main application are nested structures, in an optional embodiment, based on the nested relationship between the main application and the micro-applications in the original VUE engineering code project, and the splitting requirements of the splitting strategy, multiple page exits are generated named after the project name, the main application name or the corresponding micro-application name.

[0113] In this embodiment, for example, main application A includes micro-application B and micro-application C, and micro-application B and micro-application C are nested. For example, micro-application B includes micro-application C. In this case, micro-application B is first split from main application A, and then micro-application C is split from micro-application B, forming page exits of main application A, micro-application B, and micro-application C that are independently configured, and each page exit is named separately.

[0114] Thirdly, according to the preset splitting strategy, the resource information of each micro-application is used to generate a second keyword identifier according to at least one of the module type, source, isolation strategy and splitting mode.

[0115] In this embodiment, the VUE parser further generates a split module type identifier based on the resource splitting strategy, for example, a split module type identifier is generated according to the type:micro / main / component file content, and the identifier indicates that the same type of modules are split; and based on the source involved in the resource splitting, for example, a module source identifier is generated according to the from:appA / mainA file content, and the identifier indicates that the same module source is split; and based on the isolation strategy involved in the resource splitting, for example, a split isolation mode identifier (for example, including strict mode and experimental mode) is generated according to the sandbox:strict / experimental and activeRule:[url1,url2] file contents, and the identifier indicates that the same mode module is split; and based on the split combination mode involved in the resource splitting, for example, a packaging mode identifier (for example, including dependency packages, fusion packages, split packages and plug-in packages) is generated according to schema:module / merge / split / plugin, and the identifier indicates that the same packaging mode module is split, thereby generating a keyword identifier according to at least one of the above identifiers to facilitate the VUE converter to perform project conversion.

[0116] In the third step, according to the keyword identifier, the original VUE engineering code project is converted by a VUE converter to generate and store a VUE engineering code update project.

[0117] In this embodiment, the VUE converter performs the substantive operation of file reorganization based on the keyword identifier generated by the VUE parser, that is, converting the original VUE engineering code project to generate a VUE engineering code update project. Specifically, it includes:

[0118] First, a third project file of the VUE project code update project is created through a VUE converter, and the third project file includes multiple folders.

[0119] In this embodiment, a project file of the reorganization project is created through the VUE converter, that is, a new project file is formed according to the VUE project framework, and each folder included in the project file is empty.

[0120] Secondly, the second keyword identifier is retrieved through the VUE converter to obtain the second dependency attribution information of the VUE engineering code update project, and the resource information of the second dependency attribution information, the main application and each micro-application are split and added to generate the resource file of the VUE engineering code update project and stored in the corresponding folder in the third engineering file.

[0121] In this embodiment, the VUE converter retrieves the dependency attribution information of the main application and each micro-application based on the keyword identifier generated by the VUE parser, such as the module type, source, isolation strategy and split combination mode, and the package.json is split and added separately to generate multiple resource files after the split, and stored in the corresponding folder of the new project file to fill the third project file of the VUE project code update project.

[0122] Specifically, we will still take the unified deployment of the main application A, micro-application B and micro-application C as an example to illustrate. In the original VUE engineering code project, the main application A, micro-application B and micro-application C have unified resource files. During the splitting process, the main application A, micro-application B and micro-application C respectively form their own resource files, separate and add unified resource files, and generate updated multiple resource files respectively. On the one hand, it can ensure the accurate operation of the main application A, micro-application B and micro-application C after splitting. On the other hand, it realizes the reverse separation of multi-page applications into multiple micro-applications, effectively reducing the workload of R&D personnel and improving the development efficiency of R&D personnel.

[0123] Thirdly, the configuration items of the VUE engineering code update project are generated according to the second update configuration file by a VUE converter and stored in a corresponding folder in the third engineering file.

[0124] In this embodiment, based on the generation of a new resource file, a plurality of split configuration item files are generated by the VUE converter according to the update configuration file generated by the VUE parser, and stored in the corresponding folder of the new project file to fill the third project file of the VUE project code update project.

[0125] Finally, based on the original VUE project code project, other files of the VUE project code update project are generated by a VUE converter and stored in corresponding folders in the third project file.

[0126] In this embodiment, the original VUE engineering code project is further converted by the VUE converter to fill in the third engineering file of the VUE engineering code update project, specifically, for example, filling in files such as lib, public, src, components, config, router, store, assets, fetch, common, tools, types, constant, vue.config.json, babel.config.json, package.json, and main.js.

[0127] At this point, the process of splitting and reconstructing the unified deployed main application and each micro-application is completed. This embodiment uses the VUE compiler, VUE parser and VUE converter to implement the adaptive compilation and conversion of configuration files and the addition of project dependencies, thereby modifying the structure of the VUE project file to achieve the merging of Vue and framework projects. It can conveniently and quickly meet the construction requirements of the main application and micro-application in different projects, effectively reducing maintenance costs, improving development efficiency and reducing workload.

[0128] Corresponding to the project change method provided in the above-mentioned embodiment, an embodiment of the present application also provides a project change device that applies the above-mentioned project change method. Since the project change device provided in the embodiment of the present application corresponds to the project change methods provided in the above-mentioned embodiments, the previous implementation method is also applicable to the project change device provided in this embodiment and will not be described in detail in this embodiment.

[0129] like Figure 6 As shown, an embodiment of the present application also provides a project change device applying the above-mentioned project change method, including a VUE compiler, a VUE parser, a VUE converter and a controller, wherein the controller is configured to: based on the original VUE project code project, form an abstract syntax tree in accordance with the js object literal format through the VUE compiler, the original VUE project code project includes a main application and at least one micro application; in response to the project change option set by the user, parse and process the abstract syntax tree through the VUE parser to generate a keyword identifier; according to the keyword identifier, perform project conversion through the VUE converter to generate and store the VUE project code update project.

[0130] In this embodiment, the project change device controls the VUE compiler, VUE parser and VUE converter respectively through the controller to realize the adaptation compilation and conversion of the configuration file and the addition of project dependencies, thereby realizing the merging or splitting of Vue projects with the same framework through the structural modification of the VUE project file, which can conveniently and quickly realize the construction requirements of the main application and micro-application in different projects, effectively reduce maintenance costs, improve development efficiency, reduce workload, and has practical application value.

[0131] Another embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements: based on an original VUE project code project, forming an abstract syntax tree in a js object literal format by a VUE compiler, the original VUE project code project including a main application and at least one micro-application; in response to a project change option set by a user, parsing the abstract syntax tree and generating a keyword identifier by a VUE parser; and according to the keyword identifier, performing project conversion on the original VUE project code project by a VUE converter to generate and store a VUE project code update project.

[0132] In practical applications, the computer-readable storage medium can adopt any combination of one or more computer-readable media. The computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or component, or any combination thereof. More specific examples (non-exhaustive list) of computer-readable storage media include: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In the present embodiment, the computer-readable storage medium can be any tangible medium containing or storing a program, which can be used by an instruction execution system, device or device or used in combination with it.

[0133] A computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, which carries computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0134] Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

[0135] Computer program code for performing the operations of the present invention may be written in one or more programming languages, or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., through the Internet using an Internet service provider).

[0136] like Figure 7 As shown, a structural diagram of a computer device provided by another embodiment of the present invention. Figure 7 The computer device 12 shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0137] like Figure 7 As shown, computer device 12 is implemented as a general-purpose computing device. Components of computer device 12 may include, but are not limited to, one or more processors or processing units 16, system memory 28, and a bus 18 that connects various system components (including system memory 28 and processing unit 16).

[0138] Bus 18 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor, or a local bus using any of a variety of bus architectures. Examples of these architectures include, but are not limited to, an Industry Standard Architecture (ISA) bus, a Micro Channel Architecture (MAC) bus, an Enhanced ISA bus, a Video Electronics Standards Association (VESA) local bus, and a Peripheral Component Interconnect (PCI) bus.

[0139] The computer device 12 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by the computer device 12, including volatile and non-volatile media, removable and non-removable media.

[0140] System memory 28 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 30 and / or cache memory 32. Computer device 12 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, storage system 34 may be configured to read and write non-removable, non-volatile magnetic media ( Figure 7 Not shown, often called a "hard drive"). Although Figure 7 Not shown, a magnetic disk drive for reading and writing to a removable non-volatile magnetic disk (e.g., a "floppy disk"), and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 18 via one or more data media interfaces. Memory 28 may include at least one program product having a set (e.g., at least one) of program modules configured to perform the functions of various embodiments of the present invention.

[0141] A program / utility 40 having a set (at least one) of program modules 42 may be stored, for example, in memory 28. Such program modules 42 include, but are not limited to, an operating system, one or more application programs, other program modules, and program data, each of which, or some combination thereof, may include an implementation of a network environment. Program modules 42 generally implement the functions and / or methods of the embodiments described herein.

[0142] The computer device 12 may also communicate with one or more external devices 14 (e.g., a keyboard, a pointing device, a display 24, etc.), one or more devices that enable a user to interact with the computer device 12, and / or any device that enables the computer device 12 to communicate with one or more other computing devices (e.g., a network card, a modem, etc.). Such communication may occur through an input / output (I / O) interface 22. Furthermore, the computer device 12 may also communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) through a network adapter 20. Figure 7 As shown, the network adapter 20 communicates with the other modules of the computer device 12 via the bus 18. Figure 7 Not shown, other hardware and / or software modules may be used in conjunction with computer device 12, including but not limited to microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0143] The processor unit 16 executes various functional applications and data processing by running programs stored in the system memory 28, such as implementing a project change method based on a VUE engineering code project provided by an embodiment of the present invention.

[0144] Obviously, the above embodiments of the present invention are merely examples for clearly illustrating the present invention, and are not limitations on the implementation methods of the present invention. For ordinary technicians in the relevant field, other different forms of changes or modifications can be made based on the above description. It is impossible to list all the implementation methods here. All obvious changes or modifications derived from the technical solution of the present invention are still within the scope of protection of the present invention.

Claims

1. A project change method based on a VUE engineering code project, characterized in that: include: Based on the original VUE project code project, an abstract syntax tree is formed according to the js object literal format by the VUE compiler, and the original VUE project code project includes a main application and at least one micro application; In response to a project change option set by a user, the abstract syntax tree is parsed by a VUE parser and a keyword identifier is generated. In response to the project change option set by the user being a merge option, the method further includes: According to the preset merging strategy, the abstract syntax tree is parsed by the VUE parser according to the VUE project framework to obtain the resource information of the main application and each micro-application of the original VUE project code project and perform resource integration; Package each micro-application into a component package named after the project according to a preset merging strategy, and form a first update configuration file of the VUE engineering code update project; According to a preset merging strategy, the resource information of each micro-application is generated into a first keyword identifier according to at least one of module type, source, isolation strategy and merging mode; According to the keyword identifier, the original VUE engineering code project is converted by a VUE converter to generate and store a VUE engineering code update project, further comprising: Creating a second project file of the VUE project code update project through a VUE converter, wherein the second project file includes a plurality of folders; Retrieve the first keyword identifier through the VUE converter and obtain the first dependency attribution information of the VUE engineering code update project, merge and remove duplicates according to the first dependency attribution information, the main application and the resource information of each micro-application to generate a resource file of the VUE engineering code update project and store it in the corresponding folder in the second engineering file; Generate the configuration items of the VUE engineering code update project according to the first update configuration file through the VUE converter and store them in the corresponding folder of the second engineering file; According to the original VUE engineering code project, other files of the VUE engineering code update project are generated by a VUE converter and stored in corresponding folders in the second engineering file.

2. The project change method according to claim 1, characterized in that: The method of forming an abstract syntax tree based on the original VUE engineering code project according to the js object literal format by the VUE compiler further includes: Traversing the main application of the original VUE engineering code project and the first engineering files of each micro-application through the VUE compiler to obtain the relationship information of the original VUE engineering code project; According to the relationship information, an abstract syntax tree is formed in the js object literal format through the VUE compiler.

3. The project change method according to claim 1, characterized in that: The step of generating a first keyword identifier based on the resource information of each micro-application according to at least one of module type, source, isolation strategy, and merging mode according to a preset merging strategy further includes at least one of the following steps: According to a preset merging strategy, the resource information of each micro-application is generated into a merged module type identifier according to the module type; According to a preset merging strategy, the resource information of each micro-application is identified by a source generation module according to the source; According to the preset merging strategy, the resource information of each micro-application is generated into a merge isolation mode identifier according to the isolation strategy; According to the preset merging strategy, the resource information of each micro-application is generated into a packaging mode identifier according to the merging mode.

4. The project change method according to claim 1, characterized in that: The step of packaging each micro-application into a component package named after the project according to a preset merging strategy further includes: Based on the nested relationship between the main application and each micro-application in the merging strategy, each micro-application is packaged into a component package named after the project name.

5. A project change method based on a VUE engineering code project, characterized in that: include: Based on the original VUE project code project, an abstract syntax tree is formed according to the js object literal format by the VUE compiler, and the original VUE project code project includes a main application and at least one micro application; In response to a project change option set by a user, the abstract syntax tree is parsed by a VUE parser and a keyword identifier is generated. In response to the project change option set by the user being a split option, the method further includes: According to the preset splitting strategy, the abstract syntax tree is parsed by the VUE parser according to the VUE project framework to obtain the resource information of the main application and each micro-application of the original VUE project code project and perform resource splitting; Generate multiple page exits named after the project name, the main application name or the corresponding micro-application name according to the preset splitting strategy, and form a second update configuration file of the VUE engineering code update project, wherein the second update configuration file includes the split first sub-update configuration file of the main application and the second sub-update configuration file of each micro-application; According to a preset splitting strategy, the resource information of each micro-application is used to generate a second keyword identifier according to at least one of module type, source, isolation strategy and splitting mode; According to the keyword identifier, the original VUE engineering code project is converted by a VUE converter to generate and store a VUE engineering code update project, further comprising: Creating a third project file of the VUE project code update project through a VUE converter, wherein the third project file includes a plurality of folders; Retrieve the second keyword identifier through the VUE converter and obtain the second dependency attribution information of the VUE engineering code update project, split and add according to the second dependency attribution information, the main application and the resource information of each micro-application to generate a resource file of the VUE engineering code update project and store it in the corresponding folder in the third engineering file; Generate the configuration items of the VUE engineering code update project according to the second update configuration file through the VUE converter and store them in the corresponding folder of the third engineering file; According to the original VUE engineering code project, other files of the VUE engineering code update project are generated by a VUE converter and stored in corresponding folders in the third engineering file.

6. The project change method according to claim 5, characterized in that: The step of generating a second keyword identifier based on the resource information of each micro-application according to at least one of module type, source, isolation strategy, and split mode according to a preset splitting strategy further includes at least one of the following steps: According to a preset splitting strategy, the resource information of each micro-application is generated into a split module type identifier according to the module type; According to a preset splitting strategy, the resource information of each micro-application is identified by a source generation module according to the source; According to the preset splitting strategy, the resource information of each micro-application is generated into a split isolation mode identifier according to the isolation strategy; According to the preset splitting strategy, the resource information of each micro-application is generated into a packaging mode identifier according to the splitting mode.

7. The project change method according to claim 5, characterized in that: The step of generating multiple page exits named after the project name, the main application name, or the corresponding micro-application name according to the preset splitting strategy further includes: Based on the nested relationship between the main application and each micro-application in the original VUE engineering code project and the splitting requirements of the splitting strategy, multiple page exits named with the project name, the main application name or the corresponding micro-application name are generated.

8. A project change device based on a VUE engineering code project, characterized in that: The system comprises a VUE compiler, a VUE parser, a VUE converter and a controller, wherein the controller is configured to: Based on the original VUE project code project, an abstract syntax tree is formed according to the js object literal format by the VUE compiler, and the original VUE project code project includes a main application and at least one micro application; In response to a project change option set by a user, the abstract syntax tree is parsed and data processed by a VUE parser to generate a keyword identifier. In response to the project change option set by the user being a merge option, the method further includes: According to the preset merging strategy, the abstract syntax tree is parsed by the VUE parser according to the VUE project framework to obtain the resource information of the main application and each micro-application of the original VUE project code project and perform resource integration; Package each micro-application into a component package named after the project according to a preset merging strategy, and form a first update configuration file of the VUE engineering code update project; According to a preset merging strategy, the resource information of each micro-application is generated into a first keyword identifier according to at least one of module type, source, isolation strategy and merging mode; According to the keyword identifier, performing project conversion by a VUE converter to generate and store a VUE engineering code update project further includes: Creating a second project file of the VUE project code update project through a VUE converter, wherein the second project file includes a plurality of folders; Retrieve the first keyword identifier through the VUE converter and obtain the first dependency attribution information of the VUE engineering code update project, merge and remove duplicates according to the first dependency attribution information, the main application and the resource information of each micro-application to generate a resource file of the VUE engineering code update project and store it in the corresponding folder in the second engineering file; Generate the configuration items of the VUE engineering code update project according to the first update configuration file through the VUE converter and store them in the corresponding folder of the second engineering file; According to the original VUE engineering code project, other files of the VUE engineering code update project are generated by a VUE converter and stored in corresponding folders in the second engineering file.

9. A project change device based on a VUE engineering code project, characterized in that: The system comprises a VUE compiler, a VUE parser, a VUE converter and a controller, wherein the controller is configured to: Based on the original VUE project code project, an abstract syntax tree is formed according to the js object literal format by the VUE compiler, and the original VUE project code project includes a main application and at least one micro application; In response to a project change option set by a user, the abstract syntax tree is parsed and data processed by a VUE parser to generate a keyword identifier. In response to the project change option set by the user being a split option, the method further includes: According to the preset splitting strategy, the abstract syntax tree is parsed by the VUE parser according to the VUE project framework to obtain the resource information of the main application and each micro-application of the original VUE project code project and perform resource splitting; Generate multiple page exits named after the project name, the main application name or the corresponding micro-application name according to the preset splitting strategy, and form a second update configuration file of the VUE engineering code update project, wherein the second update configuration file includes the split first sub-update configuration file of the main application and the second sub-update configuration file of each micro-application; According to a preset splitting strategy, the resource information of each micro-application is used to generate a second keyword identifier according to at least one of module type, source, isolation strategy and splitting mode; According to the keyword identifier, performing project conversion by a VUE converter to generate and store a VUE engineering code update project further includes: Creating a third project file of the VUE project code update project through a VUE converter, wherein the third project file includes a plurality of folders; Retrieve the second keyword identifier through the VUE converter and obtain the second dependency attribution information of the VUE engineering code update project, split and add according to the second dependency attribution information, the main application and the resource information of each micro-application to generate a resource file of the VUE engineering code update project and store it in the corresponding folder in the third engineering file; Generate the configuration items of the VUE engineering code update project according to the second update configuration file through the VUE converter and store them in the corresponding folder of the third engineering file; According to the original VUE engineering code project, other files of the VUE engineering code update project are generated by a VUE converter and stored in corresponding folders in the third engineering file.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 4 is implemented; or When the program is executed by a processor, the method according to any one of claims 5 to 7 is implemented.

11. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the method according to any one of claims 1 to 4 is implemented; or When the processor executes the program, the method according to any one of claims 5 to 7 is implemented.

Citation Information

Patent Citations

  • Construction method of React Native offline package and storage medium

    CN110825385A

  • Method, device and equipment for executing dynamic codes on page and storage medium

    CN111045678A