Content unification method and device for base application and sub-application, equipment and medium

Abstract

The invention discloses a content unification method and device for a base application and a sub-application, equipment and a medium, and relates to the technical field of computers, and the content unification method comprises the following steps: writing public startup and construction configuration, public development and compilation configuration and target development language grammar configuration into a first configuration file in a unified starter, unification of the base application and the sub-application is completed based on the npm package and the first configuration file; writing a common processing method, a sub-application export specification, a grammar verification rule and a formatting rule into the second configuration file, and completing unification based on the npm package and the second configuration file; a unified entry configuration file, an application entry file and a unified template file are newly added, the application entry file is introduced, and unification is completed through the introduced file and the unified template file; and writing the public dependency into the public project description file, newly adding similar dependency in the public project description file according to the third-party dependency, and completing unification according to the newly added public project description file. And internal unification of applications is realized.

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 contents of a base application and a sub-application. Background Art

[0002] As businesses pile up, teams and personnel increase, monolithic applications evolve into "monolith applications", which make them difficult to maintain and develop, thus introducing the micro-frontend architecture. Micro-frontend refers to splitting a large front-end application into multiple independent small sub-applications, which are independently developed, maintained, run and deployed. It is more flexible in development and maintenance, and can be better compatible with old applications. Micro-frontend based on npm (Node Package Manager) means maintaining these split independent small sub-applications as npm packages, and providing a base application to introduce these sub-application npm packages through npm, and uniformly register and maintain versions. As business sub-applications gradually increase and become more complex, this npm-based micro-frontend architecture has the following problems:

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

[0004] 2. The routing processing methods, network request methods, state management, internationalization processing, export specifications, configuration file specifications, syntax verification specifications, and formatting specifications of each sub-application are inconsistent, resulting in similar requirements but inconsistent implementation results, or repeated implementation of the same function. This increases the burden on personnel development, understanding, and maintenance, and makes the sub-applications less efficient and standardized.

[0005] 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 compilation time, large build product size, and unsmooth application use.

[0006] Therefore, how to achieve the content unification of base applications and sub-applications 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 a base application and a sub-application, which can unify the content of the base application and the sub-application in a micro-frontend mode through a unified launcher npm package. The specific scheme 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 including a unified launcher, add a first configuration file to the unified launcher, write corresponding public launch and build configurations, public development and compilation configurations, and target development language syntax configurations into the first configuration file, and unify the launch, development, and build methods of the base application and the sub-application based on the npm package and the first configuration file;

[0010] Add a second configuration file in the unified launcher, write a common processing method, a sub-application export specification, a syntax verification rule, and a formatting rule into the second configuration file, and unify 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;

[0011] 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 an imported file, and completing the unification of 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, 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:

[0014] Export the file declaration corresponding to the first configuration file, introduce the npm package in the base application and the sub-application, and add a vue framework configuration file to the base application and the sub-application respectively, and use the configuration merging capability of the vue framework configuration file to merge and unify the common startup and build configuration in the first configuration file and the custom configuration of each application;

[0015] Adding compilation configuration files to the base application and the sub-application respectively, and integrating the common development and compilation configuration in the first configuration file and the customized configuration of each application itself by using the inheritance capability of the compilation configuration file;

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

[0017] The startup mode, development mode and construction mode of the base application and the sub-application are unified.

[0018] Optionally, 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:

[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 testing framework syntax specification configuration file and a code formatting configuration file; wherein the public processing method is written into the public processing configuration file; the sub-application export specification is written into the export configuration file; the syntax verification rules are written into the basic syntax specification configuration file, the vue framework syntax specification configuration file, the target syntax specification configuration file and the jest unit testing framework syntax specification configuration file; and the formatting rules are written into the code formatting configuration file.

[0021] Optionally, 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:

[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 determining the configuration corresponding to the target formatting configuration file by using the code formatting configuration file in the second 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, 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:

[0028] Mounting the html unified template file as a unified file based on the html mount 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 a list of sub-applications that need 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 completing the unification of 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, so as 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 resolution 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 contents of a base application and a sub-application, including:

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

[0038] A second unified module is used to add a second configuration file to the unified launcher, and write a common processing method, a sub-application export specification, a syntax verification rule, and a formatting rule into the second configuration file, so as to unify the target processing mode, management mode, and specification of the base application and the sub-application based on the npm package and the second configuration file;

[0039] A third unified module is used to 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 an 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;

[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 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.

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

[0042] Memory, used to store computer programs;

[0043] The processor is used to execute the computer program to implement the method for unifying the contents of the base application and the sub-application as described above.

[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 contents of a base application and a sub-application as described above is implemented.

[0045] When unifying the contents of the base application and the 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 configurations, public development and compilation configurations, and target development language syntax configurations 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; 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 in 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; finally, write common 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. 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 obtain a consistent operating environment when developing sub-applications, discover problems early, optimize the development experience, reduce developers' understanding and maintenance burden, and make the integration logic more standardized. At the same time, it unifies public dependencies, makes application development startup faster, effectively shortens compilation time, reduces the size of build products, and makes internal use and loading of production applications smoother. 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 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 only embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying creative work.

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

[0048] Figure 2 A schematic diagram of a method and device structure for unifying the contents of a base application and a sub-application 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 be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. 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 creative work 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 functions such as menu navigation, top navigation, tabs, watermarks, etc. exist in the base application but not in the sub-application itself, the sub-application cannot obtain the same environment as when the base application is actually running during development.

[0053] 2. The routing processing methods, network request methods, state management, internationalization processing, export specifications, configuration file specifications, syntax verification specifications, and formatting specifications of each sub-application are inconsistent, resulting in similar requirements but inconsistent implementation results, or repeated implementation of the same function. This increases the burden on personnel development, understanding, and maintenance, and makes the 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 compilation time, large build product size, and unsmooth application use. In order to solve the above technical problems, the present 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 mode through a unified launcher npm package.

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

[0056] Step S11, build an npm package including 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 the sub-application based on the npm package and the first configuration file.

[0057] In this embodiment, the present application first builds an npm package including a unified launcher, and then adds a first configuration file to the unified launcher, or in other words, adds a configuration file to the A module of the unified launcher. At the same time, the first configuration file includes several sub-files, and then writes the public startup and build configurations in the newly added configuration sub-file A1, such as adding a hard-source (cache) plug-in for caching startup compilation and build compilation, adding compression and terser (file compression and code compression) plug-ins for compressing build products, adding html (HTML (Hyper Text Markup Language, Hypertext Markup Language) file mounting) plug-in and copy (copy) plug-in for unified public mounted html (HTML file), and adding a custom hmr (Hot Module Replacement, hot module replacement) plug-in for hot update of reverse proxy, etc. In the newly added configuration sub-file A2 in the A module, add public development and compilation configurations to handle the development compilation and build compilation process, such as adding the official preset configuration parameters of the vue framework, adding optional chain plug-ins, adding on-demand introduction plug-ins, etc. At the same time, in the newly added configuration sub-file A3 in the A module, a common typescript development language syntax configuration is added to parse the 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 the 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; the startup method, development method, and build method of the base application and the sub-application are unified. Specifically, in this process, the A1, A2, and A3 files in the A module are declared and exported, and the newly added unified launcher npm package is introduced into the base application and the sub-application. Then, the base application and the sub-application respectively add the vue framework configuration file, and use the official configuration merging capability to merge the public configuration in the A1 configuration file in the unified launcher A module and the custom configuration of each application itself; the base application and the sub-application respectively add the babel (compilation) configuration file, and use the inheritance capability of the configuration file to extend the integration of the public configuration in the A2 configuration file in the unified launcher A module and the custom configuration of each application itself; the base application and the sub-application respectively add the typescript language configuration file, and use the inheritance capability of the configuration file to extend the integration of the public configuration in the A3 configuration file in the unified launcher A module and the custom configuration of each application itself. So far, the base application and the sub-application have been unified in the startup method, development method, and construction method. It should also be pointed out that the language framework of this application includes but is not limited to the vue framework. Whether it is vue, react, or other frameworks, as long as they are maintained and managed based on the npm method, this application can be used.

[0059] Step S12: Add a second configuration file in the unified launcher, and write a common processing method, sub-application export specification, syntax verification rules and formatting rules into the second configuration file, and complete the unification of 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.

[0060] In this embodiment, a second configuration file is added in 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 public processing configuration file B1 is added to module B to process routing, network requests, basic state management, and internationalization; vue-router (a routing plug-in under the vue framework) is introduced and a unified routing processing method is added, and synchronous and asynchronous routing processing is supported; axios (a network request plug-in under the vue framework) is introduced and a unified network request processing method is added, and interface interceptor functions are supported; vuex (a basic state management plug-in under the vue framework) is introduced and unified basic state management content is added, and batch asynchronous addition of state management sub-modules is supported; vue-i18n (an internationalization plug-in under the vue framework) is introduced and a unified internationalization processing method is added, and internationalization configuration files of all registered base applications and sub-applications are uniformly configured. In addition, an export configuration file B2 is added to module B to unify the export specifications of sub-applications. The specifications stipulate that the optional fields for sub-application export are routing fields, internationalization fields, and state management fields, and three different life cycles of customized global pre-, asynchronous processing, and global post- are optional. The sub-application code field is optional for the base application to determine whether to load this sub-application. In module B, add a new code standard configuration folder B3 to unify syntax verification standards and formatting standards, add a 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, and write the corresponding syntax verification standard configuration in turn; add a formatting configuration file and write a unified code formatting configuration.

[0061] Then, export the above-mentioned files B1, B2 and all files under folder B3 in module B, and introduce the newly added unified launcher npm package in the base application and sub-application respectively. Then, based on the npm package and the second configuration file, complete the unification of the target processing method, management method and specification of the base application and the sub-application. In this process, export all files corresponding to the second configuration file, introduce the npm package in the base application and the sub-application; modify the implementation methods of routing processing, network request processing, basic state management and internationalization processing in the base application and the sub-application based on the common processing configuration file; transform the export entry in each application according to the export configuration file; add syntax verification configuration files in the base application and the sub-application respectively, use the inheritance ability of the syntax verification configuration file and the current framework and development language to integrate the syntax verification rules, and add target formatting configuration files in the base application and the sub-application respectively, and use 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 routing processing methods, network request processing methods, basic state management methods, internationalization processing methods, export specifications, syntax verification specifications and formatting specifications of the base application and the sub-application.

[0062] Step S13, adding a unified entry configuration file, an application entry file and an html unified template file in 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.

[0063] In this embodiment, the present application adds a unified entry configuration file, an application entry file, and an html unified template file in the unified launcher, that is, a unified entry configuration file C1 is added to the C module of the unified launcher 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 file; 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 base application and the sub-application's public capabilities 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 file; 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 base application and the sub-application's public capabilities including menu navigation, top navigation, tabs, and watermarks are unified.

[0064] Step S14, write common dependencies into the newly added common 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 common 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 common project description file.

[0065] In this embodiment, the present application adds a public project description file D1 in the D module of the unified launcher, writes the public dependencies of the base application and the sub-application in it and upgrades these dependencies to the latest available version. Most of these public dependencies are related to the vue framework, compilation, code specification, style, and construction. Then collect third-party dependencies with similar functions in the project description files of the base application and the sub-application, such as drag plug-ins, comparison plug-ins, clipboard plug-ins, etc., unify the one with the largest functional range in the similar dependencies, and modify the places where other similar dependencies with fewer functions are used, and unify them to use the dependency with the largest functional range. Add these unified similar dependencies in the newly added D1 configuration file. Remove the dependencies that already exist in the D module D1 configuration file in the project description files of the base application and the sub-application respectively, so that these dependencies directly use the unified version in D1. At the same time, since the plug-in main directory read by the relevant plug-in package of the vue framework scaffold by default is the main directory of the current application, if no modification is made, it will cause the application to start abnormally, so it is necessary to add the parsed path field used to describe the plug-in in the project description files of the base application and the sub-application respectively, and point 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, this application unifies the various environments and specifications, which can effectively reduce the difficulty for developers to understand and maintain the micro-frontend technology framework, allowing developers to focus more on the development of each sub-application business, reducing the development and maintenance burden, and making 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 startup speed of application development, reduces the time spent on building and compiling, reduces the size of the built product, optimizes the loading speed and switching speed within the application, and gives users a better experience. At the same time, with iteration, the launcher in this unified method can be upgraded and expanded, and after the upgrade, the base application and the sub-application can be adapted synchronously.

[0066] To summarize, 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 configurations, public development and compilation configurations, and target development language syntax configurations into 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 public 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 public 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 public 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 obtain a consistent operating environment when developing sub-applications, discover problems early, optimize the development experience, reduce developers' understanding and maintenance burden, and make the integration logic more standardized. At the same time, it unifies public dependencies, makes application development startup faster, effectively shortens compilation time, reduces the size of build products, and makes internal use and loading of production applications smoother.

[0067] Based on the previous embodiment, it can be known that the present application can unify the target processing mode, management mode and specification of the base application and the sub-application based on the npm package and the second configuration file. Next, the specific process of realizing the unification of the target processing mode, management mode and specification of the base application and the sub-application will be described in detail.

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

[0069] The routing processing, network request processing, basic state management, and internationalization processing in the base application and sub-application are unified and 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 according to the export configuration file B2 of module B in the unified launcher, and the modified routing processing, network request processing, basic state management, and internationalization processing files are introduced.

[0070] Finally, the base application and the sub-application add eslint (syntax check) configuration files respectively, use the inheritance ability of the configuration files to extend and integrate the different public check rules provided by the unified launcher B module code specification configuration folder B3 according to the framework and development language used by the project, and support sub-application custom rules; add prettier (formatting) configuration files respectively, and directly introduce the formatting configuration files in the B3 folder of the unified launcher B module as the configuration of this file. So far, the base application and the sub-application have been unified in routing processing methods, network request processing methods, basic state management methods, internationalization processing methods, export specifications, syntax check specifications, and formatting specifications.

[0071] In this way, unified routing processing methods, network request methods, state management, internationalization processing, export specifications, configuration file specifications, syntax verification specifications, and formatting specifications are used. This allows personnel to obtain a consistent operating environment when developing sub-applications, discover problems early, optimize the development experience, reduce developers' understanding and maintenance burdens, and make integration logic more standardized.

[0072] See also Figure 2 As shown, an embodiment of the present invention discloses a device for unifying the contents of a base application and a sub-application, including:

[0073] A first unified module 11 is used to build an npm package including a unified launcher, add a first configuration file in the unified launcher, write corresponding public startup and build configurations, public development and compilation configurations, and target development language syntax configurations in the first configuration file, and unify the startup, development, and build methods 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 used to add a second configuration file to the unified launcher, and write a common processing method, a sub-application export specification, a syntax verification rule, and a formatting rule into the second configuration file, so as to unify 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;

[0075] A third unification module 13 is used to 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 an 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;

[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 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. When developers develop sub-applications, they can obtain a consistent operating environment, discover problems early, and optimize the development experience, reduce the understanding and maintenance burden of developers, 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 add a 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 and unify the common startup and build configuration in the first configuration file and the custom configuration of each application itself; add a compilation configuration file in the base application and the sub-application respectively, and use the inheritance capability of the compilation configuration file to integrate the common development and compilation configuration in the first configuration file and the custom configuration of each application itself; add a target language configuration file in the base application and the sub-application respectively, and 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 custom configuration of each application itself; complete the unification of the startup mode, development mode and construction mode of the base application and the sub-application.

[0079] In some specific embodiments, the device can also be used to introduce a routing plug-in under the Vue framework, a network request plug-in under the Vue framework, a basic state management plug-in under the Vue framework, and an 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 files corresponding to the second configuration file, introduce the npm package in the base application and the sub-application; modify the implementation methods of routing processing, network request processing, basic state management and internationalization processing in the base application and the sub-application based on the common processing configuration file; transform the export entry in each of the self-applications according to the export configuration file; add a syntax verification configuration file to the base application and the sub-application respectively, integrate the syntax verification rules by using the inheritance ability of the syntax verification configuration file and the currently used framework and development language, and add a target formatting configuration file to the base application and the sub-application respectively, and determine the configuration corresponding to the target formatting configuration file by using the code formatting configuration file in the second configuration file; complete the unification of the routing processing method, network request processing method, basic state management method, internationalization processing method, export specification, syntax verification specification and formatting specification of the base application and the sub-application.

[0081] In some specific embodiments, the third unified module 13 can be specifically used to mount the html unified template file as a unified one based on the html mount plug-in corresponding to the public startup and build configuration in the first configuration file; add a unified entry file to the base application and the sub-application respectively, introduce the imported file into the unified entry file, and add a module field for representing the list of sub-applications that need to be registered; complete the unification of the common capabilities of the base application and the sub-application including menu navigation, top navigation, tabs and watermarks.

[0082] In some specific embodiments, the third unification module 13 can be specifically used to 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 in the third-party dependencies to obtain the target similar dependencies after unifying the functional scope; add the target similar dependencies to 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; add a parsed path field for describing the plug-in in the target project description file to complete the unification of the common dependencies and similar dependencies of the base application and the sub-application.

[0083] Furthermore, the present application also discloses an electronic device. Figure 3 This is a structural diagram of an electronic device 20 according to an exemplary embodiment. The content in the diagram cannot be regarded as any limitation on the scope of use of the present application.

[0084] Figure 3 A schematic diagram of the structure of an electronic device 20 provided in an embodiment of the present application. The electronic device 20 may 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 used to store a computer program, which is loaded and executed by the processor 21 to implement the relevant steps in the method for unifying the content of the base application and the sub-application disclosed in any of the aforementioned embodiments. In addition, the electronic device 20 in this embodiment may specifically be an electronic computer.

[0085] In this embodiment, the power supply 23 is used 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 the external device, and the communication protocol it follows is any communication protocol that can be applied to the technical solution of the present application, and is not specifically limited here; the input and output interface 25 is used to obtain external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs and is not specifically limited here.

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

[0087] The operating system 221 is used to manage and control the hardware devices and computer programs 222 on the electronic device 20, and may be Windows Server, Netware, Unix, Linux, etc. In addition to the computer program that can be used to complete the method for unifying the contents 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 may further include computer programs that can be used to complete other specific tasks.

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

[0089] In this specification, each embodiment is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part.

[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 composition and steps of each example have been generally described in the above description according to function. 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 to be beyond the scope of this application.

[0091] The steps of the method or algorithm 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 a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0092] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0093] The technical solution provided by the present application is introduced in detail above. Specific examples are used in this article to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea. At the same time, for general technical personnel in this field, according to the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A method for unifying the contents of a base application and a sub-application, characterized in that: include: Build an npm package including a unified launcher, add a first configuration file to the unified launcher, write corresponding public launch and build configurations, public development and compilation configurations, and target development language syntax configurations into the first configuration file, and unify the launch, development, and build methods of the base application and the sub-application based on the npm package and the first configuration file; Add a second configuration file in the unified launcher, write a common processing method, a sub-application export specification, a syntax verification rule, and a formatting rule into the second configuration file, and unify 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; 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 an imported file, and completing the unification of 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, introduce the npm package in the base application and the sub-application, and add a vue framework configuration file to the base application and the sub-application respectively, and use the configuration merging capability of the vue framework configuration file to merge and unify the common startup and build configuration in the first configuration file and the custom configuration of each application; Adding compilation configuration files to the base application and the sub-application respectively, and integrating the common development and compilation configuration in the first configuration file and the customized configuration of each application itself by using the inheritance capability of the compilation configuration file; Adding target language configuration files to the base application and the sub-application respectively, and integrating the target development language syntax configuration in the first configuration file with the custom configuration of each application itself by using the inheritance capability of the target language configuration file; The startup mode, development mode and construction mode of the base application and the sub-application are unified.

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 checking rule and the formatting rule into the second configuration file also 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, characterized in that: 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 the target processing mode, management mode, and specification 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 self-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 determining the configuration corresponding to the target formatting configuration file by using the code formatting configuration file in the second 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 file based on the html mount 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, introduce the imported file into the unified entry file, and add a module field for indicating a 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.

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 dependency 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, so as 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 resolution 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 including a unified launcher, add a first configuration file to the unified launcher, write corresponding public startup and build configurations, public development and compilation configurations, and target development language syntax configurations into the first configuration file, and unify the startup, development, and build methods of the base application and the sub-application based on the npm package and the first configuration file; A second unified module is used to add a second configuration file to the unified launcher, and write a common processing method, a sub-application export specification, a syntax verification rule, and a formatting rule into the second configuration file, so as to unify the target processing mode, management mode, and specification of the base application and the sub-application based on the npm package and the second configuration file; A third unified module is used to 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 an 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; 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 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.

9. An electronic device, characterized in that: include: Memory, used to store computer programs; A processor is used 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 contents of a base application and a sub-application as described in any one of claims 1 to 7 is implemented.

Images