An implementation method and system of a front-end online compilation engine

Abstract

This invention provides a method and system for implementing a front-end online compilation engine, belonging to the technical field. The method includes: pre-writing an online front-end compilation service; generating a basic webpack loader and plugins based on the online front-end compilation service and according to the vue.config.js configuration; adding compilation entry points using page files and entry files generated by a low-code development platform, and adding other preset webpack plugins to generate the final configuration; instantiating a compiler object online through the above configuration, and providing an external calling interface for the compiler object to build the online compilation engine; generating compilation results by calling the compiler's packaging method; and inputting the compilation results into a specified directory to achieve online upgrades of the front-end project.

Description

Technical Field

[0001] This invention belongs to the field of computer system programming technology, and in particular relates to a method and system for implementing a front-end online compilation engine. Background Technology

[0002] The statements in this section are merely background information related to the present invention and do not necessarily constitute prior art.

[0003] The inventors discovered that currently, after a Vue front-end project is deployed to a server, adding new feature pages requires manually compiling the front-end project after the page is developed offline, and then uploading the compiled output (html, js, css, etc.) to the corresponding directory of the front-end service before the corresponding page can be accessed. In other words, launching new features requires offline development and packaging before online deployment, resulting in low development and deployment efficiency. Summary of the Invention

[0004] To address the aforementioned problems, this invention provides a method and system for implementing a front-end online compilation engine. This solution, through interface calls, enables online compilation and output of published pages, allowing for online preview of the generated page. Furthermore, the exception handling mechanism of the front-end compilation engine ensures that the publication of different pages does not interfere with each other, nor does it affect the normal display of other developed pages and business pages.

[0005] According to a first aspect of the present invention, a method for implementing a front-end online compilation engine is provided, comprising:

[0006] Pre-write an online front-end compilation service;

[0007] Based on the online front-end compilation service, a basic webpack loader and plugins are generated according to the vue.config.js configuration.

[0008] Add a compilation entry point to the page files and entry files generated by the low-code development platform, and add other preset webpack plugins to generate the final configuration;

[0009] The above configuration instantiates the compiler object online and provides the external calling interface of the compiler object to realize the construction of the online compilation engine;

[0010] The compilation result is generated by calling the compiler's packaging method;

[0011] The compilation results are input into a specified directory to enable online upgrades of the front-end project.

[0012] Furthermore, the compiler needs to be re-initialized each time it is compiled and released, so that the entry point in the compiler only contains the current page entry point.

[0013] Furthermore, the Vue framework of the front-end project adopts a multi-page framework to avoid the online-published pages from affecting other offline-published pages deployed in the project.

[0014] Furthermore, the pre-written online front-end compilation service specifically includes: using Express to build a Node service to provide API call services; using Webpack to create an interface for initializing the compiler object through API calls; and using Webpack to create an online compiler call and call status query interface for calling the online compilation service through API calls and returning the call results.

[0015] Furthermore, the addition of other preset webpack plugins to generate the final configuration specifically includes: using html-webpack-plugin to organize the construction and path generation of HTML files in the output; using singleEntryPlugin to organize the processing and output configuration of compiled files; using vue-loader, babel-loader, and thread-loader to process the compilation and output generation of Vue files in the project; using css-loader and sass-loader to process the compilation and output generation of CSS and SCSS files in the project; using copy-webpack-plugin to process the output generation of common dependencies in the project; and using dll-plugin to optimize compilation-related performance.

[0016] Furthermore, the compilation results include the HTML, JS, and CSS files of the front-end project to be compiled.

[0017] Furthermore, the online front-end compilation service is developed using the Node.js development environment.

[0018] According to a second aspect of the present invention, a system for implementing a front-end online compilation engine is provided, comprising:

[0019] A front-end compilation service writing unit, which is used to pre-write online front-end compilation services;

[0020] The Webpack loader and plugin generation unit is used to generate a basic Webpack loader and plugins based on the online front-end compilation service and the vue.config.js configuration.

[0021] The configuration unit is used to add compilation entry points to the page files and entry files generated by the low-code development platform, and add other preset webpack plugins to generate the final configuration;

[0022] An instantiation unit is used to instantiate a compiler object online through the above configuration and provide an external calling interface for the compiler object to build an online compilation engine;

[0023] A compilation unit, which generates compilation results by calling the compiler's packaging method;

[0024] The deployment unit is used to input the compilation results into a specified directory to enable online upgrades of the front-end project.

[0025] According to a third aspect of the present invention, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and running on the memory, wherein the processor executes the program to implement the aforementioned method for implementing a front-end online compilation engine.

[0026] According to a fourth aspect of the present invention, a non-transitory computer-readable storage medium is provided, on which a computer program is stored, which, when executed by a processor, implements the aforementioned method for implementing a front-end online compilation engine.

[0027] Compared with the prior art, the beneficial effects of the present invention are:

[0028] This invention provides a method and system for implementing a front-end online compilation engine. The solution enables the online compilation and output of pages generated by a low-code development platform when deployed online, through interface calls, allowing for online preview of the generated page effect. Simultaneously, the exception handling mechanism of the front-end compilation engine designed in this solution ensures that the publication of different pages does not affect each other, nor does it affect the normal display of other developed pages and business pages.

[0029] Advantages of additional aspects of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. Attached Figure Description

[0030] The accompanying drawings, which form part of this invention, are used to provide a further understanding of the invention. The illustrative embodiments of the invention and their descriptions are used to explain the invention and do not constitute an improper limitation of the invention.

[0031] Figure 1 This is a schematic diagram illustrating the current front-end project upgrade method described in this embodiment of the invention;

[0032] Figure 2This is a schematic diagram illustrating the front-end project upgrade method utilizing the front-end online compilation engine as described in this embodiment of the invention;

[0033] Figure 3 This is a flowchart illustrating the implementation method of a front-end online compilation engine as described in an embodiment of the present invention. Detailed Implementation

[0034] The present invention will be further described below with reference to the accompanying drawings and embodiments.

[0035] It should be noted that the following detailed description is illustrative and intended to provide further explanation of the invention. Unless otherwise specified, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention pertains.

[0036] It should be noted that the terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit the scope of exemplary embodiments according to the invention. As used herein, the singular form is intended to include the plural form as well, unless the context clearly indicates otherwise. Furthermore, it should be understood that when the terms "comprising" and / or "including" are used in this specification, they indicate the presence of features, steps, operations, devices, components, and / or combinations thereof.

[0037] Where there is no conflict, the embodiments and features in the embodiments of the present invention can be combined with each other.

[0038] Terminology Explanation:

[0039] Low-code development platform (LCDP): A development platform that allows users to quickly generate applications by writing a small amount of code through a visual editor.

[0040] Online environment: refers to the front-end service of a completed web application deployed using production environment deployment tools (such as nginx), and this front-end service is running and can be accessed and used by users. Environments that are shut down for maintenance or restarted are not considered online environments here.

[0041] Offline environment: This mainly refers to front-end services that are not deployed using production deployment tools, or services that are not running, as well as other situations outside of the online environment.

[0042] Example 1:

[0043] The purpose of this embodiment is to provide a method for implementing a front-end online compilation engine.

[0044] like Figure 3 As shown, an implementation method for a front-end online compilation engine includes:

[0045] Pre-write an online front-end compilation service;

[0046] Based on the online front-end compilation service, a basic webpack loader and plugins are generated according to the vue.config.js configuration.

[0047] Add a compilation entry point to the page files and entry files generated by the low-code development platform, and add other preset webpack plugins to generate the final configuration;

[0048] The above configuration instantiates the compiler object online and provides the external calling interface of the compiler object to realize the construction of the online compilation engine;

[0049] The compilation result is generated by calling the compiler's packaging method;

[0050] The compilation results are input into a specified directory to enable online upgrades of the front-end project.

[0051] Furthermore, the compiler needs to be re-initialized each time it is compiled and released, so that the entry point in the compiler only contains the current page entry point.

[0052] Furthermore, the Vue framework of the front-end project adopts a multi-page framework to avoid the online-published pages from affecting other offline-published pages deployed in the project.

[0053] Furthermore, the pre-written online front-end compilation service specifically includes: using Express to build a Node service to provide API call services; using Webpack to create an interface for initializing the compiler object through API calls; and using Webpack to create an online compiler call and call status query interface for calling the online compilation service through API calls and returning the call results.

[0054] Furthermore, the addition of other preset webpack plugins to generate the final configuration specifically includes: using html-webpack-plugin to organize the construction and path generation of HTML files in the output; using singleEntryPlugin to organize the processing and output configuration of compiled files; using vue-loader, babel-loader, and thread-loader to process the compilation and output generation of Vue files in the project; using css-loader and sass-loader to process the compilation and output generation of CSS and SCSS files in the project; using copy-webpack-plugin to process the output generation of common dependencies in the project; and using dll-plugin to optimize compilation-related performance.

[0055] Furthermore, the compilation results include the HTML, JS, and CSS files of the front-end project to be compiled.

[0056] Furthermore, the online front-end compilation service is developed using the Node.js development environment.

[0057] Specifically, for ease of understanding, the following detailed description of the solution in this embodiment is provided in conjunction with the accompanying drawings:

[0058] The main objective of the solution described in this embodiment is as follows:

[0059] (1) The low-code development platform deployed online can compile and preview the generated front-end code online through the front-end compilation engine.

[0060] (2) The exception handling of the front-end compilation engine must meet the following requirements: the pages published by the platform are isolated from each other, and the failure of publishing a certain page will not affect the normal access of other pages.

[0061] like Figure 1 As shown, the current upgrade method for front-end projects involves developing modules offline, compiling and deploying them online after development is complete, and only after all these steps are finished can the completed module be accessed online. This invention addresses the above problems by providing an implementation method based on a front-end compilation engine, the effect of which is as follows: Figure 2 As shown, the specific concept is to realize the online compilation and output of the page through the call of the interface, so that the developed module can be directly accessed online.

[0062] Specifically, the implementation of the front-end compilation engine is as follows: Since the compilation and packaging of current Vue projects is handled by the webpack bundling tool, during the webpack bundling process, the entry point is first configured through the Vue configuration file `vue.config.js`. Then, a series of necessary loaders and plugins for webpack compilation are configured, and a compiler is instantiated. By calling the compiler's bundling method, the dependencies of the entry point are parsed, a syntax tree is generated, and then the front-end code is converted into ES5 syntax that the browser can execute using the aforementioned loaders and plugins. Finally, the code is output to the artifact directory `dist`. The implementation of the front-end compilation engine is as follows: Figure 2As shown, an online front-end compilation service written in Node.js generates a basic Webpack loader and plugins based on the configuration in vue.config.js. Then, it adds a compilation entry point based on the page file demo.vue and the entry file demo.js generated by the low-code development platform. Finally, it adds other necessary Webpack plugins to generate the final configuration. Based on this configuration, a compiler object is instantiated online. Then, the compiler's bundling method is manually triggered through an API call. At the same time, the compiler's output (html, js, css, etc. files) is output to a specified directory through configuration.

[0063] Front-end compilation engine exception handling: Considering the compilation of Vue single-page applications, if a page fails to compile, the incorrect compilation result will prevent the entire project from starting. Therefore, the front-end compilation engine must ensure that the entry points of previous pages do not affect the current compilation. That is, the compiler needs to be re-initialized with each release, so that the entry points in the compiler only contain the current entry. This initialization mainly refers to the operations in the compiler's creation interface, specifically including:

[0064] (1) Creating using the webpack abstract compiler;

[0065] (2) Use webpack-related plugins to configure the new compiled objects. For details on the plugins involved, please refer to the webpack final plugin configuration instructions above.

[0066] At the same time, the online front-end Vue framework needs to be adjusted to a multi-page framework to ensure that the online pages will not affect other offline pages deployed in the project.

[0067] Example 2:

[0068] The purpose of this embodiment is to provide an implementation system for a front-end online compilation engine.

[0069] An implementation system for a front-end online compilation engine, comprising:

[0070] A front-end compilation service writing unit, which is used to pre-write online front-end compilation services;

[0071] The Webpack loader and plugin generation unit is used to generate a basic Webpack loader and plugins based on the online front-end compilation service and the vue.config.js configuration.

[0072] The configuration unit is used to add compilation entry points to the page files and entry files generated by the low-code development platform, and add other preset webpack plugins to generate the final configuration;

[0073] An instantiation unit is used to instantiate a compiler object online through the above configuration and provide an external calling interface for the compiler object to build an online compilation engine;

[0074] A compilation unit, which generates compilation results by calling the compiler's packaging method;

[0075] The deployment unit is used to input the compilation results into a specified directory to enable online upgrades of the front-end project.

[0076] Furthermore, the system described in this embodiment corresponds to the method described in Embodiment 1, and its technical details have been described in detail in Embodiment 1, so they will not be repeated here.

[0077] In further embodiments, the following is also provided:

[0078] An electronic device includes a memory and a processor, as well as computer instructions stored in the memory and running on the processor. When executed by the processor, the computer instructions perform the method described in Embodiment 1. For brevity, further details are omitted here.

[0079] It should be understood that in this embodiment, the processor can be a central processing unit (CPU), or it can be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or any conventional processor, etc.

[0080] Memory may include read-only memory and random access memory, and provides instructions and data to the processor. A portion of memory may also include non-volatile random access memory. For example, memory may also store information about the device type.

[0081] A computer-readable storage medium for storing computer instructions, which, when executed by a processor, perform the method described in Embodiment 1.

[0082] The method in Embodiment 1 can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules within the processor. The software modules can reside in readily available storage media in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or registers. This storage medium is located in memory; the processor reads information from the memory and, in conjunction with its hardware, completes the steps of the above method. To avoid repetition, a detailed description is not provided here.

[0083] Those skilled in the art will recognize that the units, i.e., algorithm steps, of the various examples described in connection with this embodiment can be implemented in electronic hardware or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this invention.

[0084] The above embodiments provide a method and system for implementing a front-end online compilation engine, which has broad application prospects.

[0085] The above description is merely a preferred embodiment of the present invention and is not intended to limit the invention. Various modifications and variations can be made to the present invention by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method of implementing a front-end on-line compilation engine, characterized by, Comprise: Pre-write online front-end compilation service, specifically: using express to build node service, used to provide interface calling service; using webpack abstract online compiler to create interface, used to realize the initialization of compiler object through interface calling; using webpack abstract online compiler calling and calling condition query interface, used to realize the calling of online compilation service through interface calling and return calling result; Based on the online front-end compilation service, generate basic webpack loader and plug-in according to vue.config.js configuration; Add compilation entry to the page file and entry file generated by the low-code development platform, and add other preset webpack plug-ins to generate the final configuration; Through the above configuration, the compiler compiler object is instantiated online, and the external calling interface of the compiler object is provided to realize the construction of online compilation engine; wherein, the compiler needs to be reinitialized every time it is compiled and published, so that the entry in the compiler only contains the current page entry; By calling the packaging method of the compiler, the compilation result is generated; Input the compilation result into the specified directory to realize the online upgrade of the front-end project.

2. The method of claim 1, wherein the method further comprises: The vue framework of the front-end project adopts a multi-page framework to avoid the influence of online published pages on other non-online published pages of the project deployment.

3. The implementation method of a front-end online compilation engine as described in claim 1, characterized in that, The final configuration generated by adding other preset webpack plug-ins is as follows: using html-webpack-plugin to organize the construction and path generation of html files in the product; using singleEntryPlugin to organize the processing and output configuration of the compiled files; using vue-loader, babel-loader and thread-loader to process the compilation and product generation of vue files in the project; using css-loader and sass-loader to process the compilation and product generation of css and scss files in the project; using copy-webpack-plugin to process the product generation of public dependencies in the project; using dll-plugin to optimize the use performance of compilation related.

4. The implementation method of a front-end online compilation engine as described in claim 1, characterized in that, The compilation result includes html, js and css files of the front-end project to be compiled.

5. The implementation method of a front-end online compilation engine as described in claim 1, characterized in that, The online front-end compilation service is written in node development environment.

6. A system for implementing a front-end on-line compilation engine, comprising: Comprise: The front-end compilation service writing unit is used to pre-write online front-end compilation service, specifically: using express to build node service, used to provide interface calling service; using webpack abstract online compiler to create interface, used to realize the initialization of compiler object through interface calling; using webpack abstract online compiler calling and calling condition query interface, used to realize the calling of online compilation service through interface calling and return calling result; The Webpack loader and plugin generation unit is configured to generate a basic webpack loader and plugin according to a vue.config.js configuration based on the online front-end compilation service; The configuration unit is configured to add a compilation entry by using a page file and an entry file generated by a low-code development platform, and add other preset webpack plugins to generate a final configuration; The instantiation unit is configured to instantiate a compiler object online through the configuration, provide an external calling interface of the compiler object, and implement construction of an online compilation engine; the compiler needs to be reinitialized every time the compiler is compiled and released, so that the entry in the compiler only contains a current page entry; The compilation unit is configured to generate a compilation result by calling a packaging method of the compiler; The deployment unit is configured to input the compilation result into a specified directory to implement online upgrading of a front-end project.

7. An electronic device comprising a memory, a processor, and a computer program stored on the memory to run on the processor, characterized in that, The processor executes the program to implement the front-end online compilation engine implementation method of any one of claims 1-5.

8. A non-transitory computer-readable storage medium having stored thereon a computer program, characterized in that, The program is executed by the processor to implement the front-end online compilation engine implementation method of any one of claims 1-5.

Images