Front-end module automatic updating method, device and equipment and storage medium thereof
By launching a file monitoring component in the front-end page development environment, the changes in the target configuration file are monitored, module name information is obtained, the modular mapping file is updated, and the HTML page is compiled. This solves the problems of complex manual operation and resource waste in the existing technology, realizes intelligent module update and compilation control, and improves development efficiency and resource utilization.
Patent Information
- Application Number
- CN202510724252.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-05-30
- Publication Date
- 2025-10-21
AI Technical Summary
Existing methods for controlling front-end module updates and compilation suffer from problems such as complex manual operations, poor targeting, and serious resource waste. In particular, compilation efficiency is low in multi-module Vue projects, resulting in poor development experience and efficiency.
By starting the file monitoring component in the front-end page development environment, monitoring the changes of the target configuration file, determining whether the configuration information has changed, obtaining the module name information, updating the modular mapping file, and triggering the compilation of the target HTML page file, automatic updates are achieved.
It enables intelligent updates when front-end module configuration information changes, avoiding overall loading, reducing compilation time and resource consumption, and improving development efficiency and resource utilization.
Smart Images

Figure CN120821486A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of R&D and design technology, and can be applied to multi-page functional service APPs or mini-programs developed specifically for customers in financial or medical businesses. It involves a front-end module automatic update method, device, equipment and storage medium thereof. Background Art
[0002] Currently, front-end development, especially when building multi-module Vue projects, often faces the problem of low compilation efficiency. Traditional solutions usually achieve on-demand building by manually specifying the modules that need to be compiled.
[0003] However, with this construction method, developers need to manually maintain a list of modules to be compiled, which leads to high complexity in manual operations. Moreover, manual maintenance of the module list is inefficient and prone to omissions or incorrect module selection, resulting in some modules not being compiled or unnecessary modules being compiled, which greatly affects the development experience and efficiency. In addition, in traditional solutions, the module compilation list is usually fixed when the development environment is started, and subsequent file modifications cannot dynamically affect the compilation list. That is, when the front-end configuration file changes, it cannot respond to the file changes in a timely and dynamic manner, resulting in the need for optimization and updates later. Therefore, the existing front-end module update and compilation control methods have the problems of complex manual operations, poor pertinence, and serious waste of resources. Summary of the Invention
[0004] The purpose of the embodiments of the present application is to propose a front-end module automatic update method, device, equipment and storage medium thereof to solve the problems of existing front-end module update and compilation control methods such as complex manual operation, poor targeting and serious waste of resources.
[0005] In a first aspect, an embodiment of the present application provides a method for automatically updating a front-end module, which adopts the following technical solution:
[0006] A front-end module automatic updating method comprises the following steps:
[0007] In the front-end page development environment, start a preset file monitoring component, wherein the preset file monitoring component is used to monitor changes in configuration information in a target configuration file. The target configuration file records configuration information corresponding to all front-end modules involved in page construction, and the configuration information includes routing information, component information, and state management information.
[0008] Based on the file monitoring component, determine whether there is any change in the configuration information corresponding to all the front-end modules in the target configuration file;
[0009] If there is no change in the configuration information corresponding to all front-end modules in the target configuration file, continue to use the file monitoring component to monitor the configuration information changes of the target configuration file;
[0010] If the configuration information corresponding to at least one front-end module in the target configuration file has changed, then obtaining the module name information of the front-end module, and continuing to use the file monitoring component to monitor the configuration information changes of the target configuration file;
[0011] According to the module name information of the front-end module, the modular mapping file corresponding to the target configuration file is updated, wherein the modular mapping file is used to map the configuration information corresponding to the front-end module to the target HTML page file;
[0012] After the modular mapping file is updated, the compilation of the target HTML page file is triggered, and the corresponding compilation result is loaded to the target page address to complete the automatic update of the front-end module, wherein the target page address includes the front-end interface address.
[0013] In a second aspect, the present application also provides a front-end module automatic update device, which adopts the following technical solution:
[0014] A front-end module automatic updating device, comprising:
[0015] A monitoring component startup module is used to start a preset file monitoring component in the front-end page development environment, wherein the preset file monitoring component is used to monitor changes in configuration information in a target configuration file. The target configuration file records the configuration information corresponding to all front-end modules involved in page construction, and the configuration information includes routing information, component information, and state management information;
[0016] A configuration information change judgment module is used to judge whether there is any change in the configuration information corresponding to all the front-end modules in the target configuration file based on the file monitoring component;
[0017] The first branch module is configured to continue to use the file monitoring component to monitor configuration information changes of the target configuration file if there is no change in the configuration information corresponding to all front-end modules in the target configuration file;
[0018] The second branch module is configured to obtain the module name information of the front-end module if the configuration information corresponding to at least one front-end module in the target configuration file changes, and continue to use the file monitoring component to monitor the configuration information changes of the target configuration file;
[0019] A modular mapping file updating module, configured to update the modular mapping file corresponding to the target configuration file according to the module name information of the front-end module, wherein the modular mapping file is used to map the configuration information corresponding to the front-end module to the target HTML page file;
[0020] The compilation and loading module is used to trigger the compilation of the target HTML page file after the modular mapping file is updated, and load the corresponding compilation result to the target page address to complete the automatic update of the front-end module, wherein the target page address includes the front-end interface address.
[0021] In a third aspect, an embodiment of the present application further provides a computer device that adopts the following technical solution:
[0022] A computer device includes a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the above-mentioned front-end module automatic update method when executing the computer-readable instructions.
[0023] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solution:
[0024] A computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the above-mentioned method for automatically updating a front-end module.
[0025] Compared with the prior art, the embodiments of the present application have the following beneficial effects:
[0026] The front-end module automatic update method described in the embodiment of the present application is to start a preset file monitoring component in the front-end page development environment; determine whether there is a change in the configuration information corresponding to all front-end modules in the target configuration file; if the configuration information corresponding to at least one front-end module in the target configuration file has changed, obtain the module name information of the front-end module; update the modular mapping file corresponding to the target configuration file according to the module name information; after the modular mapping file is updated, trigger the compilation of the target HTML page file, and load the corresponding compilation result to the target page address to complete the automatic update of the front-end module. By utilizing the file monitoring component, the modular mapping file and the automated processing method, it is possible to achieve targeted automatic update of the target front-end module when the configuration information corresponding to the front-end module changes, avoiding the need to load all front-end modules as a whole every time, realizing intelligent control of the compilation process and on-demand compilation and loading based on module changes, effectively reducing compilation time and update resource consumption. The front-end module automatic update method can be applied to the multi-functional module business service APP or applet developed specifically for customers in the financial business or medical business. By implanting the front-end module automatic update method when developing pages in the multi-functional module business service APP, not only can the page be updated in time during development, but also after the APP is launched, when a page adjustment or update occurs in a certain service module in the multi-functional module business service APP, the target front-end module can be updated in a targeted manner according to the update instructions of the server, avoiding the re-update of all front-end modules at one time and saving update resources. BRIEF DESCRIPTION OF THE DRAWINGS
[0027] In order to more clearly illustrate the solutions in this application, a brief introduction will be given below to the drawings required for use in the description of the embodiments of this application. Obviously, the drawings described below are some embodiments of this application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.
[0028] Figure 1 is an exemplary system architecture diagram to which the present application may be applied;
[0029] Figure 2 is a flowchart of an embodiment of a front-end module automatic updating method according to the present application;
[0030] Figure 3 This is a flowchart of a specific embodiment of file monitoring preparation in the front-end module automatic update method described in this application;
[0031] Figure 4 yes Figure 2A flowchart of a specific embodiment of step 202 is shown;
[0032] Figure 5 yes Figure 2 A flowchart of a specific embodiment of step 206 is shown;
[0033] Figure 6 This is a structural diagram of an embodiment of a front-end module automatic updating device according to the present application;
[0034] Figure 7 It is a structural diagram of an embodiment of a computer device according to the present application. DETAILED DESCRIPTION
[0035] Unless otherwise defined, all technical and scientific terms used herein have the same meanings as commonly understood by those skilled in the art to which this application belongs. The terms used in the specification of the application are for the purpose of describing specific embodiments only and are not intended to limit this application. The terms "including" and "having" and any variations thereof in the specification and claims of this application and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of this application or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.
[0036] References herein to "embodiments" mean that a particular feature, structure, or characteristic described in connection with the embodiments may be included in at least one embodiment of the present application. The appearance of this phrase in various places in the specification does not necessarily refer to the same embodiment, nor does it constitute an independent or alternative embodiment that is mutually exclusive of other embodiments. It is understood, both explicitly and implicitly, by those skilled in the art that the embodiments described herein may be combined with other embodiments.
[0037] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.
[0038] like Figure 1 As shown, system architecture 100 may include a terminal device 101, a network 102, and a server 103. Terminal device 101 may be a laptop computer 1011, a tablet computer 1012, or a mobile phone 1013. Network 102 is a medium for providing a communication link between terminal device 101 and server 103. Network 102 may include various connection types, such as wired or wireless communication links or fiber optic cables.
[0039] The user can use the terminal device 101 to interact with the server 103 via the network 102 to receive or send messages, etc. Various communication client applications can be installed on the terminal device 101, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.
[0040] The terminal device 101 can be various electronic devices with a display screen and supporting web browsing. In addition to the laptop computer 1011, tablet computer 1012 or mobile phone 1013, the terminal device 101 can also be an e-book reader, an MP3 player (Moving Picture Experts Group Audio Layer III), an MP4 (Moving Picture Experts Group Audio Layer IV) player, a laptop computer and a desktop computer, etc.
[0041] The server 103 may be a server that provides various services, such as a background server that provides support for web pages displayed on the terminal device 101 .
[0042] It should be noted that the front-end module automatic updating method provided in the embodiment of the present application is generally executed by a server, and accordingly, a front-end module automatic updating device is generally provided in the server.
[0043] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as required.
[0044] Continue to refer Figure 2 , shows a flow chart of an embodiment of a front-end module automatic update method according to the present application. The front-end module automatic update method includes the following steps:
[0045] Step 201: In the front-end page development environment, start the preset file monitoring component.
[0046] Among them, the preset file monitoring component is used to monitor changes in configuration information in the target configuration file. The target configuration file records the configuration information corresponding to all front-end modules involved in page construction, and the configuration information includes routing information, component information, and state management information.
[0047] Step 202: Based on the file monitoring component, determine whether there is any change in the configuration information corresponding to all the front-end modules in the target configuration file.
[0048] By starting the preset file monitoring component in the front-end page development environment, it is determined whether there are any changes in the configuration information corresponding to all front-end modules described in the target configuration file, so that the front-end development page can be updated and adjusted in time when the configuration information of the front-end module changes.
[0049] Step 203: If there is no change in the configuration information corresponding to all the front-end modules in the target configuration file, continue to use the file monitoring component to monitor the configuration information change of the target configuration file.
[0050] By continuously monitoring the configuration information changes of the target configuration file, front-end developers can promptly discover pending issues caused by configuration updates during the front-end page development process, thereby avoiding problem delays.
[0051] Step 204: If the configuration information corresponding to at least one front-end module in the target configuration file has changed, the module name information of the front-end module is obtained, and the file monitoring component is continued to monitor the configuration information changes of the target configuration file.
[0052] By obtaining the module name information of the front-end module, corresponding update processing can be performed on the front-end module.
[0053] Step 205: Update the modular mapping file corresponding to the target configuration file according to the module name information of the front-end module, wherein the modular mapping file is used to map the configuration information corresponding to the front-end module to the target HTML page file.
[0054] Specifically, the modular mapping file is an intermediate mapping file, which plays the role of mapping configuration. During actual compilation, the intermediate mapping file only plays the role of address or pointer.
[0055] By writing the module name information of the front-end module whose configuration information has changed into the intermediate mapping file, the front-end module whose configuration information has changed can be directly identified through the intermediate mapping file during subsequent compilation and update. Then, the configuration information corresponding to the front-end module is directly obtained from the target configuration file as a whole to update the front-end page, avoiding the need to obtain all the configuration information in the target configuration file at one time to re-update the page, and performing more rational and targeted automated updates, saving update resources.
[0056] Step 206, after the modular mapping file is updated, trigger the compilation of the target HTML page file and load the corresponding compilation result to the target page address to complete the automatic update of the front-end module, wherein the target page address includes the front-end interface address.
[0057] In this embodiment, the front-end module automatic update method can be applied to the multi-functional module business service APP or applet developed specifically for customers in the financial business or medical business. By implanting the front-end module automatic update method when developing the page in the multi-functional module business service APP, not only can the page be updated in time during development, but also after the APP is launched, when a page adjustment or update occurs in a certain service module in the multi-functional module business service APP, the target front-end module can be updated in a targeted manner according to the update instructions of the server, avoiding the re-update of all front-end modules at one time, saving update resources, and, when the user operates other front-end modules of the page, there is no feeling of update, realizing a seamless update without affecting the customer's operating experience.
[0058] In this embodiment, a preset file monitoring component is started in the front-end page development environment; it is determined whether there are changes in the configuration information corresponding to all front-end modules in the target configuration file; if the configuration information corresponding to at least one front-end module in the target configuration file has changed, the module name information of the front-end module is obtained; according to the module name information, the modular mapping file corresponding to the target configuration file is updated; after the modular mapping file is updated, the compilation of the target HTML page file is triggered, and the corresponding compilation result is loaded to the target page address to complete the automatic update of the front-end module. By utilizing the file monitoring component, the modular mapping file and the automated processing method, it is possible to achieve targeted automated updates to the target front-end module when the configuration information corresponding to the front-end module changes, avoiding the need to load all front-end modules as a whole every time, realizing intelligent control of the compilation process and on-demand compilation and loading based on module changes, effectively reducing compilation time and update resource consumption. The front-end module automatic update method can be applied to the multi-functional module business service APP or applet developed specifically for customers in the financial business or medical business. By implanting the front-end module automatic update method when developing pages in the multi-functional module business service APP, not only can the page be updated in time during development, but also after the APP is launched, when a page adjustment or update occurs in a certain service module in the multi-functional module business service APP, the target front-end module can be updated in a targeted manner according to the update instructions of the server, avoiding the re-update of all front-end modules at one time and saving update resources.
[0059] Continue to refer Figure 3 In some optional implementations, that is, before step 201, the method further includes a step of preparing for file monitoring. Figure 3This is a flowchart of a specific embodiment of file monitoring preparation in the front-end module automatic update method described in this application, including the following steps:
[0060] Step 301, identifying the fixed field area and the configurable modification area in the target configuration file;
[0061] Step 302: Setting a group listener as the file monitoring component in the configurability modification area by embedding a point;
[0062] Step 303: Obtain, through the monitoring log, configuration information corresponding to all the front-end modules in the target configuration file at the end of the previous monitoring cycle as the first configuration information.
[0063] In this embodiment, if this monitoring cycle is the first monitoring cycle, the configuration information corresponding to all the front-end modules in the target configuration file is directly the initial configuration information. By identifying the fixed field area and the configurability modification area in the target configuration file, and setting a group listener in the configurability modification area through a buried point, the configuration information changes in the target configuration file can be monitored and identified later.
[0064] Continue to refer Figure 4 , Figure 4 yes Figure 2 The flowchart of a specific embodiment of step 202 shown includes the following steps:
[0065] Step 401: Start the group listener, wherein the group listener performs continuous monitoring;
[0066] Step 402: Identify, through the group listener, whether a write operation occurs in the configurability modification area;
[0067] Step 403: If a write operation occurs in the configurability modification area, the configuration information corresponding to all the front-end modules in the current target configuration file is triggered to be obtained as the second configuration information;
[0068] Step 404: Identify whether the second configuration information is the same as the first configuration information;
[0069] Step 405: If the second configuration information is identical to the first configuration information, then the configuration information corresponding to all the front-end modules in the target configuration file remains unchanged;
[0070] Step 406: If the second configuration information is different from the first configuration information, then the configuration information corresponding to all the front-end modules in the target configuration file is changed.
[0071] By starting the group listener and, when a change in configuration information is detected, obtaining the latest configuration information (second configuration information) in the target configuration file and comparing it with the previous configuration information (first configuration information), the changed configuration information is identified, so as to determine the front-end module to be updated based on the changed configuration information.
[0072] In this embodiment, the step of continuing to use the file monitoring component to monitor configuration information changes of the target configuration file specifically includes: if this monitoring cycle ends, continuing to identify whether a write operation has occurred in the configurability modification area through the group listener; if this monitoring cycle ends and no write operation has occurred in the configurability modification area, then updating the first configuration information at the end of the previous monitoring cycle to the first configuration information at the end of this monitoring cycle; if this monitoring cycle ends and a write operation has occurred in the configurability modification area, then updating the configuration information corresponding to all front-end modules in the target configuration file at the end of this monitoring cycle to the first configuration information.
[0073] Specifically, at the end of each monitoring period, the first configuration information is updated distinctively so as to be used in the next monitoring.
[0074] In this embodiment, if the configuration information corresponding to at least one front-end module in the target configuration file changes, the step of obtaining the module name information of the front-end module specifically includes: parsing the target configuration file, identifying the changed configuration information and identifying the front-end module to which the configuration information belongs; according to the identification result, obtaining the module name information of the front-end module, wherein the step of obtaining the module name information of the front-end module according to the identification result specifically includes: adopting a preset acquisition method to obtain the module name information of the front-end module, and the preset acquisition method includes: the fs.writeFileSync method in Node.js.
[0075] In this embodiment, the step of updating the modular mapping file corresponding to the target configuration file based on the module name information of the front-end module specifically includes: writing the module name information of the front-end module into the front-end module mapping information filling location preset in the modular mapping file, and the modular mapping file includes: module.js file, wherein the module name information of the front-end module is written into the front-end module mapping information filling location preset in the modular mapping file using the acquisition method, and the acquisition method includes the fs.writeFileSync method.
[0076] Specifically, when a change in the configuration information in the target configuration file is detected, the fs.writeFileSync method in the front-end built-in module Node.js can be used to identify and obtain the module name information corresponding to the changed configuration information, and write the module name information into the module.js file. In essence, the fs.writeFileSync method is a synchronous write method, which has two parameters, namely the target file to be written and the specific field content to be written. Here, the target file to be written is the modular mapping file, that is, the module.js file; and the specific field content to be written is the module name information corresponding to the changed configuration information.
[0077] Continue to refer Figure 5 , Figure 5 yes Figure 2 The flowchart of a specific embodiment of step 206 includes the following steps:
[0078] Step 501, identifying the module name information written in the front-end module mapping information filling area preset in the modular mapping file;
[0079] Step 502: acquiring configuration update information of the front-end module corresponding to the module name information according to the module name information and the cache address information of the target configuration file;
[0080] Step 503: Automatically update the front-end module at the target page address based on the configuration update information.
[0081] It should be understood that during the actual compilation and update, since the previous version of the front-end interface already exists in the target front-end page, the operation performed during this compilation and update is only to fill in the module name information according to the front-end module mapping information preset in the modular mapping file, that is, to identify the front-end module that needs to be updated, and then obtain the updated configuration information corresponding to the front-end module from the target configuration file, and update the front-end module to the target front-end interface in a targeted manner to complete the automatic update of the front-end module.
[0082] In this embodiment, a preset file monitoring component is started in the front-end page development environment; it is determined whether there are changes in the configuration information corresponding to all front-end modules in the target configuration file; if the configuration information corresponding to at least one front-end module in the target configuration file has changed, the module name information of the front-end module is obtained; according to the module name information, the modular mapping file corresponding to the target configuration file is updated; after the modular mapping file is updated, the compilation of the target HTML page file is triggered, and the corresponding compilation result is loaded to the target page address to complete the automatic update of the front-end module. By utilizing the file monitoring component, the modular mapping file and the automated processing method, it is possible to achieve targeted automated updates to the target front-end module when the configuration information corresponding to the front-end module changes, avoiding the need to load all front-end modules as a whole every time, realizing intelligent control of the compilation process and on-demand compilation and loading based on module changes, effectively reducing compilation time and update resource consumption. The front-end module automatic update method can be applied to the multi-functional module business service APP or applet developed specifically for customers in the financial business or medical business. By implanting the front-end module automatic update method when developing pages in the multi-functional module business service APP, not only can the page be updated in time during development, but also after the APP is launched, when a page adjustment or update occurs in a certain service module in the multi-functional module business service APP, the target front-end module can be updated in a targeted manner according to the update instructions of the server, avoiding the re-update of all front-end modules at one time and saving update resources.
[0083] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) is the theory, method, technology, and application system that uses digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use knowledge to achieve optimal results.
[0084] Fundamental AI technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interaction systems, and mechatronics. AI software technologies primarily encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.
[0085] In this embodiment, a preset file monitoring component is started in the front-end page development environment; it is determined whether there are changes in the configuration information corresponding to all front-end modules in the target configuration file; if the configuration information corresponding to at least one front-end module in the target configuration file has changed, the module name information of the front-end module is obtained; according to the module name information, the modular mapping file corresponding to the target configuration file is updated; after the modular mapping file is updated, the compilation of the target HTML page file is triggered, and the corresponding compilation result is loaded to the target page address to complete the automatic update of the front-end module. By utilizing the file monitoring component, the modular mapping file and the automated processing method, it is possible to achieve targeted automated updates to the target front-end module when the configuration information corresponding to the front-end module changes, avoiding the need to load all front-end modules as a whole every time, realizing intelligent control of the compilation process and on-demand compilation and loading based on module changes, effectively reducing compilation time and update resource consumption. The front-end module automatic update method can be applied to the multi-functional module business service APP or applet developed specifically for customers in the financial business or medical business. By implanting the front-end module automatic update method when developing pages in the multi-functional module business service APP, not only can the page be updated in time during development, but also after the APP is launched, when a page adjustment or update occurs in a certain service module in the multi-functional module business service APP, the target front-end module can be updated in a targeted manner according to the update instructions of the server, avoiding the re-update of all front-end modules at one time and saving update resources.
[0086] Further references Figure 6 , as a response to the above Figure 2 The present application provides an embodiment of a front-end module automatic updating device. Figure 2 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.
[0087] like Figure 6 As shown, the front-end module automatic update device 600 of this embodiment includes: a monitoring component startup module 601, a configuration information change judgment module 602, a first branch module 603, a second branch module 604, a modular mapping file update module 605 and a compilation and loading module 606.
[0088] The monitoring component startup module 601 is used to start a preset file monitoring component in the front-end page development environment, wherein the preset file monitoring component is used to monitor changes in configuration information in a target configuration file. The target configuration file records the configuration information corresponding to all front-end modules involved in page construction, and the configuration information includes routing information, component information, and state management information.
[0089] The configuration information change judgment module 602 is used to judge whether there is any change in the configuration information corresponding to all the front-end modules in the target configuration file based on the file monitoring component;
[0090] The first branch module 603 is configured to continue using the file monitoring component to monitor configuration information changes of the target configuration file if there is no change in the configuration information corresponding to all front-end modules in the target configuration file;
[0091] The second branch module 604 is configured to obtain the module name information of the front-end module if the configuration information corresponding to at least one front-end module in the target configuration file has changed, and continue to use the file monitoring component to monitor the configuration information changes of the target configuration file;
[0092] A modular mapping file updating module 605 is configured to update the modular mapping file corresponding to the target configuration file according to the module name information of the front-end module, wherein the modular mapping file is used to map the configuration information corresponding to the front-end module to the target HTML page file;
[0093] The compilation and loading module 606 is used to trigger the compilation of the target HTML page file after the modular mapping file is updated, and load the corresponding compilation result to the target page address to complete the automatic update of the front-end module, wherein the target page address includes the front-end interface address.
[0094] This application starts the preset file monitoring component in the front-end page development environment; determines whether there are changes in the configuration information corresponding to all front-end modules in the target configuration file; if the configuration information corresponding to at least one front-end module in the target configuration file has changed, then obtains the module name information of the front-end module; updates the modular mapping file corresponding to the target configuration file according to the module name information; after the modular mapping file is updated, triggers the compilation of the target HTML page file, and loads the corresponding compilation result to the target page address to complete the automatic update of the front-end module. By utilizing the file monitoring component, modular mapping file and automated processing method, it is possible to achieve targeted automated updates to the target front-end module when the configuration information corresponding to the front-end module changes, avoiding the need to load all front-end modules as a whole every time, realizing intelligent control of the compilation process and on-demand compilation and loading based on module changes, effectively reducing compilation time and update resource consumption. The front-end module automatic update method can be applied to the multi-functional module business service APP or applet developed specifically for customers in the financial business or medical business. By implanting the front-end module automatic update method when developing pages in the multi-functional module business service APP, not only can the page be updated in time during development, but also after the APP is launched, when a page adjustment or update occurs in a certain service module in the multi-functional module business service APP, the target front-end module can be updated in a targeted manner according to the update instructions of the server, avoiding the re-update of all front-end modules at one time and saving update resources.
[0095] In this embodiment, the front-end module automatic update device 600 also includes a monitoring preparation module, which is used to identify the fixed field area and the configurability modification area in the target configuration file; it is also used to set a group listener as the file monitoring component in the configurability modification area through a tracking point; it is also used to obtain the configuration information corresponding to all front-end modules in the target configuration file at the end of the previous monitoring cycle through the monitoring log as the first configuration information.
[0096] In this embodiment, the compile and load module 606 includes a module name information identification unit, a configuration update information acquisition unit, and an automatic update unit.
[0097] A module name information identification unit, configured to identify the module name information written in the front-end module mapping information filling area preset in the modular mapping file;
[0098] a configuration update information acquiring unit, configured to acquire configuration update information of the front-end module corresponding to the module name information according to the module name information and the cache address information of the target configuration file;
[0099] An automatic updating unit is used to automatically update the front-end module at the target page address based on the configuration update information.
[0100] Those skilled in the art will appreciate that all or part of the processes in the above-described method embodiments can be implemented by instructing related hardware via computer-readable instructions. The computer-readable instructions can be stored in a computer-readable storage medium, and when the program is executed, it can include the processes in the above-described method embodiments. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).
[0101] It should be understood that although the steps in the flowcharts of the accompanying drawings are shown in sequence as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some of the steps in the flowcharts of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a portion of the sub-steps or stages of other steps.
[0102] To solve the above technical problems, the present application also provides a computer device. Figure 7 , Figure 7 This is a basic structural block diagram of the computer device in this embodiment.
[0103] The computer device 7 includes a memory 7a, a processor 7b, and a network interface 7c that are interconnected via a system bus. Figure 7Only a computer device 7 having components of a memory 7a, a processor 7b, and a network interface 7c is shown, but it should be understood that it is not required to implement all of the components shown, and more or fewer components may be implemented instead. Among them, those skilled in the art will understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to a microprocessor, an application specific integrated circuit (ASIC), a field-programmable gate array (FPGA), a digital signal processor (DSP), an embedded device, etc.
[0104] The computer device may be a desktop computer, notebook computer, PDA, cloud server, etc. The computer device may interact with the user via a keyboard, mouse, remote control, touchpad, or voice control device.
[0105] The memory 7a includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 7a can be an internal storage unit of the computer device 7, such as the hard disk or memory of the computer device 7. In other embodiments, the memory 7a can also be an external storage device of the computer device 7, such as a plug-in hard disk equipped on the computer device 7, a smart memory card (SMC), a secure digital (SD) card, a flash memory card, etc. Of course, the memory 7a can also include both the internal storage unit of the computer device 7 and its external storage device. In this embodiment, the memory 7a is generally used to store the operating system and various application software installed on the computer device 7, such as computer-readable instructions for a front-end module automatic update method. In addition, the memory 7a can also be used to temporarily store various types of data that have been output or are to be output.
[0106] In some embodiments, the processor 7b may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip. The processor 7b is generally used to control the overall operation of the computer device 7. In this embodiment, the processor 7b is used to execute computer-readable instructions stored in the memory 7a or process data, such as executing computer-readable instructions for the front-end module automatic update method.
[0107] The network interface 7c may include a wireless network interface or a wired network interface. The network interface 7c is generally used to establish a communication connection between the computer device 7 and other electronic devices.
[0108] The computer device proposed in this embodiment belongs to the field of research and development and design technology, and can be applied to multi-page functional service APPs or mini-programs developed specifically for customers in financial services or medical services. This application starts a preset file monitoring component in the front-end page development environment; determines whether there are changes in the configuration information corresponding to all front-end modules in the target configuration file; if the configuration information corresponding to at least one front-end module in the target configuration file has changed, the module name information of the front-end module is obtained; according to the module name information, the modular mapping file corresponding to the target configuration file is updated; after the modular mapping file is updated, the compilation target HTML page file is triggered, and the corresponding compilation result is loaded to the target page address to complete the automatic update of the front-end module. By utilizing the file monitoring component, the modular mapping file and the automated processing method, it is possible to realize the targeted automatic update of the target front-end module when the configuration information corresponding to the front-end module changes, avoiding the need to load all front-end modules as a whole every time, realizing the intelligent control of the compilation process and on-demand compilation and loading based on module changes, effectively reducing compilation time and update resource consumption. The front-end module automatic update method can be applied to the multi-functional module business service APP or applet developed specifically for customers in the financial business or medical business. By implanting the front-end module automatic update method when developing pages in the multi-functional module business service APP, not only can the page be updated in time during development, but also after the APP is launched, when a page adjustment or update occurs in a certain service module in the multi-functional module business service APP, the target front-end module can be updated in a targeted manner according to the update instructions of the server, avoiding the re-update of all front-end modules at one time and saving update resources.
[0109] The present application also provides another embodiment, namely, providing a computer-readable storage medium, which stores computer-readable instructions. The computer-readable instructions can be executed by a processor to enable the processor to perform the steps of the above-mentioned front-end module automatic update method.
[0110] The computer-readable storage medium proposed in this embodiment belongs to the field of research and development and design technology, and can be applied to multi-page functional service APPs or mini-programs developed specifically for customers in financial services or medical services. This application starts a preset file monitoring component in the front-end page development environment; determines whether there are changes in the configuration information corresponding to all front-end modules in the target configuration file; if the configuration information corresponding to at least one front-end module in the target configuration file has changed, the module name information of the front-end module is obtained; according to the module name information, the modular mapping file corresponding to the target configuration file is updated; after the modular mapping file is updated, the compilation of the target HTML page file is triggered, and the corresponding compilation result is loaded to the target page address to complete the automatic update of the front-end module. By utilizing the file monitoring component, the modular mapping file and the automated processing method, it is possible to realize the targeted automatic update of the target front-end module when the configuration information corresponding to the front-end module changes, avoiding the need to load all front-end modules as a whole every time, realizing the intelligent control of the compilation process and on-demand compilation and loading based on module changes, effectively reducing compilation time and update resource consumption. The front-end module automatic update method can be applied to the multi-functional module business service APP or applet developed specifically for customers in the financial business or medical business. By implanting the front-end module automatic update method when developing pages in the multi-functional module business service APP, not only can the page be updated in time during development, but also after the APP is launched, when a page adjustment or update occurs in a certain service module in the multi-functional module business service APP, the target front-end module can be updated in a targeted manner according to the update instructions of the server, avoiding the re-update of all front-end modules at one time and saving update resources.
[0111] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus the necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for enabling a terminal device (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in each embodiment of the present application.
[0112] Obviously, the embodiments described above are only some of the embodiments of the present application, rather than all of the embodiments. The preferred embodiments of the present application are given in the accompanying drawings, but they do not limit the patent scope of the present application. The present application can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present application more thorough and comprehensive. Although the present application has been described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific embodiments, or to make equivalent replacements for some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of this application, directly or indirectly used in other related technical fields, is also within the scope of patent protection of this application. The non-company software tools or components that appear in the embodiments of this application are merely examples and do not represent actual use.
Claims
1. A front-end module automatic update method, characterized in that: The steps include: In the front-end page development environment, start a preset file monitoring component, wherein the preset file monitoring component is used to monitor changes in configuration information in a target configuration file. The target configuration file records configuration information corresponding to all front-end modules involved in page construction, and the configuration information includes routing information, component information, and state management information. Based on the file monitoring component, determine whether there is any change in the configuration information corresponding to all the front-end modules in the target configuration file; If there is no change in the configuration information corresponding to all front-end modules in the target configuration file, continue to use the file monitoring component to monitor the configuration information changes of the target configuration file; If the configuration information corresponding to at least one front-end module in the target configuration file has changed, then obtaining the module name information of the front-end module, and continuing to use the file monitoring component to monitor the configuration information changes of the target configuration file; According to the module name information of the front-end module, the modular mapping file corresponding to the target configuration file is updated, wherein the modular mapping file is used to map the configuration information corresponding to the front-end module to the target HTML page file; After the modular mapping file is updated, the compilation of the target HTML page file is triggered, and the corresponding compilation result is loaded to the target page address to complete the automatic update of the front-end module, wherein the target page address includes the front-end interface address.
2. The front-end module automatic updating method according to claim 1, characterized in that: Before executing the step of starting the preset file monitoring component in the front-end page development environment, the method further includes: Identifying a fixed field area and a configurable modification area in the target configuration file; Setting a group listener as the file listening component in the configurability modification area by embedding a point; The configuration information corresponding to all the front-end modules in the target configuration file at the end of the previous monitoring cycle is obtained through the monitoring log as the first configuration information.
3. The front-end module automatic updating method according to claim 2, characterized in that: The step of determining whether there is a change in the configuration information corresponding to all the front-end modules in the target configuration file based on the file monitoring component specifically includes: Starting the group listener, wherein the group listener performs continuous monitoring; Identifying, by the group listener, whether a write operation occurs in the configurability modification area; If a write operation occurs in the configurability modification area, triggering acquisition of configuration information corresponding to all front-end modules in the current target configuration file as second configuration information; Identifying whether the second configuration information is the same as the first configuration information; If the second configuration information is exactly the same as the first configuration information, then the configuration information corresponding to all the front-end modules in the target configuration file remains unchanged; If the second configuration information is different from the first configuration information, the configuration information corresponding to all the front-end modules in the target configuration file is changed.
4. The front-end module automatic updating method according to any one of claims 2 or 3, characterized in that: The step of continuing to use the file monitoring component to monitor configuration information changes of the target configuration file specifically includes: If the current monitoring cycle ends, continue to identify whether a write operation occurs in the configurability modification area through the group of monitors; If the current monitoring period ends and no write operation occurs in the configurability modification area, the first configuration information at the end of the previous monitoring period is updated to the first configuration information at the end of the current monitoring period; If the monitoring period ends and a write operation occurs in the configurability modification area, the configuration information corresponding to all the front-end modules in the target configuration file at the end of the monitoring period is updated to the first configuration information.
5. The front-end module automatic updating method according to claim 1, characterized in that: If the configuration information corresponding to at least one front-end module in the target configuration file changes, the step of obtaining the module name information of the front-end module specifically includes: Parsing the target configuration file, identifying the changed configuration information and identifying the front-end module to which the configuration information belongs; According to the recognition result, the module name information of the front-end module is obtained, wherein the step of obtaining the module name information of the front-end module according to the recognition result specifically includes: adopting a preset acquisition method to obtain the module name information of the front-end module, and the preset acquisition method includes: the fs.writeFileSync method in Node.js.
6. The front-end module automatic updating method according to claim 5, characterized in that: The step of updating the modular mapping file corresponding to the target configuration file according to the module name information of the front-end module specifically includes: The module name information of the front-end module is written into the front-end module mapping information filling place preset in the modular mapping file. The modular mapping file includes: a module.js file, wherein the module name information of the front-end module is written into the front-end module mapping information filling place preset in the modular mapping file using the acquisition method, and the acquisition method includes the fs.writeFil eSync method.
7. The front-end module automatic updating method according to claim 6, characterized in that: The triggering step of compiling the target HTML page file and loading the corresponding compilation result to the target page address to complete the automatic update of the front-end module specifically includes: Identifying the module name information written in the front-end module mapping information filling area preset in the modular mapping file; According to the module name information and the cache address information of the target configuration file, obtaining configuration update information of the front-end module corresponding to the module name information; The front-end module is automatically updated at the target page address based on the configuration update information.
8. A front-end module automatic updating device, characterized in that: The front-end module automatic updating device is used to implement the steps of the front-end module automatic updating method according to any one of claims 1 to 7, and the front-end module automatic updating device includes: A monitoring component startup module is used to start a preset file monitoring component in the front-end page development environment, wherein the preset file monitoring component is used to monitor changes in configuration information in a target configuration file. The target configuration file records the configuration information corresponding to all front-end modules involved in page construction, and the configuration information includes routing information, component information, and state management information; A configuration information change judgment module is used to judge whether there is any change in the configuration information corresponding to all the front-end modules in the target configuration file based on the file monitoring component; The first branch module is configured to continue to use the file monitoring component to monitor configuration information changes of the target configuration file if there is no change in the configuration information corresponding to all front-end modules in the target configuration file; The second branch module is configured to obtain the module name information of the front-end module if the configuration information corresponding to at least one front-end module in the target configuration file changes, and continue to use the file monitoring component to monitor the configuration information changes of the target configuration file; A modular mapping file updating module, configured to update the modular mapping file corresponding to the target configuration file according to the module name information of the front-end module, wherein the modular mapping file is used to map the configuration information corresponding to the front-end module to the target HTML page file; The compilation and loading module is used to trigger the compilation of the target HTML page file after the modular mapping file is updated, and load the corresponding compilation result to the target page address to complete the automatic update of the front-end module, wherein the target page address includes the front-end interface address.
9. A computer device, characterized in that: The method comprises a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the front-end module automatic updating method according to any one of claims 1 to 7 when executing the computer-readable instructions.
10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the front-end module automatic updating method according to any one of claims 1 to 7.