Front-end engineering automatic start-up method and device

By plugging in the basic functions in the front-end project and decentralizing public files, the problem of high coupling between basic functions and business code in the front-end framework is solved, and development efficiency is improved.

CN113157345BActive Publication Date: 2024-12-17INDUSTRIAL AND COMMERCIAL BANK OF CHINA
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202110486521.2
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2021-04-30
Publication Date
2024-12-17
Estimated Expiration
2041-04-30

AI Technical Summary

Technical Problem

The basic functional modules in the existing front-end framework are closely coupled with the business code, resulting in low modification and reuse efficiency, and lack of modularity, resulting in low development efficiency.

Method used

By providing front-end engineering automatic startup methods and devices, basic functions are plugged in using code plug-ins and package dependency management tools, and global configuration information is extracted from business function modules, decentralized public files, reduce coupling and improve cohesion.

Benefits of technology

It effectively reduces the coupling between basic functions and business code during front-end development, improves the cohesion of basic functions, and thus improves the overall efficiency of front-end development.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN113157345B_ABST
    Figure CN113157345B_ABST
Patent Text Reader

Abstract

The embodiment of the present application provides a method and device for automatically starting a front-end project, which can also be used in the financial field. The method includes: starting a local simulation object server and mounting it to a specified port when the module packager of the project is detected to be started; obtaining the page layout code of the project to generate a code plug-in and obtaining the logic processing code of the project to generate a package dependency management tool plug-in, storing the code plug-in and the package dependency management tool plug-in to a specified file path and registering them; obtaining global configuration information from each business function module of the project and storing it in a specified file path, and executing the startup process of the progressive UI component project to complete the startup operation of the project. The present application can effectively reduce the coupling degree between the basic functions and the business code in the project during the front-end development process, while improving the cohesion of each basic function, thereby improving the overall efficiency of the front-end development.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application relates to the field of front-end development and can also be used in the financial field, and specifically relates to a method and device for automatically starting a front-end project. Background Art

[0002] During the front-end engineering development process, some basic functions within the project need to be completed before the business functions are developed, such as permission management, overall page layout, menu management logic, and other global modules.

[0003] The inventors found that in the existing front-end framework, these basic function modules are usually coupled with other business codes in the front-end project in the form of engineering code. Adding or deleting a basic function will involve multiple modifications, which may easily lead to omissions. Moreover, when a new application needs to add similar basic functions, manual copying is generally used, which is inefficient and error-prone, and is not conducive to the accumulation and reuse of these basic modules. The reason for these problems is that the basic functions are not modularized and require a lot of manual processing. Summary of the invention

[0004] In response to the problems in the prior art, the present application provides a method and device for automatically starting a front-end project, which can effectively reduce the coupling degree between basic functions and business codes within the project during the front-end development process, while improving the cohesion of various basic functions, thereby improving the overall efficiency of front-end development.

[0005] In order to solve at least one of the above problems, the present application provides the following technical solutions:

[0006] In a first aspect, the present application provides a method for automatically starting a front-end project, comprising:

[0007] When the module packager of the project is detected to be started, the local simulation object server is started and mounted to the specified port;

[0008] Obtaining a page layout code generation code plug-in of the project and obtaining a logic processing code generation package dependency management tool plug-in of the project, storing the code plug-in and the package dependency management tool plug-in in a specified file path and registering them;

[0009] The global configuration information is obtained from each business function module of the project and stored in a specified file path, and the startup process of the progressive UI component project is executed to complete the startup operation of the project.

[0010] Furthermore, the obtaining of the logic processing code of the project to generate a package dependency management tool plug-in, storing the package dependency management tool plug-in in a specified file path and registering the plug-in includes:

[0011] Obtain a package dependency management tool plug-in containing logic processing code stored in a specified file path, declare methods and variables in the package dependency management tool plug-in, and then read a preset parameter configuration file to obtain corresponding plug-in parameters;

[0012] After the package dependency management tool plug-in is pre-initialized, it is determined whether the global registration condition is met. If so, a post-global registration operation is performed on the package dependency management tool plug-in.

[0013] Furthermore, the obtaining of the page layout code of the project to generate a code plug-in, storing the code plug-in in a specified file path and registering the code plug-in, includes:

[0014] Obtain a code plug-in containing a page layout code stored in a specified file path, and obtain a page global component and a page global instruction in the code plug-in;

[0015] The global registration operation is performed in sequence according to the contextual relationship between the page global component and the page global instruction.

[0016] Furthermore, the acquiring of global configuration information from each business function module of the project and storing it in a specified file path includes:

[0017] When the module packager of the project is detected to be started, the corresponding global configuration information is extracted from the configuration information of each business function module of the project and stored in a specified file path, wherein the global configuration information includes at least one of the routing information, multilingual information and simulation data configuration information of each business function module.

[0018] In a second aspect, the present application provides a front-end engineering automatic starting device, comprising:

[0019] MOCK startup module, used to start the local mock object server and mount it to the specified port when the module packager of the project is started;

[0020] A registration plug-in module is used to obtain the page layout code of the project to generate a code plug-in and obtain the logic processing code of the project to generate a package dependency management tool plug-in, store the code plug-in and the package dependency management tool plug-in in a specified file path and register them;

[0021] The global configuration module is used to obtain global configuration information from each business function module of the project and store it in a specified file path, and execute the startup process of the progressive UI component project to complete the startup operation of the project.

[0022] Furthermore, the registration plug-in module includes:

[0023] An NPM plug-in determination unit is used to obtain a package dependency management tool plug-in containing a logic processing code stored in a specified file path, and after declaring methods and variables in the package dependency management tool plug-in, read a preset parameter configuration file to obtain corresponding plug-in parameters;

[0024] The NPM plug-in registration unit is used to perform pre-initialization on the package dependency management tool plug-in and then determine whether the global registration conditions are met. If so, a post-global registration operation is performed on the package dependency management tool plug-in.

[0025] Furthermore, the registration plug-in module includes:

[0026] A code plug-in determining unit is used to obtain a code plug-in containing a page layout code stored in a specified file path, and obtain a page global component and a page global instruction in the code plug-in;

[0027] The code plug-in registration unit is used to perform global registration operations in sequence according to the context relationship between the page global component and the page global instruction.

[0028] Furthermore, the global configuration module includes:

[0029] A modular configuration unit is used to extract corresponding global configuration information from the configuration information of each business function module of the project and store it in a specified file path when the module packager of the project is started, wherein the global configuration information includes at least one of the routing information, multilingual information and simulation data configuration information of each business function module.

[0030] In a third aspect, the present application provides an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the front-end engineering automatic startup method when executing the program.

[0031] In a fourth aspect, the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the front-end engineering automatic startup method.

[0032] It can be seen from the above technical solution that the present application provides a method and device for automatically starting a front-end project, which plugs in the basic functions involved in the project through code plug-ins and package dependency management tool plug-ins, and at the same time, obtains global configuration information from each business function module of the project to decentralized the public files of the project. This can effectively reduce the coupling degree between the basic functions and the business code in the project during the front-end development process, while improving the cohesion of each basic function, thereby improving the overall efficiency of the front-end development. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] In order to more clearly illustrate the embodiments of the present application 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 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 work.

[0034] Figure 1 This is one of the flow charts of the method for automatically starting a front-end project in an embodiment of the present application;

[0035] Figure 2 This is the second flow chart of the method for automatically starting a front-end project in an embodiment of the present application;

[0036] Figure 3 This is a third flow chart of the method for automatically starting a front-end project in an embodiment of the present application;

[0037] Figure 4 This is one of the structural diagrams of the front-end engineering automatic starting device in the embodiment of the present application;

[0038] Figure 5 This is the second structural diagram of the front-end engineering automatic starting device in the embodiment of the present application;

[0039] Figure 6 This is the third structural diagram of the front-end engineering automatic starting device in the embodiment of the present application;

[0040] Figure 7 This is the fourth structural diagram of the front-end engineering automatic starting device in the embodiment of the present application;

[0041] Figure 8 A schematic diagram of extracting global configuration information in a specific embodiment of the present application;

[0042] Fig. 9 It is a schematic diagram of the structure of an electronic device in an embodiment of the present application. DETAILED DESCRIPTION

[0043] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0044] Considering that in the existing front-end framework, these basic function modules are usually coupled with other business codes in the front-end project in the form of project code. Adding or deleting a basic function will involve multiple modifications, which is easy to cause omissions. Moreover, when a new application needs to add similar basic functions, manual copying is generally adopted, which is inefficient and error-prone, and is not conducive to the accumulation and reuse of these basic modules. The reason for these problems is that the basic functions are not modularized and require a lot of manual processing. The present application provides a front-end project automatic startup method and device, which plugs in the basic functions involved in the project through code plug-ins and package dependency management tool plug-ins, and at the same time obtains global configuration information from each business function module of the project to decentralized the public files of the project, thereby effectively reducing the coupling degree between the basic functions and the business codes in the project during the front-end development process, and at the same time improving the cohesion of each basic function, thereby improving the overall efficiency of the front-end development.

[0045] In order to effectively reduce the coupling degree between the basic functions and the business code in the project during the front-end development process, and at the same time improve the cohesion of each basic function, thereby improving the overall efficiency of the front-end development, the present application provides an embodiment of a front-end project automatic startup method, see Figure 1 The front-end engineering automatic startup method specifically includes the following contents:

[0046] Step S101: when the module packager of the project is detected to be started, the local simulation object server is started and mounted to the designated port.

[0047] Optionally, when the module packager webpack is started, the application can use the hook function provided by the module packager webpack to start a local simulation object server (ie, mock server) and mount it to a specified port.

[0048] Step S102: Obtain the page layout code of the project to generate a code plug-in and obtain the logic processing code of the project to generate a package dependency management tool plug-in, store the code plug-in and the package dependency management tool plug-in in a specified file path and register them.

[0049] Optionally, the present application can define basic modules in the project that are not related to the UI and only contain logical processing as npm plug-ins, and extract such basic modules as npm plug-ins, and introduce them in the form of dependencies; at the same time, the present application can also define global components and global instructions related to the UI as code plug-ins, and introduce them in the form of project code.

[0050] Step S103: obtaining global configuration information from each business function module of the project and storing it in a designated file path, and executing the startup process of the progressive UI component project to complete the startup operation of the project.

[0051] It is understandable that in the traditional front-end engineering structure, routing information (Router), multi-language configuration (i18n) and mock data configuration (Mock) are usually stored in the global configuration. These three pieces of information are all related to business functions. Therefore, adding or deleting business functions requires modifying these three global configurations, resulting in a high degree of coupling between business function codes and global configurations, making migration inconvenient. Modular configuration solves the problem of high coupling between business function codes and global configurations.

[0052] See also Figure 8 The modular configuration part of this application consists of two parts: a global configuration generation module and several business function modules. The global configuration generation part uses the custom context function require.context provided by the default packaging tool webpack in the Vue-CLI framework to automatically extract the configuration information in the business function module to generate the global configuration during packaging. The business function module stores the configuration of the routing, multi-language and simulation data corresponding to each business function, which can be extracted and called by the global configuration generation module. Figure 2 As shown in the figure, after adding modular configuration, all codes related to business functions in the front-end project are converged into one folder. The business function code is not only decoupled from the global configuration, but also decoupled from each other, which facilitates the transplantation and addition and reduction of business function code.

[0053] In other embodiments of the present application, the present application may also provide local debugging related configurations, which may specifically include dev-server settings and local mock server settings. Through the transformation, developers can conveniently use local mock services for self-testing and joint debugging with the backend by switching the dev-server configuration.

[0054] In other embodiments of the present application, the present application may also provide a code quality related module, which may specifically include two parts: code style rules and code style verification and correction modules. During the development process, the IDE can read the code style rules and prompt the user whether the code meets the rules, and add new instructions in package.json to call the verification and correction module to automatically correct the code style.

[0055] From the above description, it can be seen that the front-end project automatic startup method provided in the embodiment of the present application can plug-in the basic functions involved in the project through code plug-ins and package dependency management tool plug-ins, and at the same time, by obtaining global configuration information from each business function module of the project, the public files of the project are decentralized, thereby effectively reducing the coupling degree between the basic functions and the business code in the project during the front-end development process, and at the same time improving the cohesion of each basic function, thereby improving the overall efficiency of the front-end development.

[0056] In order to make the code involved in the logic processing in the project plug-in, in one embodiment of the front-end project automatic startup method of the present application, see Figure 2 , the above step S102 may also specifically include the following contents:

[0057] Step S201: obtaining a package dependency management tool plug-in containing logic processing code stored in a specified file path, declaring methods and variables in the package dependency management tool plug-in, and then reading a preset parameter configuration file to obtain corresponding plug-in parameters.

[0058] Step S202: After pre-initialization of the package dependency management tool plug-in, determine whether it meets the global registration conditions. If so, perform post-global registration operation on the package dependency management tool plug-in.

[0059] Specifically, since the logic that npm relies on cannot be modified for front-end engineering, additional parameter information is required when registering such plug-ins to ensure the flexibility of the plug-ins. In order to facilitate the maintenance and management of npm plug-in parameters, all plug-in parameters are extracted and placed in a parameter configuration file, which is stored in the form of an Object. The attribute name in the Object is the plug-in name, and the value is the configuration item of the corresponding plug-in. The structure of the parameter configuration file is as follows:

[0060]

[0061] Optionally, for plugins introduced as npm dependencies, since they involve global basic functions, you need to add a registration module for such plugins in the front-end engineering entry process. In some plugins, you will need to add some Vue global configurations. Here, the Vue.use function provided by the Vue framework is used to register the plugins that need to be added to the Vue global configuration.

[0062] Specifically, first declare the relevant methods and variables inside the plug-in, then read the plug-in parameter configuration written in the global configuration file, divide the plug-in initialization process into two parts: pre-initialization and post-initialization. First perform the pre-initialization, then determine whether to call Vue.use, then perform the post-initialization of the plug-in, and finally complete the global registration of the plug-in.

[0063] In order to make the code related to the page layout in the project plug-in, in one embodiment of the front-end project automatic startup method of the present application, see Figure 3 , the above step S102 may also specifically include the following contents:

[0064] Step S301: obtaining a code plug-in containing a page layout code stored in a specified file path, and obtaining a page global component and a page global instruction in the code plug-in.

[0065] Step S302: Execute global registration operations in sequence according to the contextual relationship between the page global components and the page global instructions.

[0066] Specifically, the code plug-in is actually the project code, which is placed in the designated folder in the front-end project according to the plug-in classification. For example, global components are placed in src / components, and global directives are placed in src / directives. The registration module of the code plug-in also uses the custom context function provided by webpack to extract all files in the specified folder and call the Vue.use function for registration.

[0067] In order to decentralize the global configuration information in the project, in an embodiment of the front-end project automatic startup method of the present application, the above step S103 may further specifically include the following contents:

[0068] When the module packager of the project is detected to be started, the corresponding global configuration information is extracted from the configuration information of each business function module of the project and stored in a specified file path, wherein the global configuration information includes at least one of the routing information, multilingual information and simulation data configuration information of each business function module.

[0069] It is understandable that in the traditional front-end engineering structure, routing information (Router), multi-language configuration (i18n) and mock data configuration (Mock) are usually stored in the global configuration. These three pieces of information are all related to business functions. Therefore, adding or deleting business functions requires modifying these three global configurations, resulting in a high degree of coupling between business function codes and global configurations, making migration inconvenient. Modular configuration solves the problem of high coupling between business function codes and global configurations.

[0070] See also Figure 8 The modular configuration part of this application consists of two parts: a global configuration generation module and several business function modules. The global configuration generation part uses the custom context function require.context provided by the default packaging tool webpack in the Vue-CLI framework to automatically extract the configuration information in the business function module to generate the global configuration during packaging. The business function module stores the configuration of the routing, multi-language and simulation data corresponding to each business function, which can be extracted and called by the global configuration generation module. Figure 2 As shown in the figure, after adding modular configuration, all codes related to business functions in the front-end project are converged into one folder. The business function code is not only decoupled from the global configuration, but also decoupled from each other, which facilitates the transplantation and addition and reduction of business function code.

[0071] In order to effectively reduce the coupling degree between the basic functions and the business code in the project during the front-end development process, and at the same time improve the cohesion of each basic function, thereby improving the overall efficiency of the front-end development, the present application provides an embodiment of a front-end project automatic startup device for realizing all or part of the content of the front-end project automatic startup method, see Figure 4 The front-end engineering automatic starting device specifically includes the following contents:

[0072] The MOCK startup module 10 is used to start the local simulation object server and mount it to the specified port when the module packager of the project is detected to be started.

[0073] The registration plug-in module 20 is used to obtain the page layout code of the project to generate a code plug-in and obtain the logic processing code of the project to generate a package dependency management tool plug-in, store the code plug-in and the package dependency management tool plug-in in a specified file path and register them.

[0074] The global configuration module 30 is used to obtain global configuration information from each business function module of the project and store it in a specified file path, and execute the startup process of the progressive UI component project to complete the startup operation of the project.

[0075] From the above description, it can be seen that the front-end project automatic startup device provided in the embodiment of the present application can plug-in the basic functions involved in the project through code plug-ins and package dependency management tool plug-ins, and at the same time, by obtaining global configuration information from each business function module of the project, the public files of the project are decentralized, thereby effectively reducing the coupling degree between the basic functions and the business codes in the project during the front-end development process, and at the same time improving the cohesion of each basic function, thereby improving the overall efficiency of the front-end development.

[0076] In order to make the code involved in the logic processing in the project plug-in, in one embodiment of the front-end project automatic startup device of the present application, see Figure 5 , the registration plug-in module 20 includes:

[0077] The NPM plug-in determination unit 21 is used to obtain a package dependency management tool plug-in containing a logic processing code stored in a specified file path, and after declaring methods and variables in the package dependency management tool plug-in, read a preset parameter configuration file to obtain corresponding plug-in parameters.

[0078] The NPM plug-in registration unit 22 is used to perform pre-initialization on the package dependency management tool plug-in and then determine whether the global registration condition is met. If so, a post-global registration operation is performed on the package dependency management tool plug-in.

[0079] In order to make the code related to the page layout in the project plug-in, in one embodiment of the front-end project automatic startup device of the present application, see Figure 6 , the registration plug-in module 20 includes:

[0080] The code plug-in determining unit 23 is used to obtain a code plug-in containing a page layout code stored in a specified file path, and obtain a page global component and a page global instruction in the code plug-in.

[0081] The code plug-in registration unit 24 is used to perform global registration operations in sequence according to the context relationship between the page global component and the page global instruction.

[0082] In order to decentralize the global configuration information in the project, in one embodiment of the front-end project automatic startup device of the present application, see Figure 7 , the global configuration module 30 includes:

[0083] A modular configuration unit is used to extract corresponding global configuration information from the configuration information of each business function module of the project and store it in a specified file path when the module packager of the project is started, wherein the global configuration information includes at least one of the routing information, multilingual information and simulation data configuration information of each business function module.

[0084] From the hardware level, in order to effectively reduce the coupling degree between the basic functions and the business code in the project during the front-end development process, and at the same time improve the cohesion of each basic function, thereby improving the overall efficiency of the front-end development, the present application provides an embodiment of an electronic device for implementing all or part of the content of the front-end project automatic startup method, and the electronic device specifically includes the following content:

[0085] Processor, memory, communication interface and bus; wherein the processor, memory and communication interface communicate with each other through the bus; the communication interface is used to realize information transmission between the front-end engineering automatic start device and the core business system, user terminal and related database and other related equipment; the logic controller can be a desktop computer, a tablet computer and a mobile terminal, etc., but the present embodiment is not limited thereto. In the present embodiment, the logic controller can be implemented with reference to the embodiment of the front-end engineering automatic start method and the embodiment of the front-end engineering automatic start device in the embodiment, and the contents thereof are incorporated herein, and the repeated parts are not repeated.

[0086] It is understandable that the user terminal may include a smart phone, a tablet electronic device, a network set-top box, a portable computer, a desktop computer, a personal digital assistant (PDA), a vehicle-mounted device, a smart wearable device, etc. Among them, the smart wearable device may include smart glasses, a smart watch, a smart bracelet, etc.

[0087] In practical applications, part of the front-end engineering automatic startup method can be executed on the electronic device side as described above, or all operations can be completed in the client device. The selection can be made based on the processing capability of the client device and the limitations of the user's usage scenario. This application does not limit this. If all operations are completed in the client device, the client device may also include a processor.

[0088] The client device may have a communication module (i.e., a communication unit) that can communicate with a remote server to achieve data transmission with the server. The server may include a server on the task scheduling center side, and other implementation scenarios may also include a server on an intermediate platform, such as a server on a third-party server platform that has a communication link with the task scheduling center server. The server may include a single computer device, or a server cluster consisting of multiple servers, or a server structure of a distributed device.

[0089] Fig. 9 FIG. 9 is a schematic block diagram of the system structure of the electronic device 9600 according to an embodiment of the present application. Fig. 9 As shown, the electronic device 9600 may include a central processor 9100 and a memory 9140; the memory 9140 is coupled to the central processor 9100. It is worth noting that Fig. 9 is exemplary; other types of structures may also be used to supplement or replace this structure to implement telecommunication functions or other functions.

[0090] In one embodiment, the front-end engineering automatic startup method function can be integrated into the central processor 9100.

[0091] The CPU 9100 may be configured to perform the following control:

[0092] Step S101: when the module packager of the project is detected to be started, the local simulation object server is started and mounted to the designated port.

[0093] Step S102: Obtain the page layout code of the project to generate a code plug-in and obtain the logic processing code of the project to generate a package dependency management tool plug-in, store the code plug-in and the package dependency management tool plug-in in a specified file path and register them.

[0094] Step S103: obtaining global configuration information from each business function module of the project and storing it in a designated file path, and executing the startup process of the progressive UI component project to complete the startup operation of the project.

[0095] From the above description, it can be seen that the electronic device provided in the embodiment of the present application plug-ins the basic functions involved in the project through code plug-ins and package dependency management tool plug-ins, and at the same time, decentralized the public files of the project by obtaining global configuration information from each business function module of the project. This can effectively reduce the coupling degree between the basic functions and the business codes in the project during the front-end development process, while improving the cohesion of each basic function, thereby improving the overall efficiency of the front-end development.

[0096] In another embodiment, the front-end engineering automatic startup device can be configured separately from the central processing unit 9100. For example, the front-end engineering automatic startup device can be configured as a chip connected to the central processing unit 9100, and the front-end engineering automatic startup method function can be implemented through the control of the central processing unit.

[0097] like Fig. 9 As shown, the electronic device 9600 may also include: a communication module 9110, an input unit 9120, an audio processor 9130, a display 9160, and a power supply 9170. It is worth noting that the electronic device 9600 does not necessarily have to include Fig. 9 In addition, the electronic device 9600 may also include Fig. 9 For components not shown, reference may be made to the prior art.

[0098] like Fig. 9 As shown, the central processing unit 9100 is sometimes also referred to as a controller or an operation control, and may include a microprocessor or other processor device and / or logic device. The central processing unit 9100 receives input and controls the operation of various components of the electronic device 9600.

[0099] The memory 9140 may be, for example, one or more of a cache, a flash memory, a hard drive, a removable medium, a volatile memory, a non-volatile memory or other suitable devices. The above-mentioned information related to the failure may be stored, and a program for executing the relevant information may also be stored. The CPU 9100 may execute the program stored in the memory 9140 to implement information storage or processing, etc.

[0100] The input unit 9120 provides input to the central processing unit 9100. The input unit 9120 is, for example, a key or a touch input device. The power supply 9170 is used to provide power to the electronic device 9600. The display 9160 is used to display display objects such as images and texts. The display may be, for example, an LCD display, but is not limited thereto.

[0101] The memory 9140 may be a solid-state memory, such as a read-only memory (ROM), a random access memory (RAM), a SIM card, etc. It may also be a memory that saves information even when the power is off, can be selectively erased, and is provided with more data, examples of which are sometimes referred to as EPROMs, etc. The memory 9140 may also be some other type of device. The memory 9140 includes a buffer memory 9141 (sometimes referred to as a buffer). The memory 9140 may include an application / function storage unit 9142, which is used to store application programs and function programs or processes for executing the operation of the electronic device 9600 through the central processor 9100.

[0102] The memory 9140 may also include a data storage unit 9143 for storing data, such as contacts, digital data, pictures, sounds, and / or any other data used by the electronic device. The driver storage unit 9144 of the memory 9140 may include various drivers for communication functions of the electronic device and / or for executing other functions of the electronic device (such as messaging applications, address book applications, etc.).

[0103] The communication module 9110 is a transmitter / receiver 9110 that sends and receives signals via an antenna 9111. The communication module (transmitter / receiver) 9110 is coupled to the central processor 9100 to provide input signals and receive output signals, which may be the same as the case of a conventional mobile communication terminal.

[0104] Based on different communication technologies, multiple communication modules 9110 may be provided in the same electronic device, such as a cellular network module, a Bluetooth module and / or a wireless LAN module, etc. The communication module (transmitter / receiver) 9110 is also coupled to a speaker 9131 and a microphone 9132 via an audio processor 9130 to provide an audio output via the speaker 9131 and receive an audio input from the microphone 9132, thereby realizing a common telecommunication function. The audio processor 9130 may include any suitable buffer, decoder, amplifier, etc. In addition, the audio processor 9130 is also coupled to the central processor 9100, so that recording can be performed on the local machine through the microphone 9132, and the sound stored on the local machine can be played through the speaker 9131.

[0105] The embodiments of the present application also provide a computer-readable storage medium capable of implementing all the steps of the method for automatically starting a front-end project in the above-mentioned embodiment, where the execution subject is a server or a client. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, all the steps of the method for automatically starting a front-end project in the above-mentioned embodiment are implemented. For example, when the processor executes the computer program, the following steps are implemented:

[0106] Step S101: when the module packager of the project is detected to be started, the local simulation object server is started and mounted to the designated port.

[0107] Step S102: Obtain the page layout code of the project to generate a code plug-in and obtain the logic processing code of the project to generate a package dependency management tool plug-in, store the code plug-in and the package dependency management tool plug-in in a specified file path and register them.

[0108] Step S103: obtaining global configuration information from each business function module of the project and storing it in a designated file path, and executing the startup process of the progressive UI component project to complete the startup operation of the project.

[0109] From the above description, it can be seen that the computer-readable storage medium provided in the embodiment of the present application plugs in the basic functions involved in the project through code plug-ins and package dependency management tool plug-ins, and at the same time, by obtaining global configuration information from each business function module of the project, the public files of the project are decentralized, thereby effectively reducing the coupling degree between the basic functions and the business codes in the project during the front-end development process, while improving the cohesion of each basic function, thereby improving the overall efficiency of the front-end development.

[0110] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as methods, devices, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0111] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (apparatus), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0112] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0113] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process in the computer or other programmable device. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0114] The present invention uses specific embodiments to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present invention, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present invention.

Claims

1. A front-end engineering automatic startup method, characterized in that: The method comprises: When the module packager of the project is detected to be started, the local simulation object server is started and mounted to the specified port; Obtaining a page layout code generation code plug-in of the project and obtaining a logic processing code generation package dependency management tool plug-in of the project, storing the code plug-in and the package dependency management tool plug-in in a specified file path and registering them; Obtaining global configuration information from each business function module of the project and storing it in a specified file path, and executing the startup process of the progressive UI component project to complete the startup operation of the project; The obtaining of the logic processing code of the project to generate a package dependency management tool plug-in, storing the package dependency management tool plug-in in a specified file path and registering the plug-in comprises: Obtain a package dependency management tool plug-in containing logic processing code stored in a specified file path, declare methods and variables in the package dependency management tool plug-in, and then read a preset parameter configuration file to obtain corresponding plug-in parameters; After the package dependency management tool plug-in is pre-initialized, it is determined whether the global registration condition is met. If so, a post-global registration operation is performed on the package dependency management tool plug-in.

2. The front-end engineering automatic startup method according to claim 1, characterized in that: The step of obtaining the page layout code of the project to generate a code plug-in, storing the code plug-in in a specified file path and registering the code plug-in includes: Obtain a code plug-in containing a page layout code stored in a specified file path, and obtain a page global component and a page global instruction in the code plug-in; The global registration operation is performed in sequence according to the contextual relationship between the page global component and the page global instruction.

3. The front-end engineering automatic startup method according to claim 1, characterized in that: The step of acquiring global configuration information from each business function module of the project and storing the information in a specified file path includes: When the module packager of the project is detected to be started, the corresponding global configuration information is extracted from the configuration information of each business function module of the project and stored in a specified file path, wherein the global configuration information includes at least one of the routing information, multilingual information and simulation data configuration information of each business function module.

4. A front-end engineering automatic starting device, characterized in that: include: MOCK startup module, used to start the local mock object server and mount it to the specified port when the module packager of the project is started; A registration plug-in module is used to obtain the page layout code of the project to generate a code plug-in and obtain the logic processing code of the project to generate a package dependency management tool plug-in, store the code plug-in and the package dependency management tool plug-in in a specified file path and register them; A global configuration module, used to obtain global configuration information from each business function module of the project and store it in a specified file path, and execute the startup process of the progressive UI component project to complete the startup operation of the project; The registration plug-in module includes: An NPM plug-in determination unit is used to obtain a package dependency management tool plug-in containing a logic processing code stored in a specified file path, and after declaring methods and variables in the package dependency management tool plug-in, read a preset parameter configuration file to obtain corresponding plug-in parameters; The NPM plug-in registration unit is used to perform pre-initialization on the package dependency management tool plug-in and then determine whether the global registration conditions are met. If so, a post-global registration operation is performed on the package dependency management tool plug-in.

5. The front-end engineering automatic starting device according to claim 4 is characterized in that: The registration plug-in module includes: A code plug-in determining unit is used to obtain a code plug-in containing a page layout code stored in a specified file path, and obtain a page global component and a page global instruction in the code plug-in; The code plug-in registration unit is used to perform global registration operations in sequence according to the context relationship between the page global component and the page global instruction.

6. The front-end engineering automatic starting device according to claim 4 is characterized in that: The global configuration module includes: A modular configuration unit is used to extract corresponding global configuration information from the configuration information of each business function module of the project and store it in a specified file path when the module packager of the project is started, wherein the global configuration information includes at least one of the routing information, multilingual information and simulation data configuration information of each business function module.

7. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the steps of the front-end engineering automatic startup method described in any one of claims 1 to 3 are implemented.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the front-end engineering automatic startup method described in any one of claims 1 to 3 are implemented.