Subcontracting deployment method, system and computer equipment for web front-end projects

Abstract

The present application is applicable to the field of web front-end technology, and provides a sub-package deployment method, system and computer equipment for a web front-end project, including: obtaining a module sub-project, and generating a module sub-project project according to the module sub-project, wherein the module sub-project project includes a main project and at least one sub-project; obtaining a front-end routing table file of the module sub-project, and packaging the front-end routing table file of the module sub-project as an entry file of the sub-project; introducing the entry file packaged by the sub-project into the main project, wherein the main project includes a routing configuration file; modifying the routing configuration file of the main project according to the entry file packaged by the sub-project to obtain a target routing configuration file; and sub-packaging and deploying the sub-project according to the target routing configuration file. The present application can improve development and deployment efficiency and enhance the stability of production applications.

Description

Technical Field

[0001] The present application relates to the field of web front-end technology, and in particular to a method, system and computer device for subcontracting and deploying a web front-end project. Background Art

[0002] In web front-end single-page application projects, as the functions of the project increase, on the one hand, the amount of code that needs to be compiled increases, resulting in a slow compilation speed, affecting deployment and development efficiency; on the other hand, it causes an increase in the number of version releases, which is not conducive to version management and development collaboration of large-scale web front-end single-page application projects with many functions and large amounts of code (hereinafter referred to as large-scale web-SPA projects), and easily causes instability in production application functions.

[0003] To sum up, as the functions of the project increase, the deployment and development efficiency of the web front-end single-page application project is low, and the production application functions are unstable. Summary of the invention

[0004] The embodiments of the present application provide a method, system and computer device for subcontracting and deploying a web front-end project, which can solve the problems in the prior art that as the functions of the project increase, the deployment and development efficiency of the web front-end single-page application project is low and the production application functions are unstable.

[0005] In a first aspect, an embodiment of the present application provides a sub-package deployment method for a web front-end project, comprising:

[0006] Obtain a module subproject, and generate a module subproject project according to the module subproject, wherein the module subproject is a subproject extracted from the web front-end project, and the module subproject project includes a main project and at least one subproject;

[0007] Obtaining a front-end routing table file of the module sub-project, and packaging the front-end routing table file of the module sub-project as an entry file of the sub-project, wherein the front-end routing table file is used to maintain a mapping relationship between pages accessible to the module sub-project and routes;

[0008] Introducing the entry file packaged by the sub-project into the main project, wherein the main project includes a routing configuration file;

[0009] Modify the routing configuration file of the main project according to the entry file packaged by the sub-project to obtain the target routing configuration file;

[0010] The sub-projects are deployed in packages according to the target routing configuration file.

[0011] In a possible implementation of the first aspect, the step of introducing the entry file packaged by the sub-project into the main project includes:

[0012] Introduce the URL path information of the entry file packaged by the sub-project into the main project;

[0013] When the main project is run, the entry file packaged by the sub-project is downloaded according to the URL path information.

[0014] In a possible implementation of the first aspect, the step of performing sub-package deployment on the sub-project according to the target routing configuration file includes:

[0015] Using a specified packaging tool, package the sub-projects to generate a deployment package;

[0016] The deployment path is extracted from the target routing configuration file, and the deployment package is deployed to the web server according to the deployment path.

[0017] In a possible implementation of the first aspect, the step of performing sub-package deployment on the sub-project according to the target routing configuration file includes:

[0018] If the sub-project is to be deployed to multiple web servers, then obtain the domain name of the web server corresponding to the sub-project;

[0019] Add the domain name of the web server corresponding to the sub-project to the corresponding resource file of the sub-project to obtain the target sub-project;

[0020] Packaging the target sub-project to generate a deployment package;

[0021] The deployment path is extracted from the target routing configuration file, and the deployment package is deployed to the web server according to the deployment path.

[0022] In a possible implementation manner of the first aspect, the sub-package deployment method further includes processing global public components and frameworks, specifically including:

[0023] Get the framework type of the module sub-project;

[0024] Determine, according to the framework type, a mounting object of the global public component;

[0025] According to the type of the mounting object of the global public component, the global public component is mounted under the global object of the module sub-project.

[0026] In a second aspect, an embodiment of the present application provides a subcontracting deployment system for a web front-end project, including:

[0027] A project engineering acquisition unit, used to acquire a module sub-project and generate a module sub-project engineering according to the module sub-project, wherein the module sub-project is a sub-project extracted from a web front-end project and the module sub-project engineering includes a main project and at least one sub-project;

[0028] An entry file acquisition unit, used to acquire a front-end routing table file of the module sub-project, and package the front-end routing table file of the module sub-project as an entry file of the sub-project, wherein the front-end routing table file is used to maintain a mapping relationship between pages accessible to the module sub-project and routes;

[0029] An entry file introduction unit, used to introduce the entry file packaged by the sub-project into the main project, wherein the main project includes a routing configuration file;

[0030] A target file acquisition unit, used to modify the routing configuration file of the main project according to the entry file packaged by the sub-project, to obtain a target routing configuration file;

[0031] The sub-package deployment unit is used to perform sub-package deployment on the sub-project according to the target routing configuration file.

[0032] In a third aspect, an embodiment of the present application provides a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the sub-packaging deployment method for the web front-end project as described in the first aspect above is implemented.

[0033] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the sub-package deployment method of the web front-end project as described in the first aspect above is implemented.

[0034] In a fifth aspect, an embodiment of the present application provides a computer program product. When the computer program product is run on a computer device, the computer device executes the sub-packaging deployment method of the web front-end project as described in the first aspect above.

[0035] In the embodiment of the present application, by obtaining a module sub-project and generating a module sub-project project according to the module sub-project, the module sub-project is a sub-project extracted from a web front-end project, the module sub-project project includes a main project and at least one sub-project, and the main project and each module sub-project are decoupled by the sub-project, so that a plug-in configuration function sub-project can be realized, which can be more convenient for project function integration and maintenance, and then the front-end routing table file of the module sub-project is obtained, and the front-end routing table file of the module sub-project is packaged as the entry file of the sub-project, wherein the front-end routing table file is used to maintain the mapping relationship between the page accessible to the module sub-project and the route, and the entry file packaged by the sub-project is introduced into the main project, and the main project includes a routing configuration file, and the routing configuration file of the main project is modified according to the entry file packaged by the sub-project to obtain the target routing configuration file, and the sub-project is deployed in a sub-package according to the target routing configuration file. The present application can develop a large-scale web front-end single-page application project into module sub-projects, compile and deploy them in a sub-package, and reduce the size of the project packaged file at the same time, isolate the impact between project versions, improve development and deployment efficiency, and enhance the stability of production applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] In order to more clearly illustrate the technical solutions in the embodiments of the present application, 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 some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0037] Figure 1 It is a flowchart of the implementation of the sub-package deployment method of the web front-end project provided in the embodiment of the present application;

[0038] Figure 2 This is a specific implementation flow chart of the sub-package deployment method S105 for a web front-end project provided in an embodiment of the present application;

[0039] Figure 3 This is another specific implementation flow chart of the sub-package deployment method S105 for the web front-end project provided in the embodiment of the present application;

[0040] Figure 4 It is a specific implementation flow chart of the processing of the global common components and framework of the web project provided by the embodiment of the present application;

[0041] Figure 5 It is a structural block diagram of the subcontract deployment system of the web front-end project provided in the embodiment of the present application;

[0042] Figure 6It is a schematic diagram of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0043] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0044] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, wholes, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components and / or combinations thereof.

[0045] It should also be understood that the term “and / or” used in the specification and appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0046] As used in the specification and appended claims of this application, the term "if" can be interpreted as "when" or "uponce" or "in response to determining" or "in response to detecting", depending on the context. Similarly, the phrase "if it is determined" or "if [described condition or event] is detected" can be interpreted as meaning "uponce it is determined" or "in response to determining" or "uponce [described condition or event] is detected" or "in response to detecting [described condition or event]", depending on the context.

[0047] In addition, in the description of the present application specification and the appended claims, the terms "first", "second", "third", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.

[0048] References to "one embodiment" or "some embodiments" etc. described in the specification of this application mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Therefore, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0049] The web front-end project sub-packaging deployment method provided in the embodiment of the present application can be applied to smart terminals such as servers and ultra-mobile personal computers (UMPCs). The embodiment of the present application does not impose any restrictions on the specific types of smart terminals.

[0050] Figure 1 The implementation process of the sub-package deployment method of the web front-end project provided by the embodiment of the present application is shown, and the method flow includes steps S101 to S105. The specific implementation principle of each step is as follows:

[0051] S101: Obtain a module sub-project, and generate a module sub-project project according to the module sub-project, wherein the module sub-project is a sub-project extracted from a web front-end project, and the module sub-project project includes a main project and at least one sub-project.

[0052] In an embodiment of the present application, the module subprojects are extracted from the web-SPA project of the current web front-end respectively, and the module subproject projects that are independent of compilation are independently generated. Specifically, the module subprojects are extracted according to the actual business scenario or functional scenario. The module subproject includes at least one routing page. The module subproject project needs to be divided into a main project and several subprojects, and the main project serves as the entrance to the single-page application. Single-page application (SPA) is a professional term for web front-end development. It is different from the loading method of a web application corresponding to an HTML page of a uniform resource locator (URL). All URLs of a single-page application correspond to only one HTML page, and the display status change is controlled by the front-end routing. The main project is responsible for the initialization operation of the entire framework, the management of runtime routing and the management of common components during compilation, and is generally not responsible for the specific business function implementation. The subproject is responsible for the specific business function implementation.

[0053] S102: Obtain the front-end routing table file of the module sub-project, and package the front-end routing table file of the module sub-project as the entry file of the sub-project, wherein the front-end routing table file is used to maintain the mapping relationship between the pages accessible to the module sub-project and the routes.

[0054] In an embodiment of the present application, specifically, the sub-project is packaged with the front-end routing table file of the module sub-project as the entry file. The entry file of the sub-project is the entry file when the front-end project is compiled and packaged. The entry file is a routing file. The front-end compilation and packaging tool will analyze the code dependencies of the entire front-end project through this file, and build a code dependency tree for the front-end project. The front-end code is compiled and packaged based on this dependency tree. Existing packaging tools such as webpack, gulp, grunt, etc. on the web front end can be used for packaging. The front-end routing table file needs to maintain the relationship between all pages and routes accessible to the module sub-project. The front-end routing table file includes a one-to-one mapping relationship between all pages and routes accessible to the module sub-project.

[0055] S103: Introduce the entry file packaged by the sub-project into the main project, where the main project includes a routing configuration file.

[0056] Specifically, introducing the entry file packaged by the sub-project into the main project specifically refers to introducing the URL path information of the entry file packaged by the sub-project. When the main project is run, the browser will eventually download the entry file of the sub-project according to the URL path information.

[0057] In an embodiment of the present application, introducing the entry file packaged by the sub-project into the main project refers to indexing or inserting the entry file packaged by the sub-project into the main project. Different packaging tools have different introduction methods. For example, when using webpack to package the entry file, it is necessary to specify a path to a packaged entry file in the entry configuration item of the configuration file. The entry file packaged by the sub-project can be introduced into the main project in a variety of ways. One is to directly introduce it through the script tag in the index file of the web single-page application of the main project (that is, the file that the browser must first access when accessing the single-page application—index.html); the other is to request the content of the entry file from the server through an xhr request (get request), and then insert the content as a js script into the page dom tree through the browser's dom operation.

[0058] In an embodiment of the present application, when the main project is running on the browser side, the entry file packaged by the sub-project is loaded through the network protocol. The commonly used protocols for web-side development are http, https, websocket, etc. The sub-project is executed in the JavaScript execution environment of the browser. After execution, the routing configuration mapping table is mounted in the global object of the execution context of the current site of the browser. This needs to be coded in the compiled entry file of the sub-project, and the routing configuration is mounted on the global object of the execution context of the current site of the browser. The packaged code of the sub-project does not participate in the compilation process of the main project.

[0059] In the embodiment of the present application, because the web-SPA project must integrate the routing framework, the dynamic injection of routing is used to realize the association dependency between the main project and the module sub-project, so as to achieve the collaborative operation between the main project and the module sub-project that are independent of compilation. The so-called dynamic injection of routing is only relative to the compile time. The static injection of routing at compile time refers to writing the routing configuration in the js that needs to be compiled, and introducing it into the js file for routing initialization through the commonjs specification or es6 import; while the dynamic injection of routing is independent of the compile time, the routing configuration set of each module sub-project is mounted to the global variable of the host environment where js runs when js runs, such as the window variable of the js engine thread of the browser tab. During the operation of the main project, the routing configuration set of each module sub-project is obtained from the global variable, and then merged into its own routing configuration set for routing initialization.

[0060] Exemplarily, in an embodiment of the present application, the front-end routing table file of the module sub-project is used as the package entry of the module sub-project project. The front-end routing table file includes the mapping relationship between the path and the page, as well as some additional parameters of the routing status and jump. The additional parameters may vary in quantity, naming and value type according to the different routing frameworks. The entry file of the main project is different from the entry file of the sub-project. The entry file of the main project is an HTML file that can be rendered by the browser. The packaged entry file of the sub-project is obtained from the server through protocols such as http, https or websocket. Specifically, the url address information of the entry file of the sub-project is introduced through the script tag. When the main project is running, the browser will download the entry file to the main project for execution according to the url address information of the entry file of the sub-project.

[0061] S104: modifying the routing configuration file of the main project according to the entry file packaged by the sub-project to obtain a target routing configuration file.

[0062] Specifically, the route list of the sub-project is obtained from the return result after the entry file packaged by the sub-project is loaded and run. After the entry file of the sub-project is run in the main project, a route list set will be obtained, and the route table file of the sub-project is added to the route list set of the main project. The routing configuration file of the main project implements the configuration injection and integration of the sub-project projects through code. After the browser executes all sub-projects, it can complete the dynamic route injection after executing the routing configuration file of the main project. In an embodiment of the present application, the routing configuration object of the sub-project generated by the browser after executing the entry file of the sub-project is obtained from the global widnow object of the browser in the execution context of the website site, and the routing configuration object of the sub-project generated by the browser after executing the entry file of the sub-project is added to the routing configuration file of the main project.

[0063] Optionally, in an embodiment of the present application, when the routing configuration object of the sub-project is added to the routing configuration file of the main project, the uniqueness of the routing path and name is verified, so that the problem of duplication of routing paths and names caused by information asynchrony can be discovered early.

[0064] S105: Deploy the sub-projects in separate packages according to the target routing configuration file.

[0065] In an embodiment of the present application, front-end engineering packaging tools such as webpack and parcel are used to package the sub-projects separately, and the separately packaged sub-projects are deployed according to the target routing configuration file.

[0066] As an embodiment of the present application, Figure 2 The specific implementation process of step S105 of the sub-package deployment method for the web front-end project provided in the embodiment of the present application is shown, and is described in detail as follows:

[0067] A1: Use the specified packaging tool to package the sub-projects to generate a deployment package. Specifically, use front-end engineering packaging tools such as webpack and parcel to package the sub-projects. In the case of multiple sub-projects, use the packaging tool to package the sub-projects separately to generate multiple deployment packages.

[0068] A2: extracting the deployment path from the target routing configuration file, and deploying the deployment package to the web server according to the deployment path.

[0069] In an embodiment of the present application, the deployment package is deployed on the same web server. Specifically, the deployment path is extracted from the target routing configuration file, the root directory of the static web resources of the corresponding web server is determined, and the deployment package is placed in a file named after the name of the respective module sub-project or other names that can map the module sub-project. The file path of the file is used to identify and isolate the production code impact between module sub-projects. The deployment package includes a main deployment package and multiple sub-deployment packages. In order to facilitate the reference path configuration, the entry file of the main deployment package can be directly exposed in the root directory. In an embodiment of the present application, deployment on the same web server can avoid solving complex cross-domain problems, while reducing network communication and avoiding loss of web performance.

[0070] Optionally, as a test of this application, Figure 3 The specific implementation process of step S105 of the sub-package deployment method for a web front-end project provided by another embodiment of the present application is shown, and is described in detail as follows:

[0071] B1: If the sub-project is to be deployed to multiple web servers, then the domain names of the web servers corresponding to the sub-projects are obtained.

[0072] B2: Add the domain name of the web server corresponding to the sub-project to the corresponding resource file of the sub-project to obtain the target sub-project.

[0073] B3: Package the target sub-project and generate a deployment package. Specifically, before packaging, the sub-project adds the domain name of the corresponding web server to all resource files. For example, in webpack3, the publicPath attribute can be configured in the entry, and the publicPath attribute is set to the domain of the current debugging web server. For example, if the port of the server started by the current personal computer is 8881, then the publicPath is set to http: / / localhost:8881. If the module sub-project service is started on other computers, the publicPath of the module sub-project project needs to be configured to http: / / [IP address]:8881 (only accessible in the same network segment).

[0074] B4: extracting the deployment path from the target routing configuration file, and deploying the deployment package to the web server according to the deployment path.

[0075] In an embodiment of the present application, if a sub-project is to be deployed to multiple web servers, the domain name of the web server corresponding to each sub-project is added to the resource file of the sub-project to obtain the target sub-project, and then the deployment package generated by packaging the target sub-project is deployed to the corresponding web servers respectively.

[0076] Optionally, in an embodiment of the present application, if the deployment package must be deployed in multiple web servers respectively, the development environment needs to be debugged and configured in advance. Specifically, download the main project and the corresponding sub-projects to be developed to a personal computer. Run the compilation and debugging of the main project, and then run the sub-project compilation, wherein the compilation target directory of the sub-project should be configured under the web static resource directory of the main project debugging web server. However, due to some front-end construction tool configurations, the main project debugging server cannot be loaded from the corresponding directory of the computer hard disk. If web-dev-middleware is used as the middleware for development and debugging in wepack3, since web-dev-middleware compatible with webpack3 can only load compiled files from memory, and does not provide a configuration obtained from a specified directory on the hard disk, the construction of the development environment debugging configuration can only be completed by solving the cross-domain problem. Optionally, the step of the development environment debugging configuration also includes obtaining the URL address of the domain of the debugging web server run by the sub-project, and changing the entry file packaged by the sub-project introduced by the main project to the URL address of the domain of the debugging web server run by the sub-project.

[0077] Optionally, as an embodiment of the present application, the sub-package deployment method of the web front-end project further includes processing the global public components and framework of the web front-end project. Figure 4 As shown, the steps of processing the global common components and framework of the web project include:

[0078] C1: Get the framework type of the module sub-project.

[0079] C2: Determine the mounting object of the global public component according to the framework type.

[0080] C3: According to the mount object of the global public component, mount the global public component under the global object of the module subproject. Specifically, for the processing of global public components and frameworks, they are mounted under the global object of the project, and should not be compiled separately in the module subproject project. If vuejs and iview frameworks are used, the iview components need to be mounted under the vue object of the global project, and it is not appropriate for each module subproject to introduce vuejs and iview frameworks separately.

[0081] Optionally, in an embodiment of the present application, the planning principle for project version management of the web front-end project is that only one module sub-project code is allowed to be modified in each version branch, and multiple module sub-project codes are not allowed to be modified on one version branch, so as to better isolate the impact between project version branches and improve the stability of production application functions.

[0082] By obtaining a module subproject and generating a module subproject project according to the module subproject, the module subproject is a subproject extracted from a web front-end project, the module subproject project includes a main project and at least one subproject, and the main project and each module subproject are decoupled by the subproject, so that a plug-in configuration function subproject can be realized, which can facilitate the integration and maintenance of project functions, and then the front-end routing table file of the module subproject is obtained, and the front-end routing table file of the module subproject is packaged as the entry file of the subproject, wherein the front-end routing table file is used to maintain the mapping relationship between the page accessible to the module subproject and the route, and the entry file packaged by the subproject is introduced into the main project, and the main project includes a routing configuration file, and the routing configuration file of the main project is modified according to the entry file packaged by the subproject to obtain the target routing configuration file, and the subproject is subpackaged and deployed according to the target routing configuration file. This application can develop a large-scale web front-end single-page application project into module subprojects, compile and deploy them in packages, and reduce the size of the project packaged file, isolate the impact between project versions, improve development and deployment efficiency, and enhance the stability of production applications.

[0083] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0084] Corresponding to the sub-package deployment method of the web front-end project described in the above embodiment, Figure 5 A structural block diagram of a subcontracting deployment system for a web front-end project provided in an embodiment of the present application is shown. For ease of explanation, only the parts related to the embodiment of the present application are shown.

[0085] Reference Figure 5 The sub-package deployment system of the web front-end project includes: a project engineering acquisition unit 51, an entry file acquisition unit 52, an entry file introduction unit 53, a target file acquisition unit 54, and a sub-package deployment unit 55, wherein:

[0086] The project engineering acquisition unit 51 is used to acquire a module sub-project and generate a module sub-project engineering according to the module sub-project. The module sub-project is a sub-project extracted from a web front-end project. The module sub-project engineering includes a main project and at least one sub-project.

[0087] An entry file acquisition unit 52 is used to acquire a front-end routing table file of the module sub-project, and package the front-end routing table file of the module sub-project as an entry file of the sub-project, wherein the front-end routing table file is used to maintain a mapping relationship between pages accessible to the module sub-project and routes;

[0088] An entry file introduction unit 53, used to introduce the entry file packaged by the sub-project into the main project, wherein the main project includes a routing configuration file;

[0089] A target file acquisition unit 54 is used to modify the routing configuration file of the main project according to the entry file packaged by the sub-project to obtain a target routing configuration file;

[0090] The sub-package deployment unit 55 is used to perform sub-package deployment on the sub-project according to the target routing configuration file.

[0091] Optionally, the entry file introduction unit 53 includes:

[0092] An information import module, used to import the URL path information of the entry file packaged by the sub-project into the main project;

[0093] The file download module is used to download the packaged entry file of the sub-project according to the URL path information when running the main project.

[0094] Optionally, the sub-packaging deployment unit 55 includes:

[0095] A first packaging module, used to package the sub-projects to generate a deployment package using a specified packaging tool;

[0096] The first deployment module is used to extract the deployment path from the target routing configuration file and deploy the deployment package to the web server according to the deployment path.

[0097] Optionally, the sub-packaging deployment unit 55 includes:

[0098] A domain name information acquisition module, used to acquire the domain name of the web server corresponding to the sub-project if the sub-project is to be deployed to multiple web servers;

[0099] A target sub-project generation module, used to add the domain name of the web server corresponding to the sub-project to the corresponding resource file of the sub-project to obtain the target sub-project;

[0100] A second packaging module is used to package the target sub-project to generate a deployment package;

[0101] The second deployment module is used to extract the deployment path from the target routing configuration file and deploy the deployment package to the web server according to the deployment path.

[0102] Optionally, the sub-package deployment system further includes a common component processing unit 56 for processing the global common components of the module sub-projects. The common component processing unit 56 specifically includes:

[0103] Framework type acquisition module, used to obtain the framework type of the module sub-project;

[0104] An object type acquisition module, used to determine the mounting object of the global public component according to the framework type;

[0105] A component mounting module is used to mount the global public component under the global object of the module sub-project according to the mounting object of the global public component.

[0106] In an embodiment of the present application, by obtaining a module subproject and generating a module subproject project according to the module subproject, the module subproject is a subproject extracted from a web front-end project, the module subproject project includes a main project and at least one subproject, and the main project and each module subproject are decoupled by the subproject, so that a plug-in configuration function subproject can be realized, which can be more convenient for project function integration and maintenance, and then the front-end routing table file of the module subproject is obtained, and the front-end routing table file of the module subproject is packaged as the entry file of the subproject, wherein the front-end routing table file is used to maintain the mapping relationship between the page accessible to the module subproject and the route, and the entry file packaged by the subproject is introduced into the main project, and the main project includes a routing configuration file, and the routing configuration file of the main project is modified according to the entry file packaged by the subproject to obtain the target routing configuration file, and the subproject is deployed in a subpackage according to the target routing configuration file. The present application can develop a large-scale web front-end single-page application project into module subprojects, compile and deploy them in a subpackage, and reduce the size of the project packaged file at the same time, isolate the impact between project versions, improve development and deployment efficiency, and enhance the stability of production applications.

[0107] It should be noted that the information interaction, execution process, etc. between the above-mentioned devices / units are based on the same concept as the method embodiment of the present application. Their specific functions and technical effects can be found in the method embodiment part and will not be repeated here.

[0108] The present application also provides a computer-readable storage medium storing computer-readable instructions. When the computer-readable instructions are executed by a processor, the following is achieved: Figures 1 to 4Represents the steps of a sub-package deployment method for any web front-end project.

[0109] The embodiment of the present application also provides a computer device, including a memory, a processor, and computer-readable instructions stored in the memory and executable on the processor, wherein when the processor executes the computer-readable instructions, the following is achieved: Figures 1 to 4 Represents the steps of a sub-package deployment method for any web front-end project.

[0110] The present application also provides a computer program product, which, when executed on a server, enables the server to execute the following Figures 1 to 4 Represents the steps of a sub-package deployment method for any web front-end project.

[0111] Figure 6 Schematic diagram of a computer device provided by an embodiment of the present application. Figure 6 As shown, the computer device 6 of this embodiment includes: a processor 60, a memory 61, and a computer-readable instruction 62 stored in the memory 61 and executable on the processor 60. When the processor 60 executes the computer-readable instruction 62, the steps in the above-mentioned embodiments of the sub-package deployment method for each web front-end project are implemented, for example Figure 1 Alternatively, when the processor 60 executes the computer-readable instructions 62, the functions of each module / unit in the above-mentioned system embodiments are realized, for example, Figure 5 The functions of the units 51 to 55 are shown.

[0112] Exemplarily, the computer-readable instructions 62 may be divided into one or more modules / units, which are stored in the memory 61 and executed by the processor 60 to complete the present application. The one or more modules / units may be a series of computer-readable instruction segments capable of completing specific functions, which are used to describe the execution process of the computer-readable instructions 62 in the computer device 6.

[0113] The computer device 6 may be a server. The computer device 6 may include, but is not limited to, a processor 60 and a memory 61. Those skilled in the art will appreciate that Figure 6 It is only an example of the computer device 6 and does not constitute a limitation of the computer device 6. It may include more or fewer components than shown in the figure, or a combination of certain components, or different components. For example, the computer device 6 may also include input and output devices, network access devices, buses, etc.

[0114] The processor 60 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor, etc.

[0115] The memory 61 may be an internal storage unit of the computer device 6, such as a hard disk or memory of the computer device 6. The memory 61 may also be an external storage device of the computer device 6, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the computer device 6. Further, the memory 61 may also include both an internal storage unit and an external storage device of the computer device 6. The memory 61 is used to store the computer-readable instructions and other programs and data required by the computer device. The memory 61 may also be used to temporarily store data that has been output or is to be output.

[0116] It should be noted that the information interaction, execution process, etc. between the above-mentioned devices / units are based on the same concept as the method embodiment of the present application. Their specific functions and technical effects can be found in the method embodiment part and will not be repeated here.

[0117] The technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0118] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, which can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may at least include: any entity or device that can carry the computer program code / terminal device, recording medium, computer memory, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), electric carrier signal, telecommunication signal and software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electric carrier signals and telecommunication signals.

[0119] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0120] The embodiments described above are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, a person skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.

Claims

1. A sub-package deployment method for a web front-end project, characterized in that: include: Obtain a module subproject, and generate a module subproject project according to the module subproject, wherein the module subproject is a subproject extracted from a web front-end project, and the module subproject project includes a main project and at least one subproject, wherein the main project is responsible for the initialization operation of the entire framework, the management of runtime routing, and the management of common components during compilation, and the subproject is responsible for the implementation of specific business functions; Obtaining the front-end routing table file of the module sub-project, and packaging the front-end routing table file of the module sub-project as the entry file of the sub-project, wherein the front-end routing table file is used to maintain the mapping relationship between the pages accessed by the module sub-project and the routes; Introducing the entry file packaged by the sub-project into the main project comprises: introducing the URL path information of the entry file packaged by the sub-project into the main project; downloading the entry file packaged by the sub-project according to the URL path information when running the main project; the manner of introducing the entry file packaged by the sub-project into the main project comprises: directly introducing it through a script tag in the index file of the web single-page application of the main project, or requesting the entry file content from the server through an XHR request, and then inserting the content as a JS script into the page DOM tree through the DOM operation of the browser; the main project comprises a routing configuration file; According to the entry file packaged by the sub-project, the routing configuration file of the main project is modified to obtain the target routing configuration file, wherein the routing list of the sub-project is obtained from the return result after the entry file packaged by the sub-project is loaded and run, and a routing list set will be obtained after the entry file of the sub-project is run in the main project, and the routing table file of the sub-project is added to the routing list set of the main project; the routing configuration file of the main project implements the configuration injection integration of the sub-project project through code; the routing configuration object of the sub-project generated by the browser after executing the entry file of the sub-project is obtained from the global widnow object of the browser's website site execution context, and the routing configuration object of the sub-project generated by the browser after executing the entry file of the sub-project is added to the routing configuration file of the main project; wherein, when adding the routing configuration object of the sub-project to the routing configuration file of the main project, the uniqueness of the routing path and name is verified; The sub-projects are deployed in packages according to the target routing configuration file.

2. The sub-packaging deployment method according to claim 1, characterized in that: The step of deploying the sub-projects in separate packages according to the target routing configuration file includes: Using a specified packaging tool, package the sub-projects to generate a deployment package; The deployment path is extracted from the target routing configuration file, and the deployment package is deployed to the web server according to the deployment path.

3. The sub-packaging deployment method according to claim 1, characterized in that: The step of deploying the sub-projects in separate packages according to the target routing configuration file includes: If the sub-project is to be deployed to multiple web servers, then obtain the domain name of the web server corresponding to the sub-project; Add the domain name of the web server corresponding to the sub-project to the corresponding resource file of the sub-project to obtain the target sub-project; Packaging the target sub-project to generate a deployment package; The deployment path is extracted from the target routing configuration file, and the deployment package is deployed to the web server according to the deployment path.

4. The sub-packaging deployment method according to claim 1, characterized in that: The sub-package deployment method also includes processing of global public components and frameworks, specifically including: Get the framework type of the module sub-project; Determining, according to the framework type, a mounting object of the global public component; According to the mounting object of the global public component, the global public component is mounted under the global object of the module sub-project.

5. A subcontract deployment system for a web front-end project, characterized in that: include: A project engineering acquisition unit is used to acquire a module sub-project and generate a module sub-project engineering according to the module sub-project. The module sub-project is a sub-project extracted from a web front-end project. The module sub-project engineering includes a main project and at least one sub-project. The main project is responsible for the initialization operation of the entire framework, the management of runtime routing, and the management of common components during compilation. The sub-project is responsible for the implementation of specific business functions. An entry file acquisition unit, used to acquire a front-end routing table file of the module sub-project, and package the front-end routing table file of the module sub-project as an entry file of the sub-project, wherein the front-end routing table file is used to maintain a mapping relationship between pages accessed by the module sub-project and routes; An entry file introduction unit is used to introduce the entry file packaged by the sub-project into the main project, including: introducing the URL path information of the entry file packaged by the sub-project into the main project; when running the main project, downloading the entry file packaged by the sub-project according to the URL path information; the way of introducing the entry file packaged by the sub-project into the main project includes: directly introducing it through a script tag in the index file of the web single-page application of the main project, or requesting the entry file content from the server through an xhr request, and then inserting the content as a js script into the page dom tree through the browser dom operation; the main project includes a routing configuration file; The target file acquisition unit is used to modify the routing configuration file of the main project according to the entry file packaged by the sub-project to obtain a target routing configuration file, wherein the routing list of the sub-project is obtained from the return result after the entry file packaged by the sub-project is loaded and run, and a routing list set is obtained after the entry file of the sub-project is run in the main project, and the routing table file of the sub-project is added to the routing list set of the main project; the routing configuration file of the main project implements the configuration injection integration of the sub-project project through code; the routing configuration object of the sub-project generated by the browser after executing the entry file of the sub-project is obtained from the global widnow object of the website execution context of the browser, and the routing configuration object of the sub-project generated by the browser after executing the entry file of the sub-project is added to the routing configuration file of the main project; wherein, when the routing configuration object of the sub-project is added to the routing configuration file of the main project, the uniqueness of the routing path and name is verified; The sub-package deployment unit is used to perform sub-package deployment on the sub-project according to the target routing configuration file.

6. The sub-package deployment system according to claim 5, characterized in that: The sub-package deployment unit includes: A domain name information acquisition module, used to acquire the domain name of the web server corresponding to the sub-project if the sub-project is to be deployed to multiple web servers; A target sub-project generation module, used to add the domain name of the web server corresponding to the sub-project to the corresponding resource file of the sub-project to obtain the target sub-project; A second packaging module is used to package the target sub-project to generate a deployment package; The second deployment module is used to extract the deployment path from the target routing configuration file and deploy the deployment package to the web server according to the deployment path.

7. The sub-package deployment system according to claim 5, characterized in that: The sub-package deployment system further includes a common component processing unit, which is used to process the global common components of the module sub-projects: The common component processing unit specifically includes: Framework type acquisition module, used to obtain the framework type of the module sub-project; An object type acquisition module, used to determine the mounting object of the global public component according to the framework type; A component mounting module is used to mount the global public component under the global object of the module sub-project according to the mounting object of the global public component.

8. A computer device comprising a memory, a processor, and a computer program stored in the memory and running on the processor, characterized in that: When the processor executes the computer program, the sub-packaging deployment method of the web front-end project as described in any one of claims 1 to 4 is implemented.

9. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the sub-packaging deployment method of the web front-end project as described in any one of claims 1 to 4 is implemented.

Images