Base application and sub-application content unification method and device, equipment and medium

Abstract

The application discloses a base application and sub-application content unification method and device, equipment and medium, relates to the computer technical field, including: writing public starting and building configuration, public development and compilation configuration and target development language syntax configuration in the first configuration file in the unified launcher, completing the unification of the base application and the sub-application based on the npm package and the first configuration file; write public processing method, sub-application export specification, syntax checking rule and formatting rule in the second configuration file, complete the unification based on the npm package and the second configuration file; add unified entry configuration file, application entry file and unified template file, introduce application entry file, complete the unification through the introduced file and the unified template file; write public dependency to the public project description file, add similar dependency in the public project description file according to the third party dependency, and complete the unification according to the added public project description file. The application realizes the internal unification of the application.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method, device, equipment and medium for unifying the content of a base application and sub-applications. Background Art

[0002] As businesses accumulate, teams, and personnel increase, monolithic applications evolve into "monolith applications," making them difficult to maintain and develop, leading to the introduction of the micro-frontend architecture. Micro-frontends refer to splitting a large front-end application into multiple independent small sub-applications, which are independently developed, maintained, run, and deployed. They are more flexible in development and maintenance, and are better compatible with older applications. Micro-frontends based on npm (Node Package Manager) maintain these split independent small sub-applications as individual npm packages, and provide a base application to introduce these sub-application npm packages through npm, registering and maintaining them in a unified manner. As business sub-applications gradually increase in number and complexity, this npm-based micro-frontend architecture has the following problems:

[0003] 1. Because common features such as menu navigation, top navigation, tabs, and watermarks exist in the base app but not in the sub-app itself, the sub-app cannot obtain the same environment as when the base app is actually running during development.

[0004] 2. Inconsistencies in routing, network request methods, state management, internationalization, export specifications, configuration file specifications, syntax validation specifications, and formatting specifications among sub-applications led to inconsistent implementations for similar requirements, or duplicate implementations of the same functionality. This increased the burden on development, understanding, and maintenance personnel, and made sub-applications less efficient and standardized.

[0005] 3. At the same time, the dependencies used by each sub-application are inconsistent, and some use different versions of the same dependency or different dependencies for the same function. Combined with problem 2, there are problems such as slow startup of base application and sub-application development, long build and compilation time, large build products, and unsmooth application use.

[0006] Therefore, how to achieve the unification of the content of the base application and the sub-application is an urgent problem to be solved. Summary of the Invention

[0007] In view of this, the purpose of the present invention is to provide a method, device, equipment and medium for unifying the content of base applications and sub-applications, which can unify the content of base applications and sub-applications in a micro-frontend manner through a unified launcher npm package. The specific solution is as follows:

[0008] In a first aspect, the present application discloses a method for unifying the content of a base application and a sub-application, comprising:

[0009] Build an npm package containing a unified launcher, add a first configuration file to the unified launcher, and write corresponding common startup and build configurations, common development and compilation configurations, and target development language syntax configurations into the first configuration file. Based on the npm package and the first configuration file, unify the startup, development, and build methods of the base application and the sub-applications.

[0010] Adding a second configuration file to the unified launcher and writing common processing methods, sub-application export specifications, syntax verification rules, and formatting rules into the second configuration file, unifying the target processing methods, management methods, and specifications of the base application and the sub-application based on the npm package and the second configuration file;

[0011] Adding a unified entry configuration file, an application entry file, and an HTML unified template file to the unified launcher, importing the application entry file into the unified entry configuration file to obtain an imported file, and unifying the common capabilities of the base application and the sub-application through the imported file and the HTML unified template file;

[0012] Write public dependencies into the newly added public project description file of the unified launcher, collect third-party dependencies with similar functions in the target project description files of the base application and the sub-application, add corresponding similar dependencies in the public project description file based on the third-party dependencies, and complete the unification of the dependencies of the base application and the sub-application according to the newly added public project description file.

[0013] Optionally, unifying the startup, development, and construction methods of the base application and the sub-application based on the npm package and the first configuration file includes:

[0014] Export the file declaration corresponding to the first configuration file, import the npm package into the base application and the sub-application, and add a Vue framework configuration file to each of the base application and the sub-application. Utilize the configuration merging capability of the Vue framework configuration file to merge and unify the common startup and build configurations in the first configuration file with the custom configurations of each application.

[0015] Adding compilation configuration files to the base application and the sub-application respectively, and utilizing the inheritance capability of the compilation configuration files to integrate the common development and compilation configuration in the first configuration files and the customized configuration of each application;

[0016] Add target language configuration files to the base application and the sub-application respectively, and utilize the inheritance capability of the target language configuration files to integrate the target development language syntax configuration in the first configuration file with the custom configuration of each application itself;

[0017] Complete the unification of the startup method, development method and construction method of the base application and the sub-application.

[0018] Optionally, the process of writing the common processing method, sub-application export specification, syntax verification rules, and formatting rules into the second configuration file further includes:

[0019] Introduce the routing plug-in under the Vue framework, the network request plug-in under the Vue framework, the basic state management plug-in under the Vue framework, and the internationalization plug-in under the Vue framework into the second configuration file.

[0020] Optionally, the second configuration file includes a public processing configuration file, an export configuration file, a basic syntax specification configuration file, a vue framework syntax specification configuration file, a target syntax specification configuration file, a jest unit test framework syntax specification configuration file and a code formatting configuration file; wherein, the public processing method is written in the public processing configuration file; the sub-application export specification is written in the export configuration file; the syntax verification rules are written in the basic syntax specification configuration file, the vue framework syntax specification configuration file, the target syntax specification configuration file, and the jest unit test framework syntax specification configuration file; and the formatting rules are written in the code formatting configuration file.

[0021] Optionally, unifying the target processing mode, management mode, and specifications of the base application and the sub-application based on the npm package and the second configuration file includes:

[0022] Export all files corresponding to the second configuration file, and introduce the npm package into the base application and the sub-application;

[0023] Modify the implementation of routing processing, network request processing, basic state management and internationalization processing in the base application and the sub-application based on the public processing configuration file;

[0024] Modifying the export entry in each of the self-applications according to the export configuration file;

[0025] Adding a syntax check configuration file to the base application and the sub-application respectively, integrating the syntax check rules by using the inheritance capability of the syntax check configuration file and the currently used framework and development language, and adding a target formatting configuration file to the base application and the sub-application respectively, and using the code formatting configuration file in the second configuration file to determine the configuration corresponding to the target formatting configuration file;

[0026] Complete the unification of the routing processing method, network request processing method, basic state management method, internationalization processing method, export specifications, syntax verification specifications and formatting specifications of the base application and the sub-application.

[0027] Optionally, unifying the common capabilities of the base application and the sub-application through the imported file and the HTML unified template file includes:

[0028] Mounting the HTML unified template file as a unified one based on the HTML mounting plug-in corresponding to the common startup and build configuration in the first configuration file;

[0029] Add a unified entry file to the base application and the sub-application respectively, import the imported file into the unified entry file, and add a module field for indicating the sub-application list that needs to be registered;

[0030] The common capabilities of the base application and the sub-application, including menu navigation, top navigation, tabs, and watermarks, are unified.

[0031] Optionally, adding a corresponding similar dependency in the public project description file based on the third-party dependency, and unifying the dependencies of the base application and the sub-application according to the newly added public project description file, includes:

[0032] Determine the dependency with the largest functional scope among the third-party dependencies, and use the dependency with the largest functional scope to modify the remaining similar dependencies among the third-party dependencies to obtain target similar dependencies with unified functional scopes;

[0033] Add the target similarity dependency in the public project description file;

[0034] Deleting the dependencies in the target project description files corresponding to the base application and the sub-application that exist in the public project description file;

[0035] A parsing path field for describing the plug-in is added to the target project description file to unify the common dependencies and similar dependencies of the base application and the sub-application.

[0036] In a second aspect, the present application discloses a device for unifying the content of a base application and a sub-application, comprising:

[0037] A first unified module is used to build an npm package containing a unified launcher, add a first configuration file to the unified launcher, and write corresponding common startup and build configurations, common development and compilation configurations, and target development language syntax configurations into the first configuration file. Based on the npm package and the first configuration file, the startup, development, and build methods of the base application and the sub-application are unified;

[0038] A second unification module is configured to add a second configuration file to the unified launcher, write a common processing method, sub-application export specifications, syntax verification rules, and formatting rules into the second configuration file, and unify the target processing methods, management methods, and specifications of the base application and the sub-application based on the npm package and the second configuration file;

[0039] a third unification module, configured to add a unified entry configuration file, an application entry file, and an HTML unified template file to the unified launcher, import the application entry file into the unified entry configuration file to obtain an imported file, and unify the common capabilities of the base application and the sub-application through the imported file and the HTML unified template file;

[0040] The fourth unification module is used to write public dependencies into the new public project description file of the unified launcher, collect third-party dependencies with similar functions in the target project description files of the base application and the sub-application, add corresponding similar dependencies to the public project description file based on the third-party dependencies, and complete the unification of the dependencies of the base application and the sub-application according to the newly added public project description file.

[0041] In a third aspect, the present application discloses an electronic device, comprising:

[0042] Memory, used to store computer programs;

[0043] The processor is configured to execute the computer program to implement the aforementioned method for unifying the contents of the base application and the sub-application.

[0044] In a fourth aspect, the present application discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, the method for unifying the content of the base application and the sub-application as described above is implemented.

[0045] When unifying the contents of the base application and sub-application, this application first constructs an npm package containing a unified launcher, adds a first configuration file to the unified launcher, and writes the corresponding public startup and build configuration, public development and compilation configuration, and target development language syntax configuration in the first configuration file, and completes the unification of the startup, development, and build methods of the base application and the sub-application based on the npm package and the first configuration file; then adds a second configuration file to the unified launcher, and writes the public processing method, sub-application export specification, syntax verification rules, and formatting rules into the second configuration file, and completes the target processing method, management method, and specification of the base application and the sub-application based on the npm package and the second configuration file. unification; adding a unified entry configuration file, an application entry file and an html unified template file to the unified launcher, introducing the application entry file into the unified entry configuration file to obtain the introduced file, and completing the unification of the common capabilities of the base application and the sub-application through the introduced file and the html unified template file; finally, writing common dependencies into the new common project description file added to the unified launcher, collecting third-party dependencies with similar functions in the target project description files of the base application and the sub-application, adding corresponding similar dependencies to the common project description file based on the third-party dependencies, and completing the unification of the dependencies of the base application and the sub-application according to the newly added common project description file. It can be seen that this application unifies the base application and the sub-application content in this micro-frontend mode through a unified launcher npm package. In this way, the common functions of the base application and the sub-application are unified, using a unified routing processing method, network request method, state management, internationalization processing, export specifications, configuration file specifications, syntax verification specifications, and formatting specifications. This allows developers to maintain a consistent operating environment when developing sub-applications, enabling early detection of issues. It also optimizes the development experience, reduces the developer's understanding and maintenance burden, and standardizes integration logic. It also unifies common dependencies, speeds up application development startup, effectively shortens compilation time, reduces build artifact size, and streamlines internal application usage and loading in production. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0047] Figure 1 This is a flow chart of a method for unifying the content of a base application and a sub-application disclosed in this application;

[0048] Figure 2 This is a schematic diagram of a method and apparatus structure for unifying the content of a base application and sub-applications disclosed in this application;

[0049] Figure 3 This is a structural diagram of an electronic device disclosed in this application. DETAILED DESCRIPTION

[0050] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0051] As business sub-applications gradually increase and become more complex, this npm-based micro-frontend architecture has the following problems:

[0052] 1. Because common features such as menu navigation, top navigation, tabs, and watermarks exist in the base app but not in the sub-app itself, the sub-app cannot obtain the same environment as when the base app is actually running during development.

[0053] 2. Inconsistencies in routing, network request methods, state management, internationalization, export specifications, configuration file specifications, syntax validation specifications, and formatting specifications among sub-applications led to inconsistent implementations for similar requirements, or duplicate implementations of the same functionality. This increased the burden on development, understanding, and maintenance personnel, and made sub-applications less efficient and standardized.

[0054] 3. At the same time, the dependencies used by each sub-application are inconsistent, and there are cases where different versions of the same dependency or different dependencies with the same function are used. Combined with problem 2, there are problems such as slow startup of base application and sub-application development, long build and compilation time, large build product size, and unsmooth application use. In order to solve the above technical problems, this application discloses a method for unifying the content of base applications and sub-applications, which can unify the content of base applications and sub-applications in a micro-frontend manner through a unified starter npm package.

[0055] See also Figure 1 As shown, an embodiment of the present invention discloses a method for unifying the content of a base application and a sub-application, including:

[0056] Step S11, build an npm package containing a unified launcher, add a first configuration file in the unified launcher, and write corresponding public startup and build configurations, public development and compilation configurations, and target development language syntax configurations in the first configuration file, and complete the unification of the startup, development, and build methods of the base application and sub-application based on the npm package and the first configuration file.

[0057] In this embodiment, the present application first builds an npm package containing a unified launcher, then adds a first configuration file to the unified launcher, or in other words, adds a new configuration file to module A of the unified launcher. The first configuration file includes several subfiles. Common startup and build configurations are then written into the newly added configuration subfile A1. For example, a hard-source (cache) plugin is added to cache startup and build compilations, compression and terser (file and code compression) plugins are added to compress build products, an html (HTML (Hypertext Markup Language) file mounting) plugin and a copy (copy) plugin are added to unify the commonly mounted html (HTML files), and a custom hmr (hot module replacement) plugin is added to hot update the reverse proxy. Common development and compilation configurations are then added to the newly added configuration subfile A2 in module A to handle the development and build compilation processes, such as adding the official default configuration parameters of the Vue framework, adding an optional chaining plugin, and adding an on-demand plugin. At the same time, a new configuration sub-file A3 is added to module A to add a common TypeScript development language syntax configuration for parsing sub-applications developed using the TypeScript language.

[0058] After writing the corresponding public startup and build configuration, public development and compilation configuration, and target development language syntax configuration in the first configuration file, the startup, development, and build methods of the base application and sub-application can be unified based on the npm package and the first configuration file. In this process, the file declaration corresponding to the first configuration file is exported, the npm package is introduced in the base application and the sub-application, and the vue framework configuration file is added to the base application and the sub-application respectively. The configuration merging capability of the vue framework configuration file is used to merge and unify the public startup and build configuration in the first configuration file and the custom configuration of each application itself; the compilation configuration file is added to the base application and the sub-application respectively, and the inheritance capability of the compilation configuration file is used to integrate the public development and compilation configuration in the first configuration file and the custom configuration of each application itself; the target language configuration file is added to the base application and the sub-application respectively, and the inheritance capability of the target language configuration file is used to integrate the target development language syntax configuration in the first configuration file and the custom configuration of each application itself; thus completing the unification of the startup method, development method, and build method of the base application and the sub-application. Specifically, during this process, the A1, A2, and A3 files in module A are declared exported, and the newly added Unified Launcher npm package is introduced into the base application and sub-applications. Then, the base application and sub-applications each add a Vue framework configuration file, utilizing the official configuration merging capabilities to merge the common configuration in the Unified Launcher A module's A1 configuration file with each application's own custom configuration. The base application and sub-application each add a Babel (compilation) configuration file, utilizing the configuration file inheritance capabilities to extend and integrate the common configuration in the Unified Launcher A module's A2 configuration file with each application's own custom configuration. The base application and sub-application each add a TypeScript language configuration file, utilizing the configuration file inheritance capabilities to extend and integrate the common configuration in the Unified Launcher A module's A3 configuration file with each application's own custom configuration. At this point, the base application and sub-applications have unified their startup, development, and build methods. It should also be noted that the language frameworks of this application include, but are not limited to, the Vue framework. Whether it's Vue, React, or any other framework, as long as it's maintained and managed using npm, this application can be used.

[0059] Step S12: Add a second configuration file to the unified launcher, and write common processing methods, sub-application export specifications, syntax verification rules and formatting rules into the second configuration file, and complete the unification of the target processing methods, management methods and specifications of the base application and the sub-application based on the npm package and the second configuration file.

[0060] In this embodiment, a second configuration file is added to the unified launcher (module B), and the second configuration file includes a public processing configuration file, an export configuration file, a basic syntax specification configuration file, a vue framework syntax specification configuration file, a target syntax specification configuration file, a jest unit test framework syntax specification configuration file, and a code formatting configuration file; wherein, the public processing method is written in the public processing configuration file; the sub-application export specification is written in the export configuration file; the syntax verification rules are written in the basic syntax specification configuration file, the vue framework syntax specification configuration file, the target syntax specification configuration file, and the jest unit test framework syntax specification configuration file; and the formatting rules are written in the code formatting configuration file. Specifically, a new common processing configuration file, B1, was added to Module B to handle routing, network requests, basic state management, and internationalization. It introduced vue-router (a routing plugin for the Vue framework) and added a unified routing method, supporting both synchronous and asynchronous routing. It also introduced axios (a network request plugin for the Vue framework) and added a unified network request method, supporting interface interceptors. It also introduced vuex (a basic state management plugin for the Vue framework) and added unified basic state management content, supporting batch asynchronous addition of state management submodules. It also introduced vue-i18n (an internationalization plugin for the Vue framework) and added a unified internationalization method, unifying the internationalization configuration files for all registered base applications and sub-applications. A new export configuration file, B2, was added to Module B to standardize the export specifications for sub-applications. The specification specifies optional fields for sub-application exports: routing fields, internationalization fields, and state management fields. It also includes three different lifecycles: custom global prepend, asynchronous processing, and global postpend. An optional sub-application code field is used by the base application to determine whether to load the sub-application. In module B, a new code standard configuration folder B3 is added to unify syntax verification standards and formatting standards. A new basic syntax standard configuration file, a Vue framework syntax standard configuration file, a TypeScript syntax standard configuration file, and a Jest unit test framework syntax standard configuration file are added, and the corresponding syntax verification standard configuration files are written in sequence; a formatting configuration file is added, and a unified code formatting configuration file is written.

[0061] Then, export the aforementioned files B1 and B2 and all files in folder B3 in module B, and import the newly added unified launcher npm package into the base application and sub-application, respectively. Then, based on the npm package and the second configuration file, unify the target processing, management, and specifications of the base application and sub-application. During this process, all files corresponding to the second configuration file are exported, and the npm package is imported into the base application and sub-application. The routing, network request processing, basic state management, and internationalization implementations of the base application and sub-application are modified based on the common processing configuration file. The export entry points of each application are modified based on the exported configuration file. Syntax validation configuration files are added to the base application and sub-application, respectively, leveraging the inheritance capabilities of the syntax validation configuration files and integrating syntax validation rules with the currently used framework and development language. Target formatting configuration files are added to the base application and sub-application, respectively, and the code formatting configuration files in the second configuration file are used to determine the corresponding configurations of the target formatting configuration files. This unifies the routing, network request processing, basic state management, internationalization, export specifications, syntax validation, and formatting specifications of the base application and sub-application.

[0062] Step S13: Add a unified entry configuration file, an application entry file, and an html unified template file in the unified launcher, introduce the application entry file into the unified entry configuration file to obtain the introduced file, and complete the unification of the common capabilities of the base application and the sub-application through the introduced file and the html unified template file.

[0063] In this embodiment, the present application adds a unified entry configuration file, an application entry file, and an html unified template file to the unified launcher, that is, a unified entry configuration file C1 is added to the unified launcher C module to support batch registration of sub-applications, and automatically register the entry files of each sub-application according to the above specifications, that is, integrate and register routing, state management, network requests, internationalization, and execute each life cycle. A new application entry file C2 of the vue framework is added to the C module, in which public capabilities such as menu navigation, top navigation, tabs, watermarks, etc. are written, and the relevant routing and state management are maintained and managed through the unified processing methods in the B1 configuration file. A new html unified template file C3 is added to the C module, in which a unified application mounting html code is written and a unified mounting icon is added as the icon of the base application and the sub-application. Then, the C2 file is introduced in the newly added C1 file, and the vue component registration operation is performed. In the newly added A1 configuration file, it will be used as a unified mount through a custom html mounting plug-in. Finally, based on the html mount plug-in corresponding to the public startup and build configuration in the first configuration file, the html unified template file is mounted as a unified one; a unified entry file is added to the base application and the sub-application respectively, the file after introduction is introduced into the unified entry file, and a new module field is added to represent the list of sub-applications that need to be registered; the common capabilities of the base application and the sub-application, including menu navigation, top navigation, tabs, and watermarks, are unified. In other words, based on the html mount plug-in corresponding to the public startup and build configuration in the first configuration file, the html unified template file is mounted as a unified one; a unified entry file is added to the base application and the sub-application respectively, the file after introduction is introduced into the unified entry file, and a new module field is added to represent the list of sub-applications that need to be registered; the common capabilities of the base application and the sub-application, including menu navigation, top navigation, tabs, and watermarks, are unified.

[0064] Step S14: write public dependencies into the newly added public project description file of the unified launcher, collect third-party dependencies with similar functions in the target project description files of the base application and the sub-application, add corresponding similar dependencies to the public project description file based on the third-party dependencies, and complete the unification of the dependencies of the base application and the sub-application according to the newly added public project description file.

[0065] In this embodiment, the application adds a public project description file D1 in the D module of the unified launcher, writes the common dependencies of the base application and the sub-application in it and upgrades these dependencies to the latest available version. These common dependencies are mostly related to the vue framework, compilation, code specification, style, and building. Then collect the third-party dependencies with similar functions in the project description files of the base application and the sub-application, such as drag and drop plugins, comparison plugins, and clipboard plugins. Uniformly use the one with the largest function range among the similar dependencies, and modify the places where other similar dependencies with less functions are used to use the one with the largest function range. Add these unified similar dependencies in the newly added D1 configuration file. Remove the dependencies in the project description files of the base application and the sub-application that already exist in the D module D1 configuration file, so that these dependencies directly use the unified version in D1. At the same time, since the related plugin package of the vue framework scaffold reads the main directory of the plugin by default, if it is not modified, it will cause the application to start abnormally, so the field for describing the analysis path of the plugin needs to be added in the project description files of the base application and the sub-application, and it needs to be pointed to the unified launcher. At this point, the common dependencies and similar dependencies of the base application and the sub-application are unified. In this way, the application unifies various environments and specifications, which can effectively reduce the difficulty of developers to understand and maintain the micro-front-end technical framework, so that developers can focus more on the development of each sub-application business, reduce the development and maintenance burden, and make the integration of the base application and the sub-application more standardized, effectively reducing the occurrence of related problems. At the same time, it speeds up the application development and startup speed, reduces the time-consuming of building and compiling, reduces the size of the build product, optimizes the loading speed and switching speed inside the application, and provides users with a better experience. At the same time, with iteration, the launcher in this unified way can be upgraded and expanded, and after upgrading, the base application and the sub-application can be adapted synchronously.

[0066] In summary, when unifying the contents of the base application and sub-application, the present application first constructs an npm package containing a unified launcher, adds a first configuration file to the unified launcher, and writes the corresponding public startup and build configuration, public development and compilation configuration, and target development language syntax configuration in the first configuration file, and completes the unification of the startup, development, and build methods of the base application and the sub-application based on the npm package and the first configuration file; then adds a second configuration file to the unified launcher, and writes the public processing method, sub-application export specification, syntax verification rules, and formatting rules into the second configuration file, and completes the target processing method, management method, and Unification of specifications; adding a unified entry configuration file, an application entry file and an html unified template file to the unified launcher, introducing the application entry file into the unified entry configuration file to obtain the introduced file, and completing the unification of the common capabilities of the base application and the sub-application through the introduced file and the html unified template file; finally, writing common dependencies into the new common project description file of the unified launcher, collecting third-party dependencies with similar functions in the target project description files of the base application and the sub-application, adding corresponding similar dependencies to the common project description file based on the third-party dependencies, and completing the unification of the dependencies of the base application and the sub-application according to the newly added common project description file. It can be seen that this application unifies the base application and the sub-application content in this micro-frontend mode through a unified launcher npm package. In this way, the common functions of the base application and the sub-application are unified, using a unified routing processing method, network request method, state management, internationalization processing, export specifications, configuration file specifications, syntax verification specifications, and formatting specifications. This allows developers to maintain a consistent operating environment when developing sub-applications, enabling early detection of issues. It also optimizes the development experience, reduces the developer's understanding and maintenance burden, and standardizes integration logic. It also unifies common dependencies, speeds up application development startup, effectively shortens compilation time, reduces build artifact size, and streamlines internal application usage and loading in production.

[0067] Based on the previous embodiment, it can be seen that this application can unify the target processing methods, management methods, and specifications of the base application and the sub-application based on the npm package and the second configuration file. Next, the specific process of achieving the unification of the target processing methods, management methods, and specifications of the base application and the sub-application will be described in detail.

[0068] First, the public processing configuration file in the second configuration file, the export configuration file, the basic syntax specification configuration file, the vue framework syntax specification configuration file, the target syntax specification configuration file, the jest unit test framework syntax specification configuration file and the code formatting configuration file are all exported, and the newly added unified launcher npm package is introduced in the base application and the sub-application.

[0069] The route processing, network request processing, basic state management and internationalization processing in the base application and the sub-application are uniformly changed to call the configuration file public processing configuration file B1 in module B provided by the unified launcher. The export entry in each sub-application is standardized and modified according to the export configuration file B2 of module B in the unified launcher, and each route processing, network request processing, basic state management and internationalization processing file is introduced.

[0070] Finally, the base application and the sub-application respectively increase the eslint (syntax checking) configuration file, utilize the inheritance ability extend of the configuration file, and integrate different public checking rules provided by the B module code specification configuration file folder B3 of the unified launcher B according to the framework and the development language used by the project, and support custom rules of the sub-application; the prettier (formatting) configuration file is increased, and the formatting configuration file in the B3 folder in the B module of the unified launcher is directly introduced as the configuration of this file. At this time, the base application and the sub-application complete the unification in the route processing mode, the network request processing mode, the basic state management mode, the internationalization processing mode, the export specification, the syntax checking specification and the formatting specification.

[0071] In this way, the unified route processing mode, network request mode, state management, internationalization processing, export specification, configuration file specification, syntax checking specification and formatting specification are used. When the sub-application is developed, a consistent running environment can be obtained, problems can be found early, the development experience is optimized, the understanding and maintenance burden of the developer are reduced, and the integrated logic is more standardized.

[0072] Referring to Figure 2 The embodiment of the application discloses a content unification device of a base application and a sub-application, comprising:

[0073] A first unified module 11 is used for constructing an npm package containing a unified launcher, adding a first configuration file in the unified launcher, writing corresponding public starting and building configurations, public development and compilation configurations and target development language syntax configurations in the first configuration file, and completing the unification of the starting, development and building modes of the base application and the sub-application based on the npm package and the first configuration file;

[0074] A second unification module 12 is configured to add a second configuration file to the unified launcher, write a common processing method, sub-application export specification, syntax verification rules, and formatting rules into the second configuration file, and unify the target processing mode, management mode, and specifications of the base application and the sub-application based on the npm package and the second configuration file;

[0075] A third unification module 13 is configured to add a unified entry configuration file, an application entry file, and an HTML unified template file to the unified launcher, import the application entry file into the unified entry configuration file to obtain an imported file, and unify the common capabilities of the base application and the sub-application through the imported file and the HTML unified template file;

[0076] The fourth unification module 14 is used to write public dependencies into the new public project description file of the unified launcher, collect third-party dependencies with similar functions in the target project description files of the base application and the sub-application, add corresponding similar dependencies in the public project description file based on the third-party dependencies, and complete the unification of the dependencies of the base application and the sub-application according to the newly added public project description file.

[0077] It can be seen that this application unifies the base application and sub-application content under this micro-frontend mode through a unified starter npm package. In this way, the common functions of the base application and sub-applications are unified, using a unified routing processing method, network request method, state management, internationalization processing, export specifications, configuration file specifications, syntax verification specifications, and formatting specifications. This allows developers to obtain a consistent operating environment when developing sub-applications, discover problems early, and optimize the development experience, reducing the developer's understanding and maintenance burden, and the integration logic is more standardized. At the same time, public dependencies are unified, application development starts faster, compilation time is effectively shortened, the size of the build product is reduced, and internal use and loading of applications in production are smoother.

[0078] In some specific embodiments, the first unification module 11 can be specifically used to export the file declaration corresponding to the first configuration file, introduce the npm package in the base application and the sub-application, and increase the vue framework configuration file in the base application and the sub-application respectively, and use the configuration merging capability of the vue framework configuration file to merge the public startup and build configuration in the first configuration file and the self-defined configuration of each application; increase the compilation configuration file in the base application and the sub-application respectively, use the inheritance capability of the compilation configuration file to integrate the public development and compilation configuration in the first configuration file and the self-defined configuration of each application; increase the target language configuration file in the base application and the sub-application respectively, use the inheritance capability of the target language configuration file to integrate the target development language syntax configuration in the first configuration file and the self-defined configuration of each application; and complete the unification of the startup mode, development mode and build mode of the base application and the sub-application.

[0079] In some specific embodiments, the device can also be used to introduce the route plug-in under the vue framework, the network request plug-in under the vue framework, the basic state management plug-in under the vue framework and the internationalization plug-in under the vue framework into the second configuration file.

[0080] In some specific embodiments, the second unification module 12 can be specifically used to export all the files corresponding to the second configuration file, introduce the npm package in the base application and the sub-application, modify the implementation mode of the route processing, network request processing, basic state management and internationalization processing in the base application and the sub-application based on the public processing configuration file, modify the export entry in each sub-application according to the exported configuration file, increase the syntax checking configuration file in the base application and the sub-application respectively, use the inheritance capability of the syntax checking configuration file and the current use framework and development language to integrate the syntax checking rule, and increase the target formatting configuration file in the base application and the sub-application respectively, use the code formatting configuration file in the second configuration file to determine the configuration corresponding to the target formatting configuration file; and complete the unification of the route processing mode, network request processing mode, basic state management mode, internationalization processing mode, export specification, syntax checking specification and formatting specification of the base application and the sub-application.

[0081] In some specific embodiments, the third unification module 13 can be specifically configured to use the html unification template file as a unified mount based on the html mount plug-in corresponding to the common start-up and build configuration in the first configuration file; add a unified entry file in the base application and the sub-application respectively, introduce the post-introduction file into the unified entry file, and add a module field for indicating a list of sub-applications that need to be registered; and unify the base application and the sub-application to include common capabilities such as a menu navigation, a top navigation, a tab page, and a watermark.

[0082] In some specific embodiments, the third unification module 13 can be specifically configured to determine a dependency with the largest function range in the third-party dependencies, modify the remaining similar dependencies in the third-party dependencies by using the dependency with the largest function range to obtain a target similar dependency with a unified function range; add the target similar dependency in the common project description file; delete the dependencies existing in the common project description file in the target project description files corresponding to the base application and the sub-application; and add a plug-in description path field in the target project description files, to unify the common dependencies and the similar dependencies of the base application and the sub-application.

[0083] Further, the embodiment of the present application further discloses an electronic device, Figure 3 is an electronic device 20 structure diagram according to an exemplary embodiment, the content in the figure cannot be considered as any limitation on the use range of the present application.

[0084] Figure 3 A structure schematic diagram of an electronic device 20 provided by the embodiment of the present application. The electronic device 20 can specifically include at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25 and a communication bus 26. The memory 22 is configured to store a computer program, the computer program is loaded and executed by the processor 21, to realize the related steps in the content unification method of the base application and the sub-application disclosed in any of the preceding embodiments. In addition, the electronic device 20 in the embodiment can be an electronic computer.

[0085] In the embodiment, the power supply 23 is configured to provide working voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and external devices, and the communication protocol followed by the communication interface 24 can be any communication protocol applicable to the technical solution of the present application, which is not limited here; the input / output interface 25 is configured to obtain external input data or output data to the outside, and the specific interface type can be selected according to the specific application needs, which is not limited here.

[0086] In addition, the memory 22 as a carrier for resource storage can be a read-only memory, random access memory, disk or optical disk, etc. The resources stored thereon can include an operating system 221, a computer program 222, etc., and the storage method can be temporary storage or permanent storage.

[0087] The operating system 221 is used to manage and control the hardware devices on the electronic device 20 and the computer program 222, which can be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program capable of implementing the method for unifying the content of the base application and the sub-application executed by the electronic device 20 disclosed in any of the aforementioned embodiments, the computer program 222 can further include a computer program capable of performing other specific tasks.

[0088] Furthermore, this application also discloses a computer-readable storage medium for storing a computer program; wherein, when executed by a processor, the computer program implements the aforementioned method for unifying the content of the base application and the sub-application. The specific steps of this method can be referred to the corresponding content disclosed in the aforementioned embodiments and will not be repeated here.

[0089] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from the other embodiments. Reference can be made to the descriptions of the identical or similar parts between the various embodiments. For the devices disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the descriptions are relatively simple, and the relevant parts can be referred to the descriptions of the methods.

[0090] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the components and steps of each example according to their functions. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0091] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein may be implemented directly using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in random access memory (RAM), internal memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0092] Finally, it needs to be pointed out that in this document, relational terms such as first and second and the like can only be intended to distinguish one entity or operation from another entity or operation without necessarily requiring or implying any actual such relationship or order between such entities or operations. Moreover, the terms "comprising", "including", or any other variant thereof are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but can also include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without more limitations, an element defined by the statement "comprising a" does not exclude the existence of additional identical elements in the process, method, article, or apparatus including the stated element.

[0093] The above detailed description of the technical solutions provided by the present application has been provided, and the principles and implementation manners of the present application have been described by applying specific examples. The above description of the examples is only for the purpose of helping to understand the method of the present application and its core idea; at the same time, for those skilled in the art, according to the idea of the present application, the specific implementation manner and application range will be changed, and the above description of the content of the specification should not be understood as a limitation of the present application.

Claims

1. A method for unifying the content of a base application and a sub-application, characterized in that: include: Build an npm package containing a unified launcher, add a first configuration file to the unified launcher, and write corresponding common startup and build configurations, common development and compilation configurations, and target development language syntax configurations into the first configuration file. Based on the npm package and the first configuration file, unify the startup, development, and build methods of the base application and the sub-applications. Adding a second configuration file to the unified launcher and writing common processing methods, sub-application export specifications, syntax verification rules, and formatting rules into the second configuration file, unifying the target processing methods, management methods, and specifications of the base application and the sub-application based on the npm package and the second configuration file; Adding a unified entry configuration file, an application entry file, and an HTML unified template file to the unified launcher, importing the application entry file into the unified entry configuration file to obtain an imported file, and unifying the common capabilities of the base application and the sub-application through the imported file and the HTML unified template file; Write public dependencies into the newly added public project description file of the unified launcher, collect third-party dependencies with similar functions in the target project description files of the base application and the sub-application, add corresponding similar dependencies in the public project description file based on the third-party dependencies, and complete the unification of the dependencies of the base application and the sub-application according to the newly added public project description file.

2. The method for unifying the contents of a base application and a sub-application according to claim 1, characterized in that: The unification of the startup, development, and construction methods of the base application and the sub-application based on the npm package and the first configuration file includes: Export the file declaration corresponding to the first configuration file, import the npm package into the base application and the sub-application, and add a Vue framework configuration file to each of the base application and the sub-application. Utilize the configuration merging capability of the Vue framework configuration file to merge and unify the common startup and build configurations in the first configuration file with the custom configurations of each application. Adding compilation configuration files to the base application and the sub-application respectively, and utilizing the inheritance capability of the compilation configuration files to integrate the common development and compilation configuration in the first configuration files and the customized configuration of each application; Add target language configuration files to the base application and the sub-application respectively, and utilize the inheritance capability of the target language configuration files to integrate the target development language syntax configuration in the first configuration file with the custom configuration of each application itself; Complete the unification of the startup method, development method and construction method of the base application and the sub-application.

3. The method for unifying the contents of a base application and a sub-application according to claim 1, characterized in that: The process of writing the common processing method, the sub-application export specification, the grammar verification rule and the formatting rule into the second configuration file further includes: Introduce the routing plug-in under the Vue framework, the network request plug-in under the Vue framework, the basic state management plug-in under the Vue framework, and the internationalization plug-in under the Vue framework into the second configuration file.

4. The method for unifying the contents of a base application and a sub-application according to claim 1, wherein: The second configuration file includes a public processing configuration file, an export configuration file, a basic syntax specification configuration file, a vue framework syntax specification configuration file, a target syntax specification configuration file, a jest unit test framework syntax specification configuration file and a code formatting configuration file; wherein, the public processing method is written in the public processing configuration file; the sub-application export specification is written in the export configuration file; the syntax verification rules are written in the basic syntax specification configuration file, the vue framework syntax specification configuration file, the target syntax specification configuration file, and the jest unit test framework syntax specification configuration file; and the formatting rules are written in the code formatting configuration file.

5. The method for unifying the contents of a base application and a sub-application according to claim 4, characterized in that: The unification of target processing methods, management methods, and specifications of the base application and the sub-application based on the npm package and the second configuration file includes: Export all files corresponding to the second configuration file, and introduce the npm package into the base application and the sub-application; Modify the implementation of routing processing, network request processing, basic state management and internationalization processing in the base application and the sub-application based on the public processing configuration file; Modifying the export entry in each of the sub-applications according to the export configuration file; Adding a syntax check configuration file to the base application and the sub-application respectively, integrating the syntax check rules by using the inheritance capability of the syntax check configuration file and the currently used framework and development language, and adding a target formatting configuration file to the base application and the sub-application respectively, and using the code formatting configuration file in the second configuration file to determine the configuration corresponding to the target formatting configuration file; Complete the unification of the routing processing method, network request processing method, basic state management method, internationalization processing method, export specifications, syntax verification specifications and formatting specifications of the base application and the sub-application.

6. The method for unifying the contents of a base application and a sub-application according to claim 1, characterized in that: The unification of the common capabilities of the base application and the sub-application through the imported file and the HTML unified template file includes: Mounting the HTML unified template file as a unified one based on the HTML mounting plug-in corresponding to the common startup and build configuration in the first configuration file; Add a unified entry file to the base application and the sub-application respectively, import the imported file into the unified entry file, and add a module field for indicating the sub-application list that needs to be registered; The common capabilities of the base application and the sub-application, including menu navigation, top navigation, tabs, and watermarks, are unified.

7. The method for unifying the contents of a base application and a sub-application according to any one of claims 1 to 6, characterized in that: The adding of a corresponding similar dependency in the public project description file based on the third-party dependency, and completing the unification of the dependencies of the base application and the sub-application according to the added public project description file, includes: Determine the dependency with the largest functional scope among the third-party dependencies, and use the dependency with the largest functional scope to modify the remaining similar dependencies among the third-party dependencies to obtain target similar dependencies with unified functional scopes; Add the target similarity dependency in the public project description file; Deleting the dependencies in the target project description files corresponding to the base application and the sub-application that exist in the public project description file; A parsing path field for describing the plug-in is added to the target project description file to unify the common dependencies and similar dependencies of the base application and the sub-application.

8. A device for unifying the contents of a base application and a sub-application, characterized in that: include: A first unified module is used to build an npm package containing a unified launcher, add a first configuration file to the unified launcher, and write corresponding common startup and build configurations, common development and compilation configurations, and target development language syntax configurations into the first configuration file. Based on the npm package and the first configuration file, the startup, development, and build methods of the base application and the sub-application are unified; A second unification module is configured to add a second configuration file to the unified launcher, write a common processing method, sub-application export specifications, syntax verification rules, and formatting rules into the second configuration file, and unify the target processing methods, management methods, and specifications of the base application and the sub-application based on the npm package and the second configuration file; a third unification module, configured to add a unified entry configuration file, an application entry file, and an HTML unified template file to the unified launcher, import the application entry file into the unified entry configuration file to obtain an imported file, and unify the common capabilities of the base application and the sub-application through the imported file and the HTML unified template file; The fourth unification module is used to write public dependencies into the new public project description file of the unified launcher, collect third-party dependencies with similar functions in the target project description files of the base application and the sub-application, add corresponding similar dependencies to the public project description file based on the third-party dependencies, and complete the unification of the dependencies of the base application and the sub-application according to the newly added public project description file.

9. An electronic device, characterized in that: include: Memory, used to store computer programs; A processor is configured to execute the computer program to implement the method for unifying the content of a base application and a sub-application as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that Used to store a computer program; wherein, when the computer program is executed by a processor, the method for unifying the content of a base application and a sub-application as described in any one of claims 1 to 7 is implemented.

Images