CN-115309398-B - Multi-application micro front-end implementation method based on software development framework derivation

CN115309398BCN 115309398 BCN115309398 BCN 115309398BCN-115309398-B

Abstract

The invention relates to the technical field of micro front end development and provides a multi-application micro front end implementation method based on a software development framework, which comprises the following steps of A, splitting an application according to the requirement of engineering management to form a base disc application and a sub-application; the base disc application is a bottom layer framework of the system, and comprises an application framework of basic functions; the sub-application can be specifically divided according to industries, a step B of establishing a common UI component library and a tool class library, a step C of using module expansion to rewrite N frame core logic to finish qiankun access requirements on the sub-application, and a step D of creating scaffold engineering for each sub-application. The invention can realize the reusability of the base disc among projects, reduce the maintenance cost and improve the development efficiency.

Inventors

XU HONGHAO
XU HONGDA
HUANG ZHIDAO
ZHANG RENQING

Assignees

大连源动力科技有限公司

Dates

Publication Date: 20260508
Application Date: 20220815

Claims (6)

1. The multi-application micro front-end implementation method based on the software development framework is characterized by comprising the following steps of: Step A, splitting an application according to the requirement of engineering management to form a base disc application and a sub-application, wherein the base disc application is a bottom layer framework of a system, and the base disc application comprises an application framework of a basic function; Step B, establishing a common UI component library and a tool class library; and step C, rewriting N frame core logic by using module expansion to complete qiankun access requirements for sub-applications, wherein the step C comprises steps C1 to C3: step C1, rewriting a client side js template file under an N frame; step C2, defining an instance and registering a plug-in; Step C3, writing a client.js module file; the step C1 comprises the steps of C1-1 to C1-8: Step C1-1, exposing bootstrap, mount, update, unmount life cycle functions required by the qiankun framework in the case of qiankun, otherwise, retaining original logic and performing picture rendering; Step C1-2, in qiankun cases, does not change webpack _public_path value; step C1-3, in qiankun mode, when the app is created, the data parameters transmitted by the base disc application need to be set into the global configuration variables; Step C1-4, when the asynchronous component is loaded, in qiankun mode, if the route jump is not the path of the micro application, not performing any processing, and skipping to continue executing the subsequent route jump logic; step C1-5, in qiankun mode, if the route jump is not the path of the micro application, not doing any processing, skipping to continue executing the subsequent route jump logic; Step C1-6, when the component is normalized, in qiankun mode, if the route jump is the path of the micro application, then executing normalized logic operation; c1-7, when the mountApp is in qiankun mode, the mounting point of the sub-application needs to be changed, and in non-qiankun mode, the original logic is kept; step C1-8, defining a global app instance so that the app instance can be accessed in each function logic; the step C3 comprises the steps of C3-1 to C3-6: step C3-1, receiving external definition parameters; Step C3-2, adding a template plug-in for the module; step C3-3, expanding webpack to configure and output umd or a custom library; step C3-4, adding a template file for the module; Step C3-5, adding a hook function listen, and setting HTML ENTRY absolute paths so that the sub-application can be correctly acquired; Step C3-6, adding a hook function render, namely route, setting Access-Control-alloy-Origin for the compiled file; and D, creating a scaffold engineering for each sub-application.
2. The method for implementing the multi-application micro front-end based on the software development framework according to claim 1, wherein the step a includes the following steps A1 to A5: step A1, creating basic functions of a base disk application; step A2, route management is carried out; Step A3, respectively establishing communication mechanisms of the base disc application and the sub-application; step A4, managing each page by using the tag page; And step A5, establishing a component cache dynamic management mechanism.
3. The method for implementing the multi-application micro front-end based on the software development framework according to claim 2, wherein the step A2 includes the following steps A2-1 to A2-2: Step A2-1, carrying out page level transformation of a system; step A2-1-1, adding dynamic configuration management to the micro-application in the main application, and adding/modifying/deleting configuration information of the sub-application according to the need; step A2-1-2, carrying out menu definition configuration; Step A2-2, carrying out frame level transformation; step A2-2-1, adding a routing plug-in; And step A2-2-2, loading and unloading processing is carried out on the base disc application and the sub-application.
4. The software development framework-derived multi-application micro front end implementation method of claim 1, wherein in step B, the UI component library and tool class library are managed using npm common packages.
5. The method for implementing the multi-application micro front-end based on the software development framework according to claim 4, wherein the step B includes the following steps B1 to B2: step B1, a UI component library is created according to the following steps B1-1 to B1-5; step B1-1, building an assembly library project based on a scaffold, and firstly realizing and running through a test program assembly; Step B1-2, extracting all UI components into the project, and perfecting the design, the component template and the style of the component api; step B1-3, packaging the js code of the component library by using webpack and packaging the style code by using gulp; Step B1-4, publishing the component library to npm for installation and use of the base disc application and the sub-application; step B1-5, building a document site of an assembly library, wherein the document site comprises interface definition, a use scene and a detailed case of each assembly; step B2, creating a tool class library according to the following steps B2-1 to B2-5; Step B2-1, creating an initial project based on rollup; Step B2-2, extracting all tool libraries in the original system into the project, and splitting the module; Step B2-3, using rollup packaging tool class libraries; step B2-4, releasing a tool class library to npm for installation and use of the base disc application and the sub-application; And B2-5, building a tool class library document site.
6. The method for implementing the multi-application micro front-end based on the software development framework according to claim 1, wherein the step D includes the following steps D1 to D2: Step D1, establishing a sub-application template project based on the N framework through the following steps D1-1 to D1-4: step D1-1, a basic directory structure used under an N framework is established; step D1-2, integrating various front-end UI component libraries and testing an automatic framework library in the engineering; D1-3, defining various template files which can generate different contents based on different settings; step D1-4, establishing a common processing logic needed to be done in a series of micro applications including the access qiankun; d1-4-1, adding an internal logic implementation file for exporting qiankun various functions in the life cycle; D1-4-2, adding introduction of bridge engineering, introduction of UI component library and tool library into configuration file of N frame; D1-4-3, introducing bridge engineering, a UI component library and a tool class library into a package json; Step D1-4-4, common processing of the component cache include and exclude; step D1-4-5, adding logic processing for data communication with the main application; Step D1-4-6, adding a plug-in file for route management; Step D2, establishing creation sub-application engineering through the following steps D2-1 to D2-2: step D2-1, writing an entry file cli.js; Step D2-1-1, receiving various parameters input in a command line and checking the rationality of the parameters; Step D2-1-2, initializing a cac object; step D2-1-3, registering command and option value for the cac; d2-1-4, acquiring command line parameters, transmitting the command line parameters into a sao library, and configuring projects and generating project files; step D2-2, writing a template processing file saofile. Step D2-2-1, preparing a template; Step D2-2-1-1, preparing an engineering template of the N frame, wherein the engineering template comprises all files capable of running the N frame and template files capable of being dynamically configured; step D2-2-1-2, preparing a template file of a third party frame; Step D2-2-1-3, preparing a logic processing file of the base disk docking qianku and a template file capable of being dynamically configured; step D2-2, setting a configuration file of questions and answers; Step D2-2-3, adding add, move, modify, remove operations on various template files in step D2-2-1 in action according to answers selected by a user in cli; And D2-2-4, dynamically modifying all template files according to the execution sequence and the instruction which are defined in the action, and generating the completed project.

Description

Multi-application micro front-end implementation method based on software development framework derivation Technical Field The invention relates to the technical field of micro front end development, in particular to a multi-application micro front end implementation method based on software development framework derivation. Background The micro front end is a technical means and a method strategy for a plurality of teams to jointly construct a modern web application in a mode of independent release function. The micro front end uses the architecture concept of micro services to split a huge front end application into a plurality of independent and flexible small applications, each application can be independently developed, independently operated and independently deployed, and the small applications are combined into a complete application. The micro front end not only can integrate a plurality of projects into a whole, but also can reduce the coupling between the projects, improves the project expansibility, and compared with a whole front end warehouse, the front end warehouse under the micro front end structure tends to be smaller and more flexible. Currently, vue, react, angular-based single-page application development mode has become the mainstream in the industry. The techniques can be used to quickly build a new application that responds quickly to the market, benefiting from their rich ecology. With the continuous development of business, due to the strong coupling among application modules, the application starts to become huge and bulkier, and becomes a huge stone application gradually, so that the project is difficult to maintain, and a lot of time is required to be spent for constructing each time of development and online new requirements, and the development efficiency and experience of the developer are adversely affected. The development method commonly adopted at present has the following problems: 1. When a new service is constructed, a part of base disc codes is copied as a scaffold engineering, and on the basis, a little modification is carried out to cater to the new service, and then the service development can be carried out. This mode has long been done, which can lead to difficult maintenance of the base code, and after a failure in one place, all the base versions of the business have been modified. And the business scale is large and can fall into a huge stone application. Therefore, each new service needs to repeat the previous operation and modification, and the development and maintenance costs are high. 2. Typically log-in from the system to the various basic maintenance pages that make up a system, essentially a complete set of traffic flows. Any service can be developed at an upper level based on this set of traffic flows. However, a framework such as vue is easy to share components in one project, but it is difficult to realize a shared module between different projects. Therefore, the base code is not reusable, and multiplexing of the common modules is difficult to achieve between projects based on the development mode of vue framework. 3. The N-frame does not support the open-source micro-front-end frame qiankun official, and the micro-front-end concept cannot be well implemented. It is desirable to address the problems faced in the development process by introducing micro front-end technology. Disclosure of Invention The invention mainly solves the problems of high development cost, difficult code maintenance, incapability of realizing sharing among projects and the like in the prior art, and provides a multi-application micro-front-end implementation method based on the derivation of a software development framework, so as to achieve the purposes of realizing the reusability of a base disc among projects, improving the development efficiency and reducing the maintenance cost. The invention provides a multi-application micro front-end implementation method based on a software development framework, which comprises the following steps: Step A, splitting an application according to the requirement of engineering management to form a base disc application and a sub-application, wherein the base disc application is a bottom layer framework of a system, and the base disc application comprises an application framework of a basic function; Step B, establishing a common UI component library and a tool class library; Step C, using module expansion to rewrite N frame core logic to complete qiankun access requirements for sub-applications; and D, creating a scaffold engineering for each sub-application. Further, the step a includes the following steps A1 to A5: step A1, creating basic functions of a base disk application; step A2, route management is carried out; Step A3, respectively establishing communication mechanisms of the base disc application and the sub-application; step A4, managing each page by using the tag page; And step A5, establishing a component cache dynamic ma