Front-end online development method for realizing front-end compilation-free deployment

Abstract

The application discloses a front-end online development method for realizing front-end compilation-free deployment, and a user can directly complete development of front-end project requirements online without installing any development environment and tools. Moreover, through integrated generative AI technology, the application makes the development process of the front-end project more intuitive and efficient. The user can use the online development method to realize real-time viewing and editing of source code in a remote code repository and preview front-end effects after editing through simple operation, and thus the development link is simplified and the threshold and difficulty of front-end development are greatly reduced.

Description

Technical Field

[0001] The present invention relates to the field of software technology development, and in particular to a front-end online development method for realizing front-end compilation-free deployment. Background Art

[0002] Despite the emergence of numerous front-end technologies and tools in the software development field, some challenges remain. Most projects struggle to intuitively incorporate generative artificial intelligence (AI) technology into their development process. This often forces front-end developers to perform tedious manual compilation and deployment operations to preview their projects during project creation and iteration.

[0003] Furthermore, for users without a technical background, traditional front-end development methods can be complex and difficult to understand, with a high barrier to entry, as they require familiarity with a range of development environments and tools. With a deep understanding of this issue, we are committed to providing an innovative online front-end development method that allows users to complete front-end project development requirements directly online, without having to install any development environments or tools. Summary of the Invention

[0004] The present invention provides a front-end online development method that allows users to complete front-end project development requirements directly online without installing any development environment or tools. Furthermore, by integrating generative AI technology, the present invention makes the front-end project development process more intuitive and efficient. Through simple operations, users can utilize the online development method disclosed in the present invention to view and edit source code in a remote code repository in real time and preview the edited front-end effects, eliminating the need for tedious manual compilation and deployment of a development environment. This simplifies the development process and significantly reduces the threshold and difficulty of front-end development.

[0005] The technical solution adopted by the present invention is: a front-end online development method for front-end compilation-free deployment, including the following steps: S1, compiling and deploying a hot update plug-in, the hot update plug-in dynamically intercepts the resources that need to be loaded by the front-end project, and intelligently identifies the file directory of the resources; S2, after intercepting and identifying the resources required to be loaded for the current project, obtaining relevant code from the browser cache, server and / or remote code repository; S3, parsing the code online, obtaining relevant dependency information and extracting the corresponding dependency code, and then compiling, while also parsing and compiling the dependency code; after compilation is completed, loading it into the project.

[0006] As a further improvement of the present invention, it also includes identifying development permissions. If there is no development permission, the plug-in is disabled and the resource is loaded normally.

[0007] Webpack Loader is used to intercept resource loading and determine the user environment. Loader intercepts front-end project resource loading and monitors resource loading requests to determine whether a development authentication token exists in the current user environment. If a development authentication token exists, Loader utilizes QiankunJS micro-frontend technology to load the hot-update plugin SDK. Otherwise, it loads the front-end project normally and disables and hides the provided compilation-free deployment development interface.

[0008] As a further improvement of the present invention, the hot update plug-in includes a hot update Loader based on Webpack and a micro-front-end hot update plug-in SDK based on QiankunJS; the hot update Loader based on Webpack realizes the installation of compilation-free deployment of the front-end project, and provides underlying code support for the micro-front-end hot update plug-in SDK based on QiankunJS.

[0009] The Hot Update Plugin consists of two parts: the Hot Update Loader and the Hot Update Plugin SDK. Leveraging Webpack Loader technology, developers only need to configure the webpack configuration file to easily integrate it into most existing front-end projects, enabling one-click installation and use, improving usability and scalability. Front-end projects utilize Webpack's modular packaging mechanism. The Hot Update Plugin SDK automatically retrieves key information such as the current project's Git name, ID, branch information, and the file's LastCommitID during the compilation phase. This information is stored in the compiled code resources after construction for subsequent use and management.

[0010] As a further improvement of the present invention, the QiankunJS-based micro-frontend hot update plug-in SDK is dynamically loaded through an isolated environment in a micro-frontend manner through QiankunJS.

[0011] SDK plug-ins are dynamically loaded in an isolated environment through QiankunJS in a micro-frontend manner, which will not affect the operation and style of the original project. Therefore, for all projects that have installed Webpack's hot update Loader, there is no need to make any changes to the subsequent front-end projects. Developers only need to continuously optimize the SDK operation interface and the SDK plug-in itself to synchronize new functions and changes to all projects that have installed the invented hot update Loader front-end. In addition, because Webpack's hot update Loader records most of the basic information of the project during the build and compilation phase, front-end project developers can also customize different plug-in interfaces and functions according to different types of front-end projects.

[0012] As a further improvement of the present invention, the micro-frontend hot update plug-in SDK identifies the loaded resource path, obtains user information through the development authentication TOKEN, requests the source code of the browser cache, server and / or remote code repository, and realizes online parsing and compilation of code through code parsing technology; according to the parsing results, continues to load the source code on which the code depends for parsing and compiling.

[0013] As a further improvement of the present invention, the micro-frontend hot update plug-in SDK includes at least two versions: one for professional development users and the other for non-technical development users.

[0014] As a further improvement of the present invention, the version for non-technical development users includes a simple guided development configuration form and a generative AI interface.

[0015] As a further improvement of the present invention, the version for professional development users includes the Monaco Editor code editor and the modular code topology editor.

[0016] As a further improvement of the present invention, the micro-frontend hot update plug-in SDK includes a version management module, which saves the modified code to the browser IndexDB cache and / or server. When the user completes the development and debugging of the function, the code is pushed and saved to the remote code repository through the authentication TOKEN.

[0017] As a further improvement of the present invention, the code parsing technology includes Babel Standalone, Sass, and compiler Vue technology.

[0018] The present invention has the following beneficial effects: 1) By installing, compiling, and deploying a hot-update plug-in into a front-end project and using the plug-in to intercept and identify front-end projects, this method enables compilation-free deployment of front-end projects. 2) The visual code editing interface and real-time preview function provided by this invention enable users to intuitively edit and debug code and instantly view edit results. 3) Users can also push edit results to a remote code repository, enabling online code storage and management.

[0019] This invention not only achieves the goal of front-end compilation-free deployment, but also lowers the development threshold and difficulty, simplifies the development chain, and creates basic conditions for a closer integration of other efficiency-enhancing technical solutions such as generative AI technology with front-end development. It not only greatly facilitates professional developers to use auxiliary technologies such as AI in the front-end field, but also provides the necessary basic conditions for non-technical personnel to participate in most front-end demand development with a low threshold. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 It is a schematic diagram of the present invention.

[0021] Figure 2 This is a flowchart of Example 1 of the present invention

[0022] Figure 3 This is a schematic diagram of the installation and use structure of Example 1 of the present invention.

[0023] Figure 4 It is a structural diagram of implementing resource interception, source code acquisition and caching in embodiment 1 of the present invention.

[0024] Figure 5 It is a structural diagram of code version switching, management, and online visual operation interface code modification in embodiment 1 of the present invention. DETAILED DESCRIPTION

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

[0026] The hot update plugin SDK is the core of the entire method, which includes the following main core functions:

[0027] 1. Code loading, parsing, compiling, and running: The SDK is responsible for identifying the resource path to be loaded, obtaining user information through the development authentication token, requesting the source code from the remote code repository, and implementing online parsing and compilation of the code using technologies such as Babel Standalone, Sass, and the Compiler. Based on the parsing results, it then proceeds to load, parse, and compile the source code that the code depends on.

[0028] 2. Project File Cache Management: The SDK features powerful cache management, enabling efficient storage and management of code resources. It stores source and compiled code in the local IndexDB browser cache based on the project's Git name, ID, branch information, and the file's latest commit ID. This improves code loading speed and reduces the load on remote servers. When accessing the same resource later, the SDK prioritizes accessing data from the cache, improving app performance and responsiveness, enhancing the development experience, and enhancing preview quality.

[0029] 3. Code Editing and Viewing Interface: Provides a code editing and viewing interface based on Monaco Editor for professional developers to review, modify, and compare code. Modified code can be stored in the browser's IndexDB browser cache or on a remote server and can be directly submitted to a remote code repository.

[0030] 4. Real-time Preview: The SDK has a real-time preview function. After users modify the code, they can immediately see the effect of the modification on the preview interface. The preview interface is synchronized with the editing interface in real time, allowing users to adjust the code and preview the results of the code changes in real time.

[0031] 5. Graphical operation interface: Provide a set of graphical operation interface, for professional developers and non-technical personnel. Users do not need to understand the details of the code, you can configure and modify the running code source through the interface, real-time preview. The operation interface supports drag-and-drop layout, component library selection, style adjustment and other functions, to meet the different needs of professional developers and non-technical personnel.

[0032] 6. Generated AI interaction interface: Users can modify the source code behind the current front-end interface through natural language with generated AI, making it easier for users to customize and adjust the interface. It provides a more intuitive development method for non-technical users without modifying the code.

[0033] 7. Version switching management function: The SDK provides a set of version switching function management functions, users can preview the front-end interface of different code versions. This allows developers to easily switch between different versions and compare differences, while also facilitating parallel development and collaboration for multiple needs. It also allows users to save modified results, track code modification history, and roll back to any previous version code with one key. Ensuring the stability and maintainability of the project.

[0034] Embodiment 1, a front-end online development method for front-end compilation-free deployment, comprising the following steps:

[0035] S1, compile and deploy hot update plug-in, the hot update plug-in dynamically intercepts the resources required to be loaded by the front-end project, and intelligently identifies the file directory of the resources; The hot update plug-in includes a Webpack-based hot update Loader and a QiankunJS-based micro-front-end hot update plug-in SDK;

[0036] The front-end project is installed with the hot update plug-in, and after installation and execution of the build compilation, it is deployed to the online environment.

[0037] It should be noted that in the embodiment, the front-end project needs to be based on the webpack technology stack, but this front-end compilation-free deployment development method is also applicable to front-end projects using other technology stacks such as rollup, vite, etc. However, this compilation-free deployment development method is only applicable to front-end projects that meet the JS ES6 specification and above.

[0038] The implementation in this embodiment is mainly based on two key modules: by using the hot update Loader based on Webpack and the micro-front-end hot update plug-in SDK based on QiankunJS. The hot update Loader module based on Webpack is very simple and lightweight, which plays a great role in the ease of use and expandability of the invention. Most front-end projects can be quickly installed and upgraded by using the Loader module to use the invention, and the hot update Loader of Webpack is the second key module, which provides support at the underlying code level. The micro-front-end hot update plug-in SDK based on QiankunJS realizes most of the functions of front-end compilation-free deployment, such as Figure 3 Under the joint action of the two key modules, the overall installation and use process of the invention is simplified, which is suitable for use in most front-end projects and improves the application and development efficiency of projects among teams.

[0039] The hot update Loader based on Webpack. The role of this Loader is to realize the compilation-free deployment installation of the front-end project. Its implementation principle mainly includes the following steps:

[0040] The front-end project loads and references the Webpack hot update Loader to realize the installation of the front-end compilation-free deployment method. This enables the project to install and use the invention without any code modification.

[0041] The Loader plays a key role in the compilation and running stages.

[0042] In the project compilation stage, as shown in Figure 3 The Loader also acquires and stores detailed project information, including technology stack, dependencies, etc., through Git in the project build and compilation stage. At the same time, it also records Git-related information, such as project name, ID, branch information, and the latest Commit ID, current version information, Commit information, etc., so that subsequent communication with the remote code repository and server can be realized to obtain resource and version file information, etc. to realize the compilation-free deployment hot update function.

[0043] After compilation, the compiled code is deployed online, i.e., the S1 stage shown in Figure 2 is completed.

[0044] S2, when the front-end project is running, it identifies whether the current access user has development rights. If there is no development right, the plug-in is disabled and the resource is normally loaded. The user development right needs to be authorized by logging in through a third-party permission platform first. If there is a right, the next step is entered.

[0045] When a user accesses the front-end project, he / she enters Figure 2 In the S2 running phase shown, the first function of Loader is to Figure 3 As shown, it will first determine whether the current user environment has a development authentication TOKEN. If a development authentication TOKEN exists, the Loader will remotely load the second key module and load the hot update plug-in SDK based on the QiankunJS micro-front-end technology. If a development authentication TOKEN does not exist, the front-end project will be loaded normally, and no plug-in SDK will be loaded. This means that the relevant compilation-free deployment development interface provided by the plug-in SDK of the present invention and the execution of the related compilation-free deployment code will not be displayed. Users can log in to a third-party authentication platform to obtain a development authentication TOKEN to enable the hot update plug-in SDK of the project, thereby experiencing the interface and functions of the compilation-free deployment method.

[0046] S3 identifies and intercepts the resources required to load the current project, pulls the running resource code from the remote code repository through login authorization, and caches the code in the current local environment;

[0047] After passing the development authentication, you will enter Figure 2 In the S3 running phase shown, the second function of the Loader is to intercept JS resource loading methods such as require and import when running at the JS code level, thereby realizing the interception function of resource loading. Figure 4 As shown, in this way, all resource requests during the project running phase will be captured by the Loader, so that all resource loading requests in the project will be intercepted, scheduled, and further processed by the hot update plug-in SDK based on QiankunJS micro-frontend technology.

[0048] S4: parse, compile, and run the code online, return the parsed running product, and continue loading the project;

[0049] A hot update plugin SDK based on QiankunJS micro-frontend technology. This hot update plugin SDK mainly plays the following functions in the compilation-free deployment method.

[0050] 1. Intercept resource loading function, such as Figure 2 In the S4 process shown in the figure, the hot update plug-in SDK analyzes the resource requests intercepted by WebpackLoader, as shown in the following example: Figure 4As shown, the hot update plugin SDK determines whether the loaded resource is the project's source code and its source code path. If it is third-party source code (library, framework, etc.), the compiled third-party resource file is loaded directly from the online server. If it is the source code of a front-end project, the hot update plugin SDK uses the authentication token to obtain the source code file for the resource in the development version of the current project from the remote code repository or server or IndexDB browser cache. It is important to note that the plugin SDK loads the development version of the source code by default the first time. However, you can subsequently switch to different code versions using the version management interface provided by the hot update plugin SDK to obtain source code files from different branches of the currently loaded resource.

[0051] 2. Resource caching, compilation and running functions. There are three ways to obtain remote resource files: remote code repository source code, server code, and local IndexDB browser cache. When loading a branch version of a resource file, in order to reduce the pressure on the source code repository server and improve the front-end project operation and rendering performance, user experience, etc., the resource source code file and other information will be obtained from the local IndexDB browser cache and server first. When loading a resource file, such as Figure 4 As shown, the latest modification record of the current version and the latest code file list information loaded in the code repository will be obtained from the server first, and compared and merged with the current cache of the browser. The latest source code file will be used, and the lastCommitId of the current version file and the code modification time will be used to judge. When the IndexDB browser cache has the current code file cache or the latest modified code file, the resource file cached by the IndexDB browser will be used first. If the browser does not have the resource cache but the server does, the server cached resource will be used. If the browser and the server do not have the latest resource code currently loaded in the cache, it will be judged whether the source code version of the remote code repository under the current project version is consistent with the compiled code version. If they are consistent, the server-built compiled code file will be used directly. The judgment principle is as follows: the hot update Loader saves the lastCommitId of the currently compiled resource source code and the latest lastCommitId obtained by the SDK from the remote code repository. If they are the same, it means that the compiled resource is the same as the latest code resource, and the compiled code and saved source code can be used directly. If they are not the same, such as Figure 4As shown, the latest source code files are obtained from the remote code repository, and the source code files are parsed and compiled into compiled code that can be directly run by the browser through the online compilation technology provided by the hot update plug-in SDK. During the source code file parsing and compilation process, it will analyze whether the current file depends on other resource files. If there are other dependent source codes, the loading process of the resource will be intercepted again, and the file information of the dependent resource will be obtained from the cache, server, and code repository, and its compiled code will be obtained and run. It should be noted that, if Figure 4 As shown, both the IndexDB browser cache and the server cache will save the source code and compiled code of the file. When using the cache, you can directly use the cache and its dependent cache resources, and directly run the cached compiled code file without secondary compilation, so as to improve the rendering, running performance and user experience of the front-end project. Parsing and compilation are only performed after obtaining the source code through the code repository or modifying the source code online. After parsing and compilation, the code information, source code, and compiled code will be cached in the IndexDB browser. When the user manually modifies the code through the operation interface of the plug-in SDK, the currently modified resource file information, source code, and compiled code will be saved to the IndexDB browser cache and server cache, so that it can be loaded and used by other local and online devices and users.

[0052] S5, users can view, edit, and quickly modify the code through the visual operation interface online and re-execute online compilation, run, modify, and debug the current project interface.

[0053] SDK plug-in operation interface, such as Figure 2 In the S5 process shown, the SDK plug-in provides an entry and operation interface to the user. Through the various operation interfaces provided by the SDK plug-in, users can view, edit, modify and debug the current front-end project code. With the combined effect of the online compilation technology and resource interception technology provided by the SDK, the front-end project interface can be refreshed in real time on demand. After editing the resource source code, the interface can be refreshed to show the results after running the edited code, thereby realizing the hot update code development and debugging function. It should be noted that the plug-in interface provided by the hot update is implemented through the QiankunJS micro-front-end technology. Due to the environmental isolation technology of the micro-front-end technology, the operation interface and plug-in SDK will not affect the operation of the front-end project itself.

[0054] The operation interface for professional development users is a professional code visualization code development configuration operation interface. This interface consists of the Monaco Editor code editor and the modular code topology editor. The modular code topology editor in this operation interface uses online code parsing technology to convert code module information into a visual code topology diagram. Developers can quickly sort out and understand the code module structure through the code topology diagram, and can click on the topology diagram to have a deeper understanding and modify the information and configuration of the internal code module, so as to quickly modify the development code online visually. Developers can use the Monaco Editor code editor to view code modification results, modify source code, and all changed files in the current version. Figure 5 As shown in the figure, through this operation interface, users can quickly understand the module relationship and modify and debug the code in a visual way. After modifying the code, the SDK plug-in can be used to achieve real-time preview to check whether the code changes meet expectations.

[0055] In S6, users can switch between different versions online, push the code modification results to the front-end project through a visual interface, and update the front-end project version.

[0056] like Figure 2 In the S6 process shown, through the online code editing and modification function provided by the SDK through the above operation interface, the user can edit or generate the source code online and save the modified code to the browser IndexDB cache and server through the version management function of the SDK plug-in. When the user completes the development and debugging of the function, the code can be pushed and saved to the remote code repository through the authentication TOKEN. Figure 5 As shown, users can use the version management function to add or switch different version branches to obtain, modify, and view the running effects of the front-end project under different versions, and save the code changes and generated code to the corresponding version, so that other users can also switch to this version to view the running effects of the version in real time and continue to develop and modify based on this to complete the development of front-end project requirements.

[0057] Example 2: Compared to Example 1, this example uses a visual interface of generative AI to directly interact with code, developing and saving front-end project code in different branch environments in real time, significantly improving the efficiency and flexibility of front-end development. This interface is designed for non-technical users and is a simplified development interface. This interface consists of two parts: a simple guided development configuration form and a generative AI interface. Users can complete routine front-end page development using a simple guided configuration form and, in conjunction with generative AI, customize specific page requirements in a question-and-answer format. The underlying principle is that front-end project developers can customize a simplified guided configuration form for common front-end project requirements through a custom plug-in interface. Non-technical users can then generate the initial required code with simple configuration. The plug-in SDK then parses and compiles the code online, allowing for real-time preview of the generated code. Furthermore, non-technical users can submit customized requirements to the AI ​​through generative AI. The SDK plug-in will then submit the currently generated, existing source code as question context along with the user's question to the AI ​​for processing. The AI ​​then responds with generated source code, which is also parsed and compiled online by the SDK plug-in for real-time preview.

[0058] Example 3, compared to Example 1, uses the version management function provided by the hot update plug-in to add and switch different versions, achieve one-click preview of different versions of the front-end project, and save the online code modifications of different versions of the project. This ensures the efficiency and quality of demand development.

[0059] This invention provides an innovative online front-end development method that allows users to complete front-end project development requirements directly online, without having to install any development environment or tools. Furthermore, by integrating generative AI technology, our invention makes the front-end project development process more intuitive and efficient. With our online development method, users can easily view and edit source code in a remote code repository in real time and preview the edited front-end results. This eliminates the need for tedious manual compilation and deployment, and the development environment itself. This simplifies the development process and significantly reduces the barrier to entry and difficulty of front-end development.

[0060] Those skilled in the art should know that the protection scheme of the present invention is not limited to the above-mentioned embodiments, and various arrangements, combinations and transformations can be made on the basis of the above-mentioned embodiments. Without violating the spirit of the present invention, various transformations of the present invention fall within the protection scope of the present invention.

Claims

1. A front-end online development method that implements front-end compilation-free deployment is characterized by The steps include: S1, compile and deploy the hot update plug-in, which dynamically intercepts the resources that need to be loaded by the front-end project and intelligently identifies the file directory of the resources; the hot update plug-in includes a Webpack-based hot update loader and a micro-front-end hot update plug-in SDK based on QiankunJS; the Webpack-based hot update loader implements the installation of the front-end project without compilation deployment and provides underlying code support for the micro-front-end hot update plug-in SDK based on QiankunJS; the micro-front-end hot update plug-in SDK based on QiankunJS is dynamically loaded through QiankunJS in an isolated environment in a micro-front-end manner; The micro-frontend hot update plug-in SDK identifies the loaded resource path, obtains user information through the development authentication token, requests the source code from the browser cache, server and / or remote code repository, and implements online parsing and compilation of the code through code parsing technology; based on the parsing results, continues to load the source code that the parsed and compiled code depends on; S2 intercepts and identifies the resources required for loading the current project, and then obtains the relevant code from the browser cache, server, and / or remote code repository; S3 parses the code online, obtains relevant dependency information, extracts the corresponding dependent code, and then compiles it. It also parses and compiles the dependent code. After compilation is complete, load it into the project; S4, the hot update plug-in SDK analyzes the resource request intercepted by WebpackLoader to determine whether the loaded resource is the project's source code and its source code path. If it is a third-party source code, it directly loads the compiled third-party resource file from the online server; If it is the source code of the front-end project, the hot update plug-in SDK uses the authentication token to obtain the source code file of the resource in the development version of the current project from the remote code repository or server, or the IndexDB browser cache.

2. The front-end online development method for realizing front-end compilation-free deployment according to claim 1 is characterized in that It also includes identifying development permissions. If there is no development permission, the plugin is disabled and the resource is loaded normally.

3. The front-end online development method for realizing front-end compilation-free deployment according to claim 1 is characterized in that The micro-frontend hot update plug-in SDK includes at least two versions: one for professional development users and the other for non-technical development users.

4. The front-end online development method for realizing front-end compilation-free deployment according to claim 3 is characterized in that The version for non-technical development users includes a simple guided development configuration form and a generative AI interface.

5. The front-end online development method for realizing front-end compilation-free deployment according to claim 3 is characterized in that The version for professional development users includes the Monaco Editor code editor and the modular code topology editor.

6. The front-end online development method for realizing front-end compilation-free deployment according to claim 1 is characterized in that The micro-frontend hot update plug-in SDK includes a version management module, which saves the modified code to the browser IndexDB cache and / or server. When the user completes the development and debugging of the function, the code is pushed and saved to the remote code repository through the authentication TOKEN.

7. The front-end online development method for realizing front-end compilation-free deployment according to claim 1 is characterized in that The code parsing technology includes Babel Standalone, Sass, and compiler Vue technology.

Images