Webpack-based Code Management Method, Its Device, and Storage Medium

Abstract

The embodiments of the present application provide a code management method, device, and storage medium based on webpack, belonging to the technical field of computer processing. The method includes: pre-configuring environment variables; establishing a preprocessing file in the loader configuration of webpack, and replacing the content string of the packaging result in webpack with the environment variable through the preprocessing file; importing the replaced content string of the packaging result in the initialization configuration file of vue-router; adding target routing information to the routing configuration of the current code module, where the target routing information is the routing information recorded in the router file corresponding to moduleName. The embodiments of the present application implement a project management mechanism that meets the requirements through the self-functions of webpack and the vue framework, which can improve the code management and project development efficiency, reduce the code management cost, and enhance the management flexibility of the code repository.

Description

Technical Field

[0001] The embodiments of the present application relate to, but are not limited to, the field of computer processing technologies, and in particular, to a code management method and device, an electronic device, and a computer-readable storage medium based on webpack. Background Art

[0002] Currently, the management methods of code repositories can be divided into two types: multi-repo and mono-repo. Multi-repo means that each code module uses a separate Git repository, and mono-repo means that multiple modules share a single Git repository. In practice, the mono-repo method is usually used to manage code repositories to ensure a clear code structure, easy dependency management and version control, which is beneficial to team collaboration. As one of the most commonly used mono-repo solution tools, Lerna is widely used, but there are still several disadvantages. For example, since using Lerna requires installing the tool and then learning commands related to Lerna's startup, creation, addition, and release, and the server also requires additional support for related environments during release and deployment, otherwise Lerna cannot be used, which results in additional learning and installation costs. In addition, the management of its business modules is not flexible enough, leading to an increase in project maintenance costs and also unable to expand and add more custom functions. Therefore, how to control the code management cost and improve the management flexibility of the code repository has become an urgent technical problem to be solved. Summary of the Invention

[0003] The following is an overview of the subject matter described in detail in this document. This overview is not intended to limit the scope of protection of the claims.

[0004] The main purpose of the embodiments of the present application is to propose a code management method and device, an electronic device, and a computer-readable storage medium based on webpack, aiming to control the code management cost and improve the management flexibility of the code repository.

[0005] To achieve the above object, a first aspect of the embodiments of the present application proposes a code management method based on webpack, the method includes:

[0006] Pre-configure the environment variable MODULE_NAME, where MODULE_NAME = moduleName, and moduleName is the current code module to be packaged or run;

[0007] Establish a preprocessing file in the loader configuration of webpack to replace the packaged result content string PAI_MODULE_NAME in webpack with the environment variable MODULE_NAME through the preprocessing file;

[0008] Import the content string PAI_MODULE_NAME of the packaged result after replacement into the initialization configuration file of vue-router;

[0009] Add the target route information to the route configuration of the current code module, where the target route information is the route information recorded in the router file corresponding to the moduleName.

[0010] According to the code management method provided by the embodiments of the present application, it has at least the following beneficial effects:

[0011] Based on the functions of webpack and vue framework, by pre-configuring the environment variable MODULE_NAME, establishing a preprocessing file, configuring the initialization configuration file of vue-router, and adding route configuration information, etc., to realize the production of the content of the project management system that meets the requirements. Compared with the management methods in related technologies, it is convenient for component reuse and tool reuse, can improve the code management and project development efficiency at the same time, and users do not have to spend additional learning costs, nor have additional installation and configuration requirements for the operating environment. Therefore, it can control the code management cost and further improve the management flexibility of the code repository.

[0012] In some embodiments, the current code module is constructed by the following steps:

[0013] In the execution script scripts configuration item of package.json, generate the first command for the development environment and the second command for the production environment;

[0014] Add the environment variable MODULE_NAME to the first command and the second command respectively;

[0015] Add a target route entry in the router folder;

[0016] Based on the first command, the second command and the target route entry, construct the current code module.

[0017] On the premise of building the content of the project management system based on webpack and vue framework, only through simple operations such as command configuration and router configuration, etc., can realize the construction of the code module based on mono-repo. This has a low transformation cost for the project, and the newly created code module can conveniently reuse the existing component and tool libraries, ensuring the clarity of the code structure and facilitating dependency management and version management control.

[0018] In some embodiments, after constructing the current code module, it further includes:

[0019] Add a module folder corresponding to the current code module to perform development iteration on the current code module through the module folder.

[0020] By adding a module folder corresponding to the current code module, it is possible to perform development iteration on the current code module through the added module folder in subsequent project management, thereby improving the management efficiency of the current code module.

[0021] In some embodiments, when there are multiple current code modules, the module folders corresponding to each current code module are different.

[0022] Since there are multiple current code modules, there is a possibility of managing multiple current code modules simultaneously. Therefore, to avoid conflicts or untimely responses when managing multiple current code modules, the module folders corresponding to each current code module can be set to be different, which is also beneficial to improving the project management efficiency of each current code module.

[0023] In some embodiments, the target route entry is configured as a `moduleName.js` file.

[0024] Configuring the target route entry as the route entry corresponding to the current code module to be packaged or run can further optimize and improve the route configuration of the router folder.

[0025] In some embodiments, before establishing a preprocessing file in the loader configuration of webpack, it further includes:

[0026] Read the environment variable MODULE_NAME in the webpack configuration.

[0027] Pre-read and load the environment variable MODULE_NAME in the webpack configuration so that the environment variable MODULE_NAME can be directly called and used in the subsequent step of establishing the preprocessing file. That is to say, the application reliability of the environment variable MODULE_NAME can be improved, thereby enhancing the stability of the overall code management.

[0028] In some embodiments, the pre-configured environment variable MODULE_NAME includes:

[0029] Pre-configure the environment variable MODULE_NAME based on the cross-platform setting script cross-env of the Node package manager.

[0030] By pre-configuring the environment variable MODULE_NAME based on NPM's cross-env, the environment variable MODULE_NAME can be well configured in the relevant application environment, facilitating the further application of the configured environment variable MODULE_NAME in subsequent steps.

[0031] To achieve the above object, a second aspect of the embodiments of the present application proposes a code management device based on webpack. The device includes:

[0032] A pre-configuration module for pre-configuring the environment variable MODULE_NAME, where MODULE_NAME = moduleName, and moduleName is the current code module to be packaged or run.

[0033] A pre-processing module for establishing a pre-processing file in the loader configuration of webpack to replace the packaged result content string PAI_MODULE_NAME in webpack with the environment variable MODULE_NAME through the pre-processing file.

[0034] An import module for importing the replaced packaged result content string PAI_MODULE_NAME in the initialization configuration file of vue-router.

[0035] A route configuration module for adding target route information to the route configuration of the current code module, where the target route information is the route information recorded in the router file corresponding to moduleName.

[0036] To achieve the above object, a third aspect of the embodiments of the present application proposes an electronic device. The electronic device includes a memory, a processor, a program stored on the memory and executable on the processor, and a data bus for implementing connection communication between the processor and the memory. When the program is executed by the processor, the method described in the first aspect above is implemented.

[0037] To achieve the above object, a fourth aspect of the embodiments of the present application proposes a storage medium. The storage medium is a computer-readable storage medium for computer-readable storage. The storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the method described in the first aspect above.

[0038] A code management method, device, electronic device, and computer-readable storage medium based on webpack proposed in this application, based on the self-functions of webpack and the vue framework, through operations such as pre-configuring environment variables MODULE_NAME, establishing a preprocessing file, configuring the initialization configuration file of vue-router, and adding routing configuration information, etc., to achieve the content of a project management system that meets requirements. Compared with the management methods in related technologies, it is convenient for component reuse and tool reuse, can improve code management and project development efficiency at the same time, and users do not have to spend additional learning costs, nor have additional installation and configuration requirements for the operating environment. Therefore, it can control the code management cost and further improve the management flexibility of the code repository.

[0039] Other features and advantages of this application will be described in the following specification, and, partly, will become obvious from the specification, or will be understood by implementing this application. The objectives and other advantages of this application can be achieved and obtained through the structures specifically pointed out in the specification, claims, and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] Figure 1 is a flowchart of a code management method based on webpack provided by an embodiment of this application;

[0041] Figure 2 is Figure 1 a flowchart of step S101 provided by an embodiment in

[0042] Figure 3 is Figure 1 a flowchart before step S102 provided by an embodiment in

[0043] Figure 4 is a flowchart of constructing the current code module in step S104 provided by an embodiment of this application;

[0044] Figure 5 is Figure 4 a flowchart after step S304 provided by an embodiment in

[0045] Figure 6 is a schematic structural diagram of a code management device based on webpack provided by an embodiment of this application;

[0046] Figure 7 is a schematic hardware structure diagram of an electronic device provided by an embodiment of this application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0047] In order to make the objectives, technical solutions and advantages of the present application clearer and more understandable, the present application will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0048] It should be noted that although functional module division is performed in the device schematic diagram and the logical sequence is shown in the flowchart, in some cases, the steps shown or described can be executed in a different module division in the device or a different order in the flowchart. Terms such as "first", "second", etc. in the description, claims and the above-mentioned drawings are used to distinguish similar objects and do not necessarily need to describe a specific order or sequence.

[0049] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the technical field to which the present application belongs. The terms used herein are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.

[0050] First, several nouns involved in the present application are analyzed:

[0051] webpack: A code compilation tool with entry, exit, loader, and plugins. webpack is a static module bundling tool for modern JavaScript applications. When webpack processes an application, it builds a dependency graph internally. This dependency graph corresponds to and maps to each module required by the project and generates one or more bundles.

[0052] vue-router: The official routing plugin of Vue.js, which is deeply integrated with Vue.js and is suitable for building single-page applications. The core of vue-router is to register the plugin through Vue.use, and obtain the router object configured by the user in the install method of the plugin. When the browser address changes, the corresponding route is matched according to the router object, the component is obtained, and the component is rendered onto the view.

[0053] The three main components of vue-router can be but are not limited to:

[0054] vuerouter: The router class, which dynamically renders the selected component in the routing view according to the routing request;

[0055] router-link: The interface for the request link, which the browser will parse into ;

[0056] router-view: The routing outlet used to render the component corresponding to the routing path.

[0057] For vue-router, routing is the decision-making process of selecting a component for rendering based on a request path.

[0058] Information Extraction: A text processing technology that extracts factual information such as entities, relationships, and events of a specified type from natural language text and forms structured data output. Information extraction is a technology for extracting specific information from text data. Text data is composed of some specific units, such as sentences, paragraphs, and chapters, and text information is exactly composed of some small specific units, such as characters, words, phrases, sentences, paragraphs, or combinations of these specific units. Extracting noun phrases, personal names, place names, etc. from text data are all text information extraction. Of course, the information extracted by text information extraction technology can be various types of information.

[0059] Since Lerna, as one of the most commonly used mono-repo solution tools, is widely applied, there are still several drawbacks. For example, when using Lerna, tools need to be installed, and then commands related to Lerna's startup, creation, addition, and release need to be learned. Also, the server side requires additional support for relevant environments during release and deployment, otherwise Lerna cannot be used, which incurs additional learning and installation costs. In addition, the management of its business modules is not flexible enough, resulting in an increase in project maintenance costs and an inability to expand and add more custom functions. Therefore, how to further optimize and improve the efficiency and cost of code management has become an urgent technical problem to be solved.

[0060] Based on this, the embodiments of the present application provide a code management method, its device, and a storage medium based on webpack. Based on the self-functions of webpack and the vue framework, by operating such as pre-configuring the environment variable MODULE_NAME, establishing a preprocessing file, configuring the initialization configuration file of vue-router, and adding routing configuration information, etc., to achieve the content of a project management system that meets requirements. Compared with the management methods in related technologies, it is convenient for component reuse and tool reuse, can improve code management and project development efficiency at the same time, and users do not have to spend additional learning costs, nor have additional installation and configuration requirements for the operating environment. Therefore, it can control the code management cost and further improve the management flexibility of the code repository.

[0061] The code management method, device, electronic device, and computer-readable storage medium based on webpack provided by the embodiments of the present application will be specifically described through the following embodiments. First, the code management method in the embodiments of the present application will be described.

[0062] The code management method provided by the embodiments of the present application relates to the field of computer processing technologies. The code management method provided by the embodiments of the present application can be applied to a terminal, or to a server side, or can be software running on a terminal or a server side. In some embodiments, the terminal can be a smart phone, a tablet computer, a laptop computer, a desktop computer, etc.; the server side can be configured as an independent physical server, or can be configured as a server cluster or a distributed system composed of multiple physical servers, or can be configured as a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application implementing the code management method, etc., but is not limited to the above forms.

[0063] The present application can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multi-processor systems, microprocessor-based systems, set-top boxes, programmable consumer electronic devices, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, and so on. The present application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present application can also be practiced in a distributed computing environment where tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0064] Furthermore, the code management method, device, electronic device, and storage medium provided by the embodiments of the present application will be specifically described through the following embodiments. First, the code management method in the embodiments of the present application will be described.

[0065] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technologies. Among them, artificial intelligence (AI) is the theory, method, technology, and application system that uses a digital computer or a machine controlled by a digital computer to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use knowledge to obtain the best results.

[0066] The basic technologies of artificial intelligence generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technologies, operation / interaction systems, and mechatronics. The software technologies of artificial intelligence mainly include several major directions such as computer vision technology, robotics, biometric technology, speech processing technology, natural language processing technology, and machine learning / deep learning.

[0067] Figure 1 It is an optional flowchart of the code management method based on webpack provided by the embodiments of the present application.Figure 1 The method in

[0068] Step S101: Pre-configure the environment variable MODULE_NAME, where MODULE_NAME = moduleName, and moduleName is the current code module to be packaged or run.

[0069] Step S102: Create a preprocessing file in the loader configuration of webpack to replace the packaged result content string PAI_MODULE_NAME in webpack with the environment variable MODULE_NAME through the preprocessing file.

[0070] Step S103: Import the replaced packaged result content string PAI_MODULE_NAME in the initialization configuration file of vue-router.

[0071] Step S104: Add the target route information to the route configuration of the current code module, where the target route information is the route information recorded in the router file corresponding to moduleName.

[0072] Steps S101 to S104 illustrated in the embodiments of this application, based on the inherent functions of webpack and the vue framework, through operations such as pre-configuring the environment variable MODULE_NAME, creating a preprocessing file, configuring the initialization configuration file of vue-router, and adding route configuration information, etc., to achieve the content of a project management system that meets the requirements. Compared with the management methods in the related art, it is convenient for component reuse and tool reuse, can improve code management and project development efficiency at the same time, and users do not have to spend additional learning costs, nor have additional installation and configuration requirements for the operating environment. Therefore, it can control the code management cost and further improve the management flexibility of the code repository.

[0073] In step S101 of some embodiments, the type of the environment variable MODULE_NAME can be various, and can be specifically selected and set by those skilled in the art according to the specific application scenario, which is not limited here; in addition to representing the current code module, moduleName can also be used to represent other preset code modules. For example, another target module is pre-selected first, and then the selected target module is pre-configured. That is to say, the pre-configured code modules can be different in different situations.

[0074] In step S101 of some embodiments, the number of modules in a project can be unlimited. During the process of pre-building the management system, the number of times of pre-configuring the environment variable MODULE_NAME is also unlimited. That is, the specific strategy for configuring the environment variable MODULE_NAME can be considered according to the actual project situation, and it is not limited here.

[0075] Please refer to Figure 2 , in some embodiments, step S101 can but is not limited to including step S201.

[0076] Step S201, pre-configure the environment variable MODULE_NAME based on the cross-platform setting script cross-env of the Node package manager.

[0077] In this step, by pre-configuring the environment variable MODULE_NAME based on NPM's cross-env, the environment variable MODULE_NAME can be well configured in the relevant application environment, so as to further apply the configured environment variable MODULE_NAME in the subsequent steps.

[0078] In step S201 of some embodiments, in addition to the Node package manager, i.e., NPM, those skilled in the art can also pre-configure the environment variable MODULE_NAME through other managers and corresponding scripts according to the specific application scenario, which is not limited here.

[0079] In step S102 of some embodiments, a custom loader can be used to create a preprocessing file in the webpack loader configuration. The created preprocessing file is used to perform corresponding operations, that is, it can replace the packaged result content string PAI_MODULE_NAME in webpack with the environment variable MODULE_NAME. That is to say, by replacing variables, the result content of the preset string in the preprocessing file is changed to achieve the purpose of optimizing the configuration.

[0080] In step S102 of some embodiments, the specific type and function of the packaged result content string PAI_MODULE_NAME can be customized by those skilled in the art according to the specific application scenario, and it is not limited here.

[0081] Please refer to Figure 3 , in some embodiments, before step S102, it can but is not limited to include step S105.

[0082] Step S105, read the environment variable MODULE_NAME in the webpack configuration.

[0083] In this step, the environment variable MODULE_NAME is pre-read and loaded in the webpack configuration so that it can be directly called and used in the subsequent step of creating the preprocessing file. That is to say, the application reliability of the environment variable MODULE_NAME can be improved, thereby enhancing the stability of overall code management. That is to say, based on the inherent functions of webpack and the vue framework, by pre-configuring the environment variable MODULE_NAME, creating the preprocessing file, configuring the initialization configuration file of vue-router, and adding routing configuration information, etc., the content of a project management system that meets the requirements is realized. Compared with the management methods in related technologies, it is convenient for component reuse and tool reuse, can improve code management and project development efficiency at the same time, and users do not have to spend additional learning costs, nor have additional installation and configuration requirements for the operating environment. Therefore, the code management cost can be controlled, and the management flexibility of the code repository can be further enhanced.

[0084] In step S105 of some embodiments, the method and time for reading the environment variable MODULE_NAME are not limited and can be read and loaded according to specific scenarios, which is not limited here.

[0085] In step S103 of some embodiments, since the core of VueRouter is to register the plugin through Vue.use and obtain the router object configured by the user in the install method of the plugin, then when the browser address changes, the corresponding route is matched according to the router object, the component is obtained and the component is rendered to the view. Therefore, relevant page files can be added to the routing information by importing the content string PAI_MODULE_NAME of the packaging result, so that the corresponding view can be rendered under this management architecture, thereby realizing the transformation of vue-router.

[0086] In step S104 of some embodiments, by adding the target routing information to the routing configuration of the current code module, that is to say, by adding the routing information recorded in the router file corresponding to moduleName to the routing configuration of the current code module, when importing the route, the routing information recorded in the router file corresponding to the custom moduleName can be added to the routing configuration of the currently running code module, thereby realizing the further transformation of vue-router.

[0087] To better illustrate the working principles and processes of the above embodiments of the present application, the following will be described with specific examples.

[0088] Example 1:

[0089] First, use the cross-platform setting script cross-env of NPM to add an environment variable MODULE_NAME=moduleName, where moduleName is the name of a single code module that needs to be packaged or run currently among multiple code modules of this project;

[0090] Then, read the environment variable MODULE_NAME set in the previous step in the webpack configuration;

[0091] Next, use a custom loader to create a preprocess-loader file in the loader configuration of webpack. The content of this file performs the following operations:

[0092] Replace the string PAI_MODULE_NAME in the content of the webpack packaging result with MODULE_NAME in the previous step. Among them, a detailed custom preprocess-loader code is as follows: module.exports = function(content, map) {

[0093] this.cacheable && this.cacheable()

[0094] content = content.replace( / PAI_MODULE_NAME / g, process.env.MODULE_NAME)

[0095] this.callback(null, content, map)

[0096] }

[0097] Finally, in the initialization configuration file of vue router, use the import method to import the content string PAI_MODULE_NAME of the packaging result. Then, put the routing information into the initialization configuration routes of the router. This import will add the relevant page files required by the current code module to the routing information.

[0098] It can be seen that through the construction configuration of the above steps, the configuration and packaging transformation of webpack are completed, and at the same time, the vue-router transformation is realized. Then, when the route is imported, the routing information recorded in the router file corresponding to the custom moduleName will be added to the routing configuration of the currently running code module.

[0099] That is to say, based on the functions of webpack and the vue framework, by pre-configuring the environment variable MODULE_NAME, establishing a preprocessing file, configuring the initialization configuration file of vue-router, and adding routing configuration information, etc., to realize the content of the project management system that meets the requirements. Compared with the management methods in the related technologies, it is convenient for component reuse and tool reuse, can improve code management and project development efficiency at the same time, and users do not have to spend extra learning costs, nor have additional installation and configuration requirements for the operating environment. Therefore, it can control the code management cost and further improve the management flexibility of the code repository.

[0100] Please refer to Figure 4 , in some embodiments, the current code module can be but is not limited to being constructed by the following steps S301 to S304.

[0101] Step S301, in the execution script scripts configuration item of package.json, generate the first command for the development environment and the second command for the production environment;

[0102] Step S302, add the environment variable MODULE_NAME to the first command and the second command respectively;

[0103] Step S303, add a target routing entry in the router folder;

[0104] Step S304, based on the first command, the second command, and the target routing entry, construct the current code module.

[0105] In this step, on the premise of building the content of the project management system based on webpack and the vue framework, only by simple command configuration, router configuration and other operations can the construction of the mono-repo-based code module be realized. This has a low transformation cost for the project, and the newly created code module can conveniently reuse existing components and tool libraries, ensuring the clarity of the code structure and facilitating dependency management and version management control; it can also be seen from the above embodiments that based on the functions of webpack and the vue framework, by pre-configuring the environment variable MODULE_NAME, establishing a preprocessing file, configuring the initialization configuration file of vue-router, and adding routing configuration information, etc., to realize the content of the project management system that meets the requirements. Compared with the management methods in the related technologies, it is convenient for component reuse and tool reuse, can improve code management and project development efficiency at the same time, and users do not have to spend extra learning costs, nor have additional installation and configuration requirements for the operating environment. Therefore, it can control the code management cost and further improve the management flexibility of the code repository.

[0106] In step S301 of some embodiments, the execution script scripts configuration item can be set to distinguish between the development environment or the production environment. That is to say, for the first command, the execution script scripts configuration item based on the development environment scenario can be adopted, and for the second command, the execution script scripts configuration item based on the production environment scenario can be adopted, or it can be set based on other predefined execution script scripts configuration items, which are not limited herein.

[0107] In step S301 of some embodiments, the configuration forms of the first command and the second command can be various, and those skilled in the art can selectively set them according to the actual application scenario, which is not limited herein.

[0108] In step S302 of some embodiments, by adding the configured environment variable MODULE_NAME to the first command and the second command respectively, each associated command can further perform subsequent work processes according to the configured environment variable MODULE_NAME.

[0109] In step S303 of some embodiments, the target routing table entry added to the router folder can be, but is not limited to, the routing table entry in the related art, and can be constructed with reference to the router file in the related art. Since it is well known to those skilled in the art, it will not be elaborated herein.

[0110] In step S303 of some embodiments, the target routing table entry is configured as the `moduleName.js` file. In this case, configuring the target routing table entry as the routing table entry corresponding to the current code module to be executed for packaging or running can further optimize and improve the routing configuration of the router folder.

[0111] In step S304 of some embodiments, since the first command, the second command, and the target routing table entry have all been constructed, the current code module can be stably and reliably constructed under such environmental conditions. It should be noted that the construction timing of the current code module can be selected and set according to the specific application scenario, which is not limited herein.

[0112] Please refer to Figure 5 , in some embodiments, after step S304, it can further include, but is not limited to, step S305.

[0113] Step S305, adding a module folder corresponding to the current code module to develop and iterate the current code module through the module folder.

[0114] In this step, by adding a module folder corresponding to the current code module, during subsequent project management, the added module folder can be used to perform development iteration on the current code module, thereby improving the management efficiency of the current code module. Combining the above embodiments, based on the self-functions of webpack and the vue framework, by pre-configuring the environment variable MODULE_NAME, establishing a preprocessing file, configuring the initialization configuration file of vue-router, and adding routing configuration information, etc., to implement the content of a project management system that meets the requirements. Compared with the management methods in related technologies, it is convenient for component reuse and tool reuse, can improve code management and project development efficiency at the same time, and users do not have to spend additional learning costs, nor have additional installation and configuration requirements for the operating environment. Therefore, the code management cost can be controlled, and the management flexibility of the code repository can be further improved.

[0115] In one embodiment, the pre-construction or pre-acquisition method of the module folder can be various, which is not limited here.

[0116] In some embodiments, when there are multiple current code modules, the module folders corresponding to each current code module are different. That is to say, since there are multiple current code modules, there is a possibility of managing multiple current code modules at the same time. Therefore, in order to avoid conflicts or untimely responses when managing multiple current code modules, the module folders corresponding to each current code module can be set to be different, which is also conducive to improving the project management efficiency of each current code module respectively.

[0117] To better illustrate the working principle and process of the above embodiments of the present application, the following will be described in combination with specific examples.

[0118] Example 2:

[0119] First, add commands for the development environment and production packaging in the execution script scripts configuration item of the package.json file, and add the environment variable MODULE_NAME configured in Example 1 to the commands.

[0120] Among them, the command for the development environment npm run build-moduleName, and its value can be configured as: cross-env NODE_ENV=development MODULE_NAME=module webpack-dev-server;

[0121] The build command for the production environment is npm run dev-moduleName, and its value can be configured as: cross-env NODE_ENV=production MODULE_NAME=module webpack-cli –p.

[0122] Then, create a new `moduleName.js` file in the router folder. The `moduleName.js` file is a routing table entry for a code module. It can, but is not limited to, refer to the existing router files. The entry route of the module can be written as ` / `.

[0123] Finally, in the page code folder of the business, such as pages, create a new module folder, and then develop and iterate under this module folder. The folders corresponding to different modules are different.

[0124] It can be seen that after completing the above steps, a code module in the mono-repo can be created and the corresponding commands can be executed to run or package the module.

[0125] In summary, combining the above Example 1 and Example 2, it can be known that the project management mechanism proposed in the embodiments of the present application using webpack can not only achieve the project management effect in the related technologies, but also be more convenient to realize component reuse and tool reuse during the project management process. It can improve the project development and code management efficiency at the same time, and has better versatility and compatibility. Moreover, the embodiments of the present application are mainly implemented based on the functions of webpack and the vue framework itself. For users, they do not have to pay additional learning costs, nor do they have additional installation and configuration work for the operating environment. Therefore, the application cost is lower. At the same time, the transformation cost of the project is low. Users only need to create a new code module based on mono-repo through simple steps of creating a new code module. The newly created code module can easily reuse the existing components and tool libraries, ensuring a clear code structure and facilitating dependency management and version management control.

[0126] That is to say, based on the functions of webpack and the vue framework itself, by pre-configuring the environment variable MODULE_NAME, establishing a preprocessing file, configuring the initialization configuration file of vue-router, and adding routing configuration information and other operations, to implement the content of the project management system that meets the requirements. Compared with the management methods in the related technologies, it is convenient for component reuse and tool reuse, can improve the code management and project development efficiency at the same time, and users do not have to spend additional learning costs, nor do they have additional installation and configuration requirements for the operating environment. Therefore, it can control the code management cost and further improve the management flexibility of the code repository.

[0127] Please refer to Figure 6 , the embodiment of the present application also provides a code management device based on webpack, which can implement the above code management method. The device includes:

[0128] A pre-configuration module, used to pre-configure the environment variable MODULE_NAME; where MODULE_NAME = moduleName, and moduleName is the current code module to be packaged or run;

[0129] A pre-processing module, used to establish a pre-processing file in the loader configuration of webpack, so as to replace the packaged result content string PAI_MODULE_NAME in webpack with the environment variable MODULE_NAME through the pre-processing file;

[0130] An import module, used to import the replaced packaged result content string PAI_MODULE_NAME in the initialization configuration file of vue-router;

[0131] A routing configuration module, used to add target routing information to the routing configuration of the current code module, where the target routing information is the routing information recorded in the router file corresponding to moduleName.

[0132] The specific implementation manner of this code management device is basically the same as the specific embodiment of the above code management method, and will not be elaborated here.

[0133] In the embodiment of the present application, based on the functions of webpack and the vue framework, through the coordinated operation of the pre-configuration module, the pre-processing module, the import module, and the routing configuration module, operations such as pre-configuring the environment variable MODULE_NAME, establishing a pre-processing file, configuring the initialization configuration file of vue-router, and adding routing configuration information are realized, so as to realize the content of a project management system that meets the requirements. Compared with the management methods in related technologies, it is convenient for component reuse and tool reuse, can improve the code management and project development efficiency at the same time, and users do not have to spend additional learning costs, nor have additional installation and configuration requirements for the operating environment. Therefore, it can control the code management cost and further improve the management flexibility of the code repository.

[0134] The embodiment of the present application also provides an electronic device, which includes: a memory, a processor, a program stored on the memory and executable on the processor, and a data bus for realizing the connection and communication between the processor and the memory. When the program is executed by the processor, the above code management method is realized. This electronic device can be any intelligent terminal including a tablet computer, a vehicle-mounted computer, etc.

[0135] Please refer to Figure 7 , Figure 7 which schematically shows the hardware structure of an electronic device according to another embodiment. The electronic device includes:

[0136] A processor 901, which can be implemented in ways such as a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of the present application;

[0137] A memory 902, which can be implemented in forms such as a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 902 can store an operating system and other application programs. When implementing the technical solutions provided in the embodiments of this specification through software or firmware, the relevant program codes are stored in the memory 902 and are called by the processor 901 to execute the code management method of the embodiments of the present application;

[0138] An input / output interface 903, which is used to implement information input and output;

[0139] A communication interface 904, which is used to implement communication and interaction between this device and other devices. Communication can be achieved through wired means (such as USB, network cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.);

[0140] A bus 905, which transmits information between various components of the device (such as the processor 901, the memory 902, the input / output interface 903, and the communication interface 904);

[0141] Among them, the processor 901, the memory 902, the input / output interface 903, and the communication interface 904 achieve communication connections with each other inside the device through the bus 905.

[0142] The embodiments of the present application also provide a storage medium. The storage medium is a computer-readable storage medium for computer-readable storage. The storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the above-mentioned code management method.

[0143] As a non-transitory computer-readable storage medium, the memory can be used to store non-transitory software programs and non-transitory computer-executable programs. In addition, the memory may include high-speed random access memory, and may also include non-transitory memory, such as at least one magnetic disk storage device, a flash memory device, or other non-transitory solid-state storage devices. In some embodiments, the memory may optionally include a memory remotely disposed relative to the processor, and these remote memories may be connected to the processor through a network. Examples of the above networks include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0144] The code management method, device, electronic device, and computer-readable storage medium based on webpack provided by the embodiments of the present application, based on the self-functions of webpack and the vue framework, through operations such as pre-configuring the environment variable MODULE_NAME, establishing a preprocessing file, configuring the initialization configuration file of vue-router, and adding routing configuration information, etc., to achieve the content of the project management system that meets the requirements. Compared with the management methods in the related art, it is convenient for component reuse and tool reuse, can improve the code management and project development efficiency at the same time, and users do not have to spend additional learning costs, nor have additional installation and configuration requirements for the operating environment. Therefore, it can control the code management cost and further improve the management flexibility of the code repository.

[0145] The embodiments described in the embodiments of the present application are for more clearly illustrating the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided by the embodiments of the present application. Those skilled in the art know that with the evolution of technology and the emergence of new application scenarios, the technical solutions provided by the embodiments of the present application are also applicable to similar technical problems.

[0146] Those skilled in the art can understand that Figures 1-5 the technical solutions shown in do not constitute a limitation on the embodiments of the present application, and may include more or fewer steps than those shown in the figure, or combine certain steps, or different steps.

[0147] The above describes specific embodiments of the present application, and other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments and still achieve the desired result. Additionally, the processes depicted in the figures do not necessarily have to be performed in the specific order or continuous order shown to achieve the desired result. In certain embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0148] Each embodiment in this application is described in a progressive manner. For the same or similar parts among the embodiments, reference can be made to each other. Each embodiment focuses on the differences from other embodiments. In particular, for the embodiments of the device, equipment, and computer-readable storage medium, since they are basically similar to the method embodiments, the description is relatively simple. For the relevant parts, reference can be made to the corresponding descriptions in the method embodiments.

[0149] The device, equipment, and computer-readable storage medium provided in the embodiments of this application correspond to the method. Therefore, the device, equipment, and non-volatile computer storage medium also have beneficial technical effects similar to the corresponding method. Since the beneficial technical effects of the method have been described in detail above, the beneficial technical effects of the corresponding device, equipment, and computer storage medium will not be elaborated here.

[0150] In the 1990s, it was obvious to distinguish whether an improvement to a technology was a hardware improvement (e.g., improvement to the circuit structure such as diodes, transistors, switches, etc.) or a software improvement (improvement to the method flow). However, with the development of technology, many improvements to method flows today can be regarded as direct improvements to the hardware circuit structure. Designers almost always program the improved method flow into the hardware circuit to obtain the corresponding hardware circuit structure. Therefore, it cannot be said that an improvement to a method flow cannot be implemented with a hardware entity module.

[0151] For example, a programmable logic device (PLD) (e.g., a field programmable gate array (FPGA)) is such an integrated circuit whose logic function is determined by the user programming the device. Designers can program themselves to "integrate" a digital system on a PLD without having to ask a chip manufacturer to design and fabricate a dedicated integrated circuit chip. Moreover, today, instead of manually fabricating integrated circuit chips, this programming is mostly implemented using "logic compiler" software, which is similar to the software compiler used in program development and writing. The original code before compilation also has to be written in a specific programming language, which is called a hardware description language (HDL), and there is not only one type of HDL, but many types, such as:

[0152] ABEL (Advanced Boolean Expression Language); AHDL (Altera Hardware Description Language); Confluence; CUPL (Cornell University Programming Language); HDCal; and JHDL (Java Hardware Description Language); Lava, Lola, MyHDL, PALASM, RHDL (Ruby Hardware Description Language), etc.; Currently, among those skilled in the art, VHDL (Very-High-Speed Integrated Circuit Hardware Description Language) and the language Verilog are more commonly used. Those skilled in the art should also be aware that by simply performing logical programming on the method flow using the above-mentioned several hardware description languages and programming it into an integrated circuit, it is easy to obtain a hardware circuit that implements the logical method flow.

[0153] The controller can be implemented in any suitable manner. For example, the controller can take the form of, for example, a microprocessor or a processor and a computer-readable medium that stores computer-readable program code (such as software or firmware) executable by the (micro)processor, logic gates, switches, application-specific integrated circuits (ASICs), programmable logic controllers, and embedded microcontrollers. Examples of the controller include, but are not limited to, the following microcontrollers:

[0154] ARC 625D, Atmel AT91SAM, Microchip PIC18F26K20, and Silicon Labs C8051F320. The memory controller can also be implemented as part of the control logic of the memory. Those skilled in the art also know that in addition to implementing the controller in the form of pure computer-readable program code, the controller can also be implemented in the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, and embedded microcontrollers by logically programming the method steps to achieve the same function. Therefore, such a controller can be considered a hardware component, and the devices included therein for implementing various functions can also be regarded as the structures within the hardware component. Or even, the devices for implementing various functions can be regarded as either software modules for implementing the method or the structures within the hardware component.

[0155] The systems, devices, modules or units illustrated in the above embodiments can be specifically implemented by computer chips or entities, or by products with certain functions. A typical implementation device is a computer. Specifically, the computer can be, for example, a personal computer, a laptop computer, a cellular phone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or any combination of these devices.

[0156] For convenience of description, when describing the above devices, they are described separately as various units according to their functions. Of course, when implementing the embodiments of the present application, the functions of each unit can be implemented in one or more software and / or hardware.

[0157] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the embodiments of the present application can take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the embodiments of the present application can 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.

[0158] This specification is described with reference to the flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each flow and / or block in the flowchart and / or block diagram, and the combination of flows 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 the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, such that the instructions executed by the processor of the computer or other programmable data processing devices produce a device for implementing the functions specified in Figure 1 one or more flows and / or Figure 1 blocks or multiple blocks.

[0159] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, such that the instructions stored in the computer-readable memory produce a manufactured article including an instruction device that implements the functions specified in Figure 1 one or more flows and / or Figure 1 blocks or multiple blocks.

[0160] These computer program instructions can also be loaded onto a computer or other programmable data processing device, so that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process, and thus the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one process Figure 1 one process or multiple processes and / or blocks Figure 1 steps of the functions specified in one block or multiple blocks.

[0161] In a typical configuration, a computing device includes one or more processors (CPUs), an input / output interface, a network interface, and memory.

[0162] The memory may include non-permanent memory in the computer-readable medium, in the form of random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash memory (flash RAM). The memory is an example of a computer-readable medium.

[0163] Computer-readable media includes permanent and non-permanent, removable and non-removable media and can be implemented by any method or technology for information storage. The information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassette tapes, magnetic tape disk storage or other magnetic storage devices, or any other non-transmission media that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media, such as modulated data signals and carrier waves.

[0164] It should also be noted that the term "comprising", "including" or any other variant thereof is intended to cover non-exclusive inclusion, so that a process, method, commodity or device comprising a series of elements not only includes those elements, but also includes other elements not expressly listed, or also includes elements inherent to such process, method, commodity or device. Without further limitation, an element defined by the statement "comprising one..." does not exclude the presence of another identical element in the process, method, commodity or device comprising the element.

[0165] In the embodiments of the present application, "at least one" means one or more, and "a plurality" means two or more. "And / or" describes the relationship between associated objects and indicates that three relationships may exist. For example, A and / or B may represent the case where A exists alone, A and B exist simultaneously, or B exists alone. Here, A and B may be singular or plural. The character " / " generally indicates that the associated objects before and after are in an "or" relationship. "At least one of the following" and similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, and c may represent: a, b, c, a and b, a and c, b and c, or a, b, and c, where a, b, and c may be single or multiple.

[0166] The embodiments of the present application may be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The embodiments of the present application may also be practiced in a distributed computing environment, where tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules may be located in local and remote computer storage media including storage devices.

[0167] The various embodiments in the present application are described in a progressive manner. For the same or similar parts among the various embodiments, reference can be made to each other, and each embodiment focuses on the differences from other embodiments. In particular, for system embodiments, since they are basically similar to method embodiments, the description is relatively simple, and reference can be made to the relevant parts of the method embodiments for the relevant content.

[0168] The above description is only for the embodiments of the present application and is not intended to limit the present application. For those skilled in the art, various changes and modifications can be made to the present application. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included within the scope of the claims of the present application.

Claims

1. A code management method based on webpack, characterized in that, including: Pre-configure the environment variable MODULE_NAME using the cross-platform setting script cross-env based on the Node Package Manager, where MODULE_NAME = moduleName and moduleName is the current code module to be packaged or run; Create a preprocessing file in the loader configuration of webpack to replace the packaged result content string PAI_MODULE_NAME in webpack with the environment variable MODULE_NAME through the preprocessing file; Import the replaced packaged result content string PAI_MODULE_NAME into the initialization configuration file of vue-router; Add target route information to the route configuration of the current code module, where the target route information is the route information recorded in the router file corresponding to moduleName; where the current code module is constructed through the following steps: In the execution script scripts configuration item of package.json, generate the first command for the development environment and the second command for the production environment; Add the environment variable MODULE_NAME to the first command and the second command respectively; Add a target route entry in the router folder; Construct the current code module based on the first command, the second command, and the target route entry.

2. The code management method based on webpack according to claim 1, wherein After constructing the current code module, it further includes: Add a module folder corresponding to the current code module to perform development iteration on the current code module through the module folder.

3. The code management method based on webpack according to claim 2, wherein When there are multiple current code modules, the module folders corresponding to each current code module are different.

4. The code management method based on webpack according to claim 1, characterized in that The target route entry is configured as the `moduleName.js` file.

5. The code management method based on webpack according to claim 1, wherein, Before creating the preprocessing file in the loader configuration of webpack, it further includes: Read the environment variable MODULE_NAME in the webpack configuration.

6. A code management device based on webpack, characterized in that, including: A pre-configuration module for pre-configuring the environment variable MODULE_NAME using the cross-platform setting script cross-env based on the Node Package Manager, where MODULE_NAME = moduleName and moduleName is the current code module to be packaged or run; A preprocessing module for creating a preprocessing file in the loader configuration of webpack to replace the packaged result content string PAI_MODULE_NAME in webpack with the environment variable MODULE_NAME through the preprocessing file; An import module for importing the replaced packaged result content string PAI_MODULE_NAME into the initialization configuration file of vue-router; A routing configuration module, which is used to add target routing information to the routing configuration of the current code module, where the target routing information is the routing information recorded in the router file corresponding to the moduleName; Among them, the current code module is constructed through the following steps: In the execution script scripts configuration item of package.json, generate a first command for the development environment and a second command for the production environment; Add the environment variable MODULE_NAME to the first command and the second command respectively; Add a target routing entry in the router folder; Based on the first command, the second command, and the target routing entry, construct the current code module.

7. An electronic device, comprising: A memory, a processor, and a computer program stored on the memory and executable on the processor, wherein when the processor executes the computer program, the code management method described in any one of claims 1 to 5 is implemented.

8. A computer-readable storage medium, characterized in that, Store computer-executable instructions, and the computer-executable instructions are used to execute the code management method described in any one of claims 1 to 5.

Images