Customized configuration management method, electronic device and storage medium for Web front-end projects

Abstract

The present invention relates to a customized configuration management method, electronic device and storage medium for a Web front-end project, including: in the compilation stage, by creating a CUSTOMConfig folder in the project root directory, adding an entry file index.js in the CUSTOMConfig folder, parsing command line parameters through a yargs module, dynamically introducing a configuration file according to a customer number and exposing it to a compiler for use; using HtmlWebpackPlugin and DefinePlugin of Webpack to inject configuration information into options.CUSTOM_CONFIG of an HTML template and a variable process.env.CUSTOM_CONFIG of a packaged build environment, and adding a CUSTOM environment variable in Jenkins to achieve differential compilation; in the running stage, by adding a CUSTOMConfig folder and an entry file index.js in the project root directory, dynamically introducing configuration information diffFeatureCUSTOMConfig of differential attributes and configuration information diffComponentCUSTOMConfig of components; according to the customer number brought by the user login, using a dynamically introduced configuration module to determine whether functions and components are displayed or not, and achieving differentiated management of functions and components. The present invention realizes the customized requirements of Web front-end projects and improves development and maintenance efficiency at the same time.

Description

Technical Field

[0001] The present invention relates to the technical field of web front-end development, and in particular to a customized configuration management method, electronic device and storage medium for a Web front-end project. Background Art

[0002] In the existing Web front-end project development, the differences in requirements of different users often need to be hard-coded at the code level to meet various personalized configurations. This approach not only increases the complexity of the code, but also reduces the maintainability and scalability of the code. The traditional method usually implements personalized requirements by directly introducing different configuration files in the code. However, this method is particularly clumsy and inefficient when facing multiple users and multiple configurations. Every change in requirements or the introduction of new users requires major modifications and reconstruction of the code, which greatly increases the workload of development and maintenance.

[0003] In addition, during the compilation and packaging phase of the project, traditional methods cannot flexibly dynamically inject configuration files according to the needs of different users, resulting in redundant and inefficient compilation results. In the prior art, the method of manually modifying configuration files or preprocessing configurations before compilation is difficult to cope with complex multi-user environments and is prone to configuration conflicts and errors, further increasing development costs and risks.

[0004] In order to overcome the above defects, a new customized configuration management method for Web front-end projects is needed. This method can achieve efficient and flexible user personalized demand configuration management without increasing the complexity of the code, and dynamically inject differentiated configurations during the run and compile stages, thereby improving the development efficiency and maintainability of the project. Summary of the invention

[0005] The purpose of the present invention is to provide a customized configuration management method, electronic device and storage medium for a Web front-end project, so as to solve the problem that the existing technology has high development cost and cannot cope with complex multi-user environments.

[0006] To achieve one of the above-mentioned purposes of the invention, an embodiment of the present invention provides a customized configuration management method for a Web front-end project, the method comprising:

[0007] During the compilation phase, a CUSTOMConfig folder is created in the project root directory, and the entry file index.js is added to the CUSTOMConfig folder. The command line parameters are parsed through the yargs module, and the configuration file is dynamically introduced according to the customer number and exposed to the compiler for use;

[0008] Use HtmlWebpackPlugin and Webpack's DefinePlugin to inject configuration information into the HTML template's options.CUSTOM_CONFIG and the package build environment variable process.env.CUSTOM_CONFIG, and add the CUSTOM environment variable in Jenkins to achieve differential compilation;

[0009] In the running stage, by adding the CUSTOMConfig folder and the entry file index.js in the project root directory, the configuration information diffFeatureCUSTOMConfig of the differentiated attributes and the configuration information diffComponentCUSTOMConfig of the components are dynamically introduced;

[0010] Based on the customer number brought by the user when logging in, a dynamically introduced configuration module is used to determine whether functions and components are displayed, thereby achieving differentiated management of functions and components.

[0011] As a further improvement of an embodiment of the present invention, the method further includes that the step of parsing command line parameters by the yargs module includes:

[0012] Use const yargs = require ('yargs / yargs') and const {hideBin} = require ('yargs / helpers') to introduce the yargs module;

[0013] Parse command line parameters through const argv = yargs(hideBin(process.argv)).argv;

[0014] Get the customer number CUSTOM and get the customer number through const{CUSTOM='A'}=argv, the default is A.

[0015] As a further improvement of an embodiment of the present invention, the method further includes that the step of dynamically introducing the configuration file includes:

[0016] Use const CUSTOMConfig=require(. / ${CUSTOM}.js) to introduce the corresponding configuration file according to the customer number;

[0017] Expose the configuration information to the compiler through module.exports=CUSTOMConfig.

[0018] As a further improvement of an embodiment of the present invention, the method further includes that the step of adding the CUSTOM environment variable in Jenkins includes:

[0019] Add the CUSTOM environment variable in the Jenkins build configuration;

[0020] The CUSTOM environment variable is used to control the differentiated compilation process for different customers during the compilation phase.

[0021] As a further improvement of an embodiment of the present invention, the method further includes the step of dynamically introducing differential attribute configuration information diffFeatureCUSTOMConfig, including:

[0022] Create a diffFeatureCUSTOMConfig.js file in the CUSTOMConfig folder in the project root directory;

[0023] Define the detailed configuration of feature differentiation in the diffFeatureCUSTOMConfig.js file.

[0024] As a further improvement of an embodiment of the present invention, the method further includes the step of dynamically introducing component configuration information diffComponentCUSTOMConfig including:

[0025] Create a diffComponentCUSTOMConfig.js file in the CUSTOMConfig folder in the project root directory;

[0026] Define the detailed configuration of component differentiation in the diffComponentCUSTOMConfig.js file.

[0027] As a further improvement of an embodiment of the present invention, the method further includes that the step of using the dynamically introduced configuration module to determine the function and component display includes:

[0028] Dynamically import the configuration module in the code through import{diffFeatureCUSTOMConfig,diffComponentCUSTOMConfig}from'@CUSTOMConfig';

[0029] Use the information in the configuration module to determine whether different customer functions and components are displayed or not through conditional judgment.

[0030] As a further improvement of an embodiment of the present invention, the method further includes, when there are newly added customer numbers and differentiated requirements, implementing it by adding or modifying corresponding configuration files in the CUSTOMConfig folder.

[0031] To achieve one of the above-mentioned purposes of the invention, an embodiment of the present invention further provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program that can be run on the processor, and when the program is executed on the processor, the steps in the customized configuration management method of the Web front-end project as described above are implemented.

[0032] To achieve one of the above-mentioned purposes of the invention, an embodiment of the present invention further provides a storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a processor, the steps in the customized configuration management method of the Web front-end project as described above are implemented.

[0033] Compared with the prior art, the present invention provides a customized configuration management method, electronic device and storage medium for a Web front-end project, which realizes the customized requirements of the Web front-end project by dynamically introducing configuration files in the compilation stage and the operation stage. The advantages are that it simplifies the differentiated management of multiple customers, improves the development and maintenance efficiency, and only needs to modify the configuration files to add new customers and differentiated requirements, without changing the core code. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] Figure 1 It is an overall flow chart of the customized configuration management method of the Web front-end project described in the present invention. DETAILED DESCRIPTION

[0035] The present invention will be described in detail below in conjunction with the specific embodiments shown in the accompanying drawings. However, these embodiments do not limit the present invention, and any structural, methodological, or functional changes made by a person skilled in the art based on these embodiments are all within the scope of protection of the present invention.

[0036] The embodiments of the present invention are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain the present invention, and cannot be understood as limiting the present invention.

[0037] In the first embodiment of the present invention, the present invention provides a customized configuration management method for a Web front-end project, such as Figure 1 As shown, the method includes,

[0038] S1: During the compilation phase, a CUSTOMConfig folder is created in the project root directory, and the entry file index.js is added to the CUSTOMConfig folder. The command line parameters are parsed through the yargs module, and the configuration file is dynamically introduced according to the customer number and exposed to the compiler for use;

[0039] S2: Use HtmlWebpackPlugin and Webpack's DefinePlugin to inject configuration information into options.CUSTOM_CONFIG of the HTML template and the variable process.env.CUSTOM_CONFIG of the packaged build environment, and add the CUSTOM environment variable in Jenkins to achieve differential compilation;

[0040] S3: In the running stage, by adding the CUSTOMConfig folder and the entry file index.js in the project root directory, the configuration information diffFeatureCUSTOMConfig of the differentiated attributes and the configuration information diffComponentCUSTOMConfig of the components are dynamically introduced;

[0041] S4: Based on the customer number brought by the user when logging in, use the dynamically introduced configuration module to determine whether functions and components are displayed, thereby achieving differentiated management of functions and components.

[0042] In a specific embodiment of the present invention, the step of parsing command line parameters through the yargs module is specifically as follows:

[0043] Use const yargs = require ('yargs / yargs') and const {hideBin} = require ('yargs / helpers') to introduce the yargs module;

[0044] Parse command line parameters through const argv = yargs(hideBin(process.argv)).argv;

[0045] Get the customer number CUSTOM and get the customer number through const{CUSTOM='A'}=argv, the default is A.

[0046] It should be noted that the yargs module is introduced: yargs is a powerful tool library for parsing command line parameters, making it simple and intuitive to obtain and process command line input. hideBin is an auxiliary function provided by yargs to hide the parameters that come with Node.js and ensure that only custom command line parameters are processed.

[0047] It should be noted that the command line parameters are parsed: process.argv is an array provided by Node.js, which contains the command line parameters when starting the Node.js process. After filtering out the parameters that come with Node.js through the hideBin function, the yargs module will parse the remaining parameters and store the results in the argv object. The argv object contains all the command line parameters passed in by the user, stored in the form of key-value pairs, for easy subsequent use.

[0048] It should be noted that the customer number CUSTOM is obtained from the parsed argv object, and the default value for CUSTOM is set through const{CUSTOM='A'}=argv. If the user does not specify the CUSTOM parameter in the command line, the customer number 'A' is used by default. This method ensures the robustness of the code. Even if the user does not provide the CUSTOM parameter, the program can still run normally and use the default configuration.

[0049] In a specific embodiment of the present invention, the step of dynamically introducing the configuration file is specifically as follows:

[0050] Use const CUSTOMConfig=require(. / ${CUSTOM}.js) to introduce the corresponding configuration file according to the customer number;

[0051] Expose the configuration information to the compiler through module.exports=CUSTOMConfig.

[0052] It should be noted that the corresponding configuration file is introduced according to the customer number: ${CUSTOM} is the customer number obtained by parsing the command line parameters. This code concatenates the customer number into the path string to correctly locate the configuration file of the corresponding customer. For example, if the customer number is 'A', the path of the imported configuration file is . / A.js. This dynamic introduction method allows different configuration files to be loaded according to different customer numbers, thereby realizing the customization requirements of the project.

[0053] It should be noted that the configuration information is exposed to the compiler for use: the configuration file content introduced by the require statement is stored in the CUSTOMConfig variable, and then exported through module.exports so that other modules or compilers can access this configuration information. In this way, the compiler can generate corresponding customized project versions according to the configuration files of different customers during the compilation process. This step ensures that the information in the configuration file can be referenced and used by other parts of the project, thereby achieving differentiated management between different customers.

[0054] In a specific embodiment of the present invention, the steps of adding the CUSTOM environment variable in Jenkins are as follows:

[0055] Add the CUSTOM environment variable in the Jenkins build configuration;

[0056] The CUSTOM environment variable is used to control the differentiated compilation process for different customers during the compilation phase.

[0057] Furthermore, by configuring the bundled file, during the compilation phase, HtmlWebpackPlugin and Webpack's DefinePlugin are injected into the HTML template's options.CUSTOM_CONFIG and the bundled build environment's variable process.env.CUSTOM_CONFIG.

[0058] It should be noted that the steps to add the CUSTOM environment variable in the Jenkins build configuration include logging into the Jenkins management interface, finding the project to be configured, and entering the project's configuration page. In the "Build Environment" or "Build" section, add a new environment variable named CUSTOM and the value is the customer number. For example, the value of CUSTOM can be set to a specific customer number such as A or B. In this way, we can inject a specific customer number into the Jenkins build process, thereby implementing build configurations for different customers.

[0059] It should be noted that in the process of controlling the differentiated compilation of different customers, the build script can be a shell script, a batch file, or a configuration file of a build tool (such as a Webpack configuration file). In the build script, the compilation parameters are dynamically adjusted by referencing the environment variable CUSTOM. For example, in the Webpack configuration file, the value of the CUSTOM environment variable can be obtained through process.env.CUSTOM, and the corresponding configuration file can be loaded according to the value. In this way, the configuration files of different customers will be dynamically introduced during the compilation phase, thereby achieving differentiated compilation. In the above way, customized project versions can be generated according to different customer numbers in the same set of build pipelines to meet the needs of different customers.

[0060] In a specific embodiment of the present invention, the step of dynamically introducing the differential attribute configuration information diffFeatureCUSTOMConfig is specifically as follows:

[0061] Create a diffFeatureCUSTOMConfig.js file in the CUSTOMConfig folder in the project root directory;

[0062] Define the detailed configuration of feature differentiation in the diffFeatureCUSTOMConfig.js file.

[0063] Furthermore, during the runtime phase, add a CUSTOMConfig folder to the project root directory and add an entry file index.js. The code is as follows:

[0064] / / When the project is running, dynamically introduce the configuration information of the differentiated attributes

[0065] import diffFeatureCUSTOMConfig from ". / diffFeatureCUSTOMConfig";

[0066] / / When the project is running, dynamically import the configuration information of the component

[0067] import diffComponentCUSTOMConfig from ". / diffComponentCUSTOMConfig";

[0068] / / When the project is running, expose the configuration information to other places

[0069] export{

[0070] diffFeatureCUSTOMConfig,

[0071] diffComponentCUSTOMConfig

[0072] };

[0073] It should be noted that the diffFeatureCUSTOMConfig.js file is used to define the differentiated configuration of functions for different customers, so that the corresponding functions can be adjusted according to the specific needs of the customers when the project is running. The configuration file can be in the form of a JavaScript object, containing the function attributes and settings of different customers. For example, specific UI element display, function switches, etc. can be defined for different customers. As shown in the following code:

[0074] export default{

[0075] ReportbookStyle:

[0076] themePhotoFormItem: ["A"], / / Only customer A has this attribute

[0077] nameFormItem: ["A","B"], / / Customers A and B have this attribute

[0078] },

[0079] channelSetting:{

[0080] themeSettingButton:["B","A"], / / Customers A and B display theme setting button

[0081] },

[0082] };

[0083] From the above code, we can see that the functional differentiation configurations of different customers are clearly listed, and can be dynamically loaded and applied according to the customer number when the project is running. This configuration method enables the project to flexibly respond to changes in the needs of different customers. It only needs to be modified in the configuration file without changing the core code, which greatly improves the efficiency of maintenance and expansion.

[0084] In a specific embodiment of the present invention, the step of dynamically introducing component configuration information diffComponentCUSTOMConfig is as follows:

[0085] Create a diffComponentCUSTOMConfig.js file in the CUSTOMConfig folder in the project root directory;

[0086] Define the detailed configuration of component differentiation in the diffComponentCUSTOMConfig.js file.

[0087] It should be noted that the component configuration information of different customers is defined through the diffComponentCUSTOMConfig.js file, so that different components can be dynamically introduced according to customer needs when the project is running. The configuration file can be in the form of a JavaScript object, containing component paths and related settings for different customers. For example, specific component paths can be defined for different customers to achieve customized loading of components. As shown in the following code:

[0088] export default{

[0089] A:

[0090] AppThemePreview:"@ / pages / settingCenter / other / APPTheme / components / Preview / components / A / index.tsx", / / Component path of client A

[0091] },

[0092] B:

[0093] AppThemePreview:"@ / pages / settingCenter / other / APPTheme / components / Preview / components / B / index.tsx",

[0094] },

[0095] };

[0096] From the above code, we can see that the component configuration information of different customers is clearly listed. The corresponding components can be dynamically loaded according to the customer number when the project is running to avoid the differentiation of different components for different customers A and B. This configuration method enables the project to flexibly respond to changes in the needs of different customers. It only needs to be modified in the configuration file without changing the core code, which greatly improves the efficiency of maintenance and expansion. The dynamic loading of components can be achieved through conditional judgment or dynamic import. According to the path information in the configuration file, the corresponding customer's components are introduced when the project is running. In this way, the project can present different interfaces and functions according to the needs of different customers to meet customization requirements.

[0097] In a specific embodiment of the present invention, the steps of using the dynamically introduced configuration module to determine the function and component display are specifically as follows:

[0098] Dynamically import the configuration module in the code through import{diffFeatureCUSTOMConfig,diffComponentCUSTOMConfig}from'@CUSTOMConfig';

[0099] Use the information in the configuration module to determine whether different customer functions and components are displayed or not through conditional judgment.

[0100] It should be noted that in the project code, the import statement is used to dynamically introduce the function and component configuration modules from the @CUSTOMConfig directory. In this way, the differentiated configuration files of different customers are imported into the project. diffFeatureCUSTOMConfig contains the configuration information of function differentiation, and diffComponentCUSTOMConfig contains the configuration information of component differentiation. In this way, the project can access this configuration information at runtime and dynamically adjust functions and components according to customer needs.

[0101] It should be noted that in the project code, the information obtained from the configuration module is used to control the display of different customer functions and components through conditional judgment. For example, when rendering UI components, you can decide whether to display a specific function button based on the settings in the configuration module. As shown in the following code:

[0102] / / Get the client code from props

[0103] const customerCode=props.orgCode;

[0104] / / Determine whether to display the theme setting button const showThemeSettingButton=diffFeatureCUSTOMConfig.channelSetting.themeSettingButton.includes(customerCode);

[0105] return(

[0106]

[0107] {showThemeSettingButton ? (

[0108] <button type="link" onclick="{()=">{handleClickThemeSetting(record)}}>

[0109] Channel skin management< / button>

[0110] ):null}

[0111] );

[0113] In the above code, the customer code is first obtained from props, and then the configuration information in diffFeatureCUSTOMConfig is used to determine whether the "Theme Settings Button" should be displayed for the current customer. If the configuration contains the current customer code, the button is displayed, otherwise it is not displayed.

[0114] In a specific implementation of the present invention, when there are newly added customer numbers and differentiated requirements, this is achieved by adding or modifying corresponding configuration files in the CUSTOMConfig folder.

[0115] Specifically, the new or modified configuration files include:

[0116] Add a new customer number: Create a configuration file named after the customer number in the CUSTOMConfig folder for the new customer to define the customer's customized configuration.

[0117] Modify existing configuration files: Open and edit the configuration files corresponding to the customer number in the CUSTOMConfig folder to update or add new differentiated requirements.

[0118] Dynamically introduce new configuration: In the project code, dynamically introduce the configuration file to ensure that the correct configuration information is loaded according to the customer number.

[0119] Apply new configuration: Use the information in the configuration file in various parts of the project to dynamically render customer-specific functions and components through conditional judgments.

[0120] In the third embodiment of the present invention, the present invention provides an electronic device, including a memory and a processor, wherein the memory stores a computer program that can be run on the processor, and when the program is executed on the processor, the steps in the customized configuration management method of the Web front-end project as described above are implemented.

[0121] In a fourth embodiment of the present invention, the present invention provides a storage medium storing a computer program, which, when executed by a processor, implements the steps in the customized configuration management method for a Web front-end project as described above.

[0122] In summary, the invention provides a customized configuration management method, electronic device and storage medium for a Web front-end project, which realizes the customized requirements of a Web front-end project by dynamically introducing configuration files in the compilation stage and the operation stage. The advantages are that it simplifies the differentiated management of multiple customers, improves the development and maintenance efficiency, and only requires modifying the configuration files to add new customers and differentiated requirements, without changing the core code.

[0123] It should be understood that although this specification is described according to implementation modes, not every implementation mode contains only one independent technical solution. This description of the specification is only for the sake of clarity. Those skilled in the art should regard the specification as a whole. The technical solutions in each implementation mode may also be appropriately combined to form other implementation modes that can be understood by those skilled in the art.

[0124] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the modules described above can refer to the corresponding process in the aforementioned method implementation, and will not be repeated here.

[0125] The modules described as separate components may or may not be physically separated, and the components shown as modules may or may not be physical modules, that is, they may be located in one place or distributed on multiple network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the present implementation scheme.

[0126] In addition, each functional module in each embodiment of the present application can be integrated into one processing module, or each module can exist physically separately, or two or more modules can be integrated into one module. The above integrated modules can be implemented in the form of hardware or in the form of hardware plus software functional modules.

[0127] The above-mentioned integrated module implemented in the form of a software function module can be stored in a computer-readable storage medium. The above-mentioned software function module is stored in a storage medium, including a number of instructions for a computer system (which can be a personal computer, a server, or a network system, etc.) or a processor to perform some steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk and other media that can store program codes.

[0128] Finally, it should be noted that the above implementation modes are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned implementation modes, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned implementation modes, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various implementation modes of the present application.

Claims

1. A customized configuration management method for a Web front-end project, characterized in that: include, During the compilation phase, a CUSTOMConfig folder is created in the project root directory, and the entry file index.js is added to the CUSTOMConfig folder. The command line parameters are parsed through the yargs module, and the configuration file is dynamically introduced according to the customer number and exposed to the compiler for use; The step of parsing command line parameters through the yargs module includes: Use const yargs = require ('yargs / yargs') and const {hideBin} = require ('yargs / helpers') to introduce the yargs module; Parse command line parameters through const argv = yargs(hideBin(process.argv)).argv; Get the customer number CUSTOM and pass const{CUSTOM='A'}=argv to get the customer number, the default is A; The step of dynamically introducing the configuration file includes: Use const CUSTOMConfig=require(. / ${CUSTOM}.js) to introduce the corresponding configuration file according to the customer number; Expose the configuration information to the compiler through module.exports=CUSTOMConfig; Use HtmlWebpackPlugin and Webpack's DefinePlugin to inject configuration information into the HTML template's options.CUSTOM_CONFIG and the package build environment variable process.env.CUSTOM_CONFIG, and add the CUSTOM environment variable in Jenkins to achieve differential compilation; The steps to add the CUSTOM environment variable in Jenkins include: Add the CUSTOM environment variable in the Jenkins build configuration; Use the CUSTOM environment variable to control the differentiated compilation process for different customers during the compilation phase; In the running stage, by adding the CUSTOMConfig folder and the entry file index.js in the project root directory, the configuration information diffFeatureCUSTOMConfig of the differentiated attributes and the configuration information diffComponentCUSTOMConfig of the components are dynamically introduced; Based on the customer number brought by the user when logging in, the dynamically introduced configuration module is used to determine whether functions and components are displayed, thereby achieving differentiated management of functions and components; When there are new customer numbers and differentiated requirements, this is achieved by adding or modifying the corresponding configuration files in the CUSTOMConfig folder.

2. The customized configuration management method for a Web front-end project according to claim 1, characterized in that: The steps of dynamically introducing the differential attribute configuration information diffFeatureCUSTOMConfig include: Create a diffFeatureCUSTOMConfig.js file in the CUSTOMConfig folder in the project root directory; Define the detailed configuration of feature differentiation in the diffFeatureCUSTOMConfig.js file.

3. The customized configuration management method for a Web front-end project according to claim 2, characterized in that: The steps of dynamically introducing component configuration information diffComponentCUSTOMConfig include: Create a diffComponentCUSTOMConfig.js file in the CUSTOMConfig folder in the project root directory; Define the detailed configuration of component differentiation in the diffComponentCUSTOMConfig.js file.

4. The customized configuration management method for a Web front-end project according to claim 3, characterized in that: The step of using the dynamically introduced configuration module to determine the function and component display includes: Dynamically import the configuration module in the code through import{diffFeatureCUSTOMConfig,diffComponentCUSTOMConfig}from'@CUSTOMConfig'; Use the information in the configuration module to determine whether different customer functions and components are displayed or not through conditional judgment.

5. An electronic device, comprising a memory and a processor, characterized in that: The memory stores a computer program that can be run on the processor, and when the program is executed on the processor, the steps in the customized configuration management method for a Web front-end project as described in any one of claims 1 to 4 are implemented.

6. A storage medium storing a computer program, characterized in that: When the computer program is executed by the processor, the steps in the customized configuration management method for a Web front-end project as described in any one of claims 1 to 4 are implemented.

Images