Business system fusion sharing method and device based on module federation

Abstract

The invention provides a service system fusion sharing method and device based on module federation, and the method comprises the steps: carrying out module federation setting by a component provider, and obtaining exposed to-be-called information; the component provider performs Vite project construction to obtain a to-be-run file of the module federation; the component user configures a use demand, and loads the sharing module in the remote component according to the use demand through the file to be operated; and starting a remote application item corresponding to the successfully loaded component provider and a current application item corresponding to the component user, and formulating the current application item as a global CSS according to a theme and displaying the global CSS as an inline style of the remote application item. According to the method, independent development and deployment of independent business systems can be carried out, technical stacks for development of all the systems are not limited, and component-level or module-level front-end modules which are exposed to each other can be mutually quoted among the systems through a small amount of non-intrusive interface transformation.

Description

Technical Field

[0001] The present invention relates to the technical field of business system integration, and in particular to a business system integration and sharing method and device based on module federation. Background Art

[0002] In the field of wind power generation, wind power companies currently have multiple digital business systems in operation and maintenance of wind farms, which are responsible for office business such as data monitoring, analysis or work order filling. Each system is independently developed, deployed and maintained, with single functions and diverse styles. At present, when conducting digital transformation, there is a demand for system integration, page fusion and data sharing of multiple business systems.

[0003] The traditional solution is to redevelop a large and comprehensive system, completely repeat the code development, which is time-consuming and labor-intensive, and the project is too large to be easy to maintain; the second solution is to extract the reused components in each independent system and package them into npm (NodePackage Manager, node package manager) package, each project references the same npm to achieve code reuse. The disadvantage of this method is that the project code changes are large, the components need to be split, and it will make version upgrades difficult. Each change requires the component to be re-npm packaged and released, and then each calling project updates the dependent package and re-packages and releases it. The upgrade work is heavy and the overall update and release is prone to errors; and npm package sharing is only static code sharing. Each application is packaged separately, and the runtime sharing of functional components cannot be achieved. It is equivalent to running different instances of components in different calling projects; the third method is iframe (embedded framework) integration. Iframe integrates pages of other systems and loads very slowly. The embedded page cannot automatically update the style with the host system due to the sandbox mechanism, and cannot meet the component-level granularity requirements of the embedded page; the fourth method is to use frameworks such as qiankun. The application scenarios of this micro-frontend framework distinguish between main and sub-applications. The main application must embed the entire page of the sub-application in units of routes, and cannot meet the embedding requirements of lower granularity such as the component level within the page. Moreover, only the main application can integrate the sub-application, and the sub-application cannot integrate the main application, and they cannot be embedded in each other. Summary of the invention

[0004] The present invention provides a module federation-based business system integration and sharing method and device to solve the defects of the prior art.

[0005] A first aspect of the present invention provides a service system integration and sharing method based on module federation, comprising: S1: The component provider performs module federation settings to obtain the exposed information to be called; S2: The component provider builds the Vite project according to the information to be called and obtains the file to be run of the module federation; S3: The component user configures usage requirements and loads the shared module in the remote component according to the usage requirements through the file to be run; S4: Start the remote application project corresponding to the component provider that has been loaded successfully and the current application project corresponding to the component user, formulate the current application project as a global CSS according to the theme and display it as an inline style of the remote application project to complete the integration and sharing of the business system.

[0006] According to a module federation-based business system integration method provided by the present invention, the information to be called in step S1 includes: the current front-end project name, the remote call entry file name and the shared module list.

[0007] According to a module federation-based business system integration method provided by the present invention, the shared module list includes multiple shared modules, and the shared modules are independent routing interfaces, logic modules or business components.

[0008] According to a module federation-based business system integration method provided by the present invention, in step S1, module federation configuration is added to the vite.config.ts configuration file of the component provider to implement module federation settings for the component provider.

[0009] According to a module federation-based business system integration method provided by the present invention, the to-be-run file in step S2 includes: An entry file for module federation calling, the entry file including the module name of each shared module in the shared module list and the remote execution file address of each shared module in the shared module list; The running file of each shared module includes at least the processing logic of the third-party dependent module corresponding to each shared module.

[0010] According to a module federation-based business system integration method provided by the present invention, the usage requirements in step S3 include a list of remote components to be used and addresses of the remote components to be used.

[0011] According to a module federation-based business system integration method provided by the present invention, in step S3, the loading mode of the shared module includes synchronous loading and asynchronous loading.

[0012] A second aspect of the present invention provides a module federation-based business system fusion device, comprising: Exposure module: used to perform module federation settings on component providers and obtain exposed information to be called; Construction module: used to build the Vite project for the component provider according to the information to be called, and obtain the file to be run of the module federation; Loading module: used to load the shared module in the remote component according to the usage requirements of the component user through the file to be run; Display module: Starts loading the remote application project corresponding to the component provider and the current application project corresponding to the component user, formulates the current application project as a global CSS according to the theme and displays it as an inline style of the remote application project to complete the integration and sharing of the business system.

[0013] A third aspect of the present invention provides a business system fusion device based on module federation, comprising: A memory and at least one processor, wherein instructions are stored in the memory; At least one of the processors calls the instructions in the memory to enable a module federation-based business system integration device to execute a module federation-based business system integration method as described in any one of the above items.

[0014] A fourth aspect of the present invention provides a computer-readable storage medium having instructions stored thereon, and when the instructions are executed by a processor, a business system integration method based on module federation as described in any one of the above items is implemented.

[0015] The present invention provides a business system integration method, device, equipment and storage medium based on module federation, which realizes the integration sharing and display requirements of wind farm digital systems. The present invention is based on the technical theories of micro-front-end and module federation, and each independent business system can be independently developed and deployed, without limiting the technology stack of each system development. Only a small amount of non-invasive interface modification is required to enable each independently released and deployed system to reference each other's exposed component-level or module-level front-end modules, highlight key businesses and weaken auxiliary business modules according to the system theme, so that each project can be independently maintainable during software development and deployment, and multiple projects can be integrated and referenced during system display, so that the display system can freely combine business components across projects, autonomously control page routing and layout, and can display wind farm panoramic data in multiple dimensions under large scenes, and system integration has higher flexibility.

[0016] The present invention utilizes module federation to break down software project barriers and realize cross-project intra-page component-level code sharing; it is not limited to the development technology stack of each project, and is convenient for different development teams of different projects to develop synchronously, independently deploy and maintain; the technical transformation and modification of module federation is less and non-intrusive, and there is no need to split the project code, and there is no access conflict with the independent deployment of the project. It can realize independent access of each project at the same time and expose page components to remote calls, so as to achieve the effect of code sharing between projects; module federation can meet the localization requirements of remote components, and display them according to the global style of the local system, so that the local and remote components have a unified style; after the shared module code changes are released, the remote caller can automatically update the local part without upgrading the entire application, which is convenient for system upgrade and maintenance. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the technical solutions in the present invention or the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0018] Figure 1 A flowchart of a business system integration method based on module federation provided by an embodiment of the present invention; Figure 2 A schematic diagram of the structure of a business system fusion device based on module federation provided in an embodiment of the present invention.

[0019] Reference numerals: 100, expose module; 200, build module; 300, load module; 400, display module. DETAILED DESCRIPTION

[0020] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described below in conjunction with the drawings in the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments, and they should not be understood as limitations on the present invention. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention. In the description of the present invention, it should be understood that the terms used are only for descriptive purposes and cannot be understood as indicating or implying relative importance.

[0021] In order to better understand the present invention, the terms appearing in the embodiments of the present invention are first explained below.

[0022] Micro frontends are a technical means and method strategy for multiple teams to jointly build modern web applications by independently releasing functions. The core goal of micro frontends is to break down the monolithic application into several autonomous loosely coupled micro applications, so as to ensure that the micro applications can truly have the ability to be independently developed and run.

[0023] Qiankun is a micro-frontend implementation library that aims to help everyone build a production-ready micro-frontend architecture system more simply and painlessly.

[0024] Module federation is a modular development technology that splits the code into smaller logical blocks, making it easier for team members to manage and develop them separately, and they can be integrated with each other to form a whole.

[0025] Host, a concept introduced by module federation, refers to the application of other application modules, that is, the current application.

[0026] Remote, a concept introduced by module federation, is an application that uses a module by other applications, namely a remote application.

[0027] Vite, a front-end project building tool.

[0028] Vite-plugin-federation, a module federation plug-in for Vite, is a Vite plug-in that processes module federation technology when building a project. It allows Vite applications to share components and modules at runtime, so that this embodiment can build a highly flexible and scalable front-end system based on module federation.

[0029] Combine the following Figure 1 to Figure 2 Embodiments of the present invention are described.

[0030] like Figure 1 As shown, the first aspect of the present invention provides a service system integration and sharing method based on module federation, comprising: S1: The component provider performs module federation settings to obtain the exposed information to be called.

[0031] Wherein, in step S1, module federation configuration is added to the vite.config.ts configuration file of the component provider to implement module federation setting for the component provider.

[0032] Among them, the information to be called in step S1 includes: the current front-end project name, the remote call entry file name and the shared module list.

[0033] In step S1, firstly, the module federation configuration is added to the configuration file vite.config.ts of the component provider, i.e. the Remote end, to expose information such as the address available for remote calls, including the name of the current front-end project exposed to the outside, the name of the remote call entry file, and the shared module list.

[0034] The shared module list includes multiple shared modules, and the shared modules are independent routing interfaces, logic modules or business components.

[0035] Shared modules can be of any granularity and can be freely controlled as needed. They can be a large independent routing page, a small complete logic module, or a business component composed of multiple basic components.

[0036] In step S1, the specific code for causing the component provider to expose address information that can be remotely called is as follows.

[0037] federation({ / / Define the project name name: "remote-app", / / Define the name of the entry file after construction filename: "remoteEntry.js", / / Define the list of components exposed to the outside world exposes: ". / Home":". / src / views / home / index.vue", ". / NoData":". / src / components / NoData.vue", } }) S2: The component provider builds the Vite project according to the information to be called and obtains the file to be run of the module federation.

[0038] Furthermore, in step S2, the Vite project is first built for the component provider, i.e., the Remote end, and the executable file of the module federation is additionally generated in the dist build product through the plug-in vite-plugin-federation.

[0039] The files to be run in step S2 include: An entry file for module federation calling, the entry file including the module name of each shared module in the shared module list and the remote execution file address of each shared module in the shared module list; Furthermore, the entry file called by the module federation is the remoteEntry.js file. remoteEntry.js maintains the shared module list information, including the name of each module and the corresponding remote execution file address.

[0040] The running file of each shared module includes at least the processing logic of the third-party dependent module corresponding to each shared module.

[0041] Furthermore, the executable file of each shared module is the __federation_expose_NoData.js file, in which the __federation_fn_import.js maintains the processing logic of the external third-party dependent module, mainly the importShared function.

[0042] S3: The component user configures usage requirements and loads the shared module in the remote component according to the usage requirements through the file to be run.

[0043] The usage requirements in step S3 include a list of remote components to be used and addresses of remote components to be used.

[0044] In step S3, the host end, which is the component user, first configures the remote component address and list to be used. The specific implementation code is as follows.

[0045] federation({ / / Define the current project name name: 'host-app', / / Define the remote project name and load the entry file remotes: { 'remote-app': http: / / localhost:4173 / assets / remoteEntry.js", } }) Wherein, in step S3, the loading method of the shared module includes synchronous loading and asynchronous loading.

[0046] After the configuration of component usage is completed, the component user, i.e. the Host, loads the remote component on demand. The Host application can freely control the front-end routing and page layout of this project like a normal front-end project. The layout can flexibly combine local components and remote components. The reference of the remote component can be loaded synchronously or asynchronously on demand like a normal component.

[0047] Furthermore, the specific implementation code of asynchronous loading is as follows.

[0048] const RTHome = defineAsyncComponent(() =>import('remote-app / Home')) app.component('rt-home',RTHome) The specific implementation code for synchronous loading is as follows.

[0049] import EMPTY from "remote-app / Empty" Furthermore, the references in the Vue page template are as follows.

[0050] <template> <rt-home / > <empty :visible="true" / > < / template> S4: Start the remote application project corresponding to the component provider that has been loaded successfully and the current application project corresponding to the component user, formulate the current application project as a global CSS according to the theme and display it as an inline style of the remote application project to complete the integration and sharing of the business system.

[0051] Furthermore, by starting the Remote project and the Host project, you can see the loaded remote module in the Host project, but the display style of the remote module may not be ideal at this time, because the module federation does not perform style isolation, unlike micro-frontend frameworks such as Qiankun, which use the sandbox mechanism to start the isolation of the main and sub-applications. This feature of the module federation just meets the needs of the local system to display the page style uniformly, and needs to switch different styles according to different themes. This requires the Host project to formulate multiple global css according to different themes, which can be used as the inline style setting of the remote component. Such a Host system gives people the feeling of being a complete integrated application, but from a technical point of view, it is composed of independent modules scattered in various places combined through a specified layout method.

[0052] like Figure 2 As shown, the second aspect of the present invention provides a business system fusion device based on module federation, including: Exposure module 100: used to perform module federation settings on the component provider and obtain exposed information to be called; Construction module 200: used to build a Vite project for the component provider according to the information to be called, and obtain the file to be run of the module federation; Loading module 300: used to load the shared module in the remote component according to the usage requirements of the component user through the file to be run; Display module 400: Start the remote application project corresponding to the successfully loaded component provider and the current application project corresponding to the component user, formulate the current application project as a global CSS according to the theme and display it as an inline style of the remote application project to complete the integration and sharing of the business system.

[0053] When updating an existing system, after the Remote component is modified, you only need to rebuild and publish the component runtime file, and the Host side can automatically update the component locally. The Host local project does not change, reducing the risk of version upgrades.

[0054] At the same time, the Remote end can also be used as a Host to call other remote components. You only need to add the remote Remote related configuration based on the Vite configuration. A complete configuration example of a Host+Remote project is as follows: federation({ / / Define as the Remotetet project name name: "remote-app", / / Define the name of the entry file after Remote construction filename: "remoteEntry.js", / / Define the list of components exposed as Remote exposes: ". / Home":". / src / views / home / index.vue", ". / NoData":". / src / components / NoData.vue", }, / / Define the remote project name and loading entry file loaded as Host remotes: { 'remote-app2': http: / / localhost:4174 / assets / remoteEntry.js", } }) A third aspect of the present invention provides a business system fusion device based on module federation, comprising: A memory and at least one processor, wherein instructions are stored in the memory; At least one of the processors calls the instructions in the memory to enable a module federation-based business system integration device to execute a module federation-based business system integration method as described in any one of the above items.

[0055] A fourth aspect of the present invention provides a computer-readable storage medium having instructions stored thereon, and when the instructions are executed by a processor, a business system integration method based on module federation as described in any one of the above items is implemented.

[0056] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative labor.

[0057] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a necessary general hardware platform, and of course, can also be implemented by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the prior art can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0058] The present invention provides a business system integration method, device, equipment and storage medium based on module federation, which realizes system integration based on module federation, and can realize low-granularity module sharing at the component level within the page between multiple projects, which is more flexible; in addition, the remote components are shared at runtime, which reduces repeated construction and packaging, and has high reuse; secondly, the remote components can unify the local style according to the global style to improve the display effect; and the shared components are locally updated, which improves the immediacy of version upgrades and reduces upgrade risks, which is safer.

[0059] In the business system implemented by the present invention, in the module federation, the shared module is not a part of the local build of the Host application, but is loaded when the local project is running. What is loaded is the executable file of the shared module built by the Remote end. Each independently built project can reference the remote module as the Host end, and can also export the remote module as the Remote end for reference by other projects. This is a decentralized project integration method.

[0060] The present invention discloses a technical solution for code fusion and sharing between digital systems based on module federation, such as the display requirements of wind farm digital system fusion and sharing. This method can realize low-granularity mutual calling and code sharing of page components / modules between independently developed and deployed software projects; the development technology stack of each independent project is not limited, the code changes are small, the component provider does not need to split the code, only needs to increase the component exposure address, the caller configures the remote component address through the module federation plug-in, and embeds the shared component like using a common component; the shared component is remotely loaded at runtime, and the component data can be shared to maintain the consistency of the shared content in the two projects; the use of module federation can meet the localization requirements of the remote component, and display it according to the global style of the local system, so that the local and remote components have a unified style; after the shared module code change is released, the remote caller can automatically update locally without upgrading the entire application, which is convenient for system upgrade and maintenance. The decentralized idea of ​​module federation enables project A to call the components exposed by project B, and project B can also call the components exposed by project A, so as to realize the free combination of business components and page layout across projects of the display system, realize the multi-dimensional display of wind farm panoramic data under large scenes, and the system fusion has higher flexibility.

[0061] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A business system integration and sharing method based on module federation, characterized in that: include: S1: The component provider performs module federation settings to obtain the exposed information to be called; S2: The component provider builds the Vite project according to the information to be called and obtains the file to be run of the module federation; S3: The component user configures usage requirements and loads the shared module in the remote component according to the usage requirements through the file to be run; S4: Start the remote application project corresponding to the component provider that has been loaded successfully and the current application project corresponding to the component user, formulate the current application project as a global CSS according to the theme and display it as an inline style of the remote application project to complete the integration and sharing of the business system.

2. A method for business system integration based on module federation according to claim 1, characterized in that: The information to be called in step S1 includes: the current front-end project name, the remote call entry file name and the shared module list.

3. A method for business system integration based on module federation according to claim 2, characterized in that: The shared module list includes multiple shared modules, and the shared modules are independent routing interfaces, logic modules or business components.

4. The method for business system integration based on module federation according to claim 1, characterized in that: In step S1, module federation configuration is added to the vite.config.ts configuration file of the component provider to implement module federation settings for the component provider.

5. The method for business system integration based on module federation according to claim 2, characterized in that: The files to be run in step S2 include: An entry file for module federation calling, the entry file including the module name of each shared module in the shared module list and the remote execution file address of each shared module in the shared module list; The running file of each shared module includes at least the processing logic of the third-party dependent module corresponding to each shared module.

6. The method for business system integration based on module federation according to claim 1, characterized in that: The usage requirements in step S3 include a list of remote components to be used and addresses of the remote components to be used.

7. The method for business system integration based on module federation according to claim 1, characterized in that: In step S3, the loading method of the shared module includes synchronous loading and asynchronous loading.

8. A business system integration device based on module federation, characterized in that: include: Exposure module: used to perform module federation settings on component providers and obtain exposed information to be called; Construction module: used to build the Vite project for the component provider according to the information to be called, and obtain the file to be run of the module federation; Loading module: used to load the shared module in the remote component according to the usage requirements of the component user through the file to be run; Display module: Starts loading the remote application project corresponding to the component provider and the current application project corresponding to the component user, formulates the current application project as a global CSS according to the theme and displays it as an inline style of the remote application project to complete the integration and sharing of the business system.

9. A business system fusion device based on module federation, characterized in that: include: A memory and at least one processor, wherein instructions are stored in the memory; At least one of the processors calls the instructions in the memory to enable a module federation-based business system integration device to execute a module federation-based business system integration method as described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores instructions, and when the instructions are executed by the processor, a business system integration method based on module federation as described in any one of claims 1 to 7 is implemented.

Images