VUE front-end project management analysis method based on webpack

Abstract

The present invention discloses a VUE front-end project management and analysis method based on Webpack. The method comprises: determining one or more Vue sub-components of a Vue front-end project based on all file information of the Vue front-end project during a packaging process according to a Webpack configuration file; analyzing each Vue sub-component of all file information of the Vue front-end project, and determining the initial dependency, complete dependency, and integrated analysis relationship of each Vue sub-component based on the analysis results. The present invention can meet the user's demand for dependency analysis of all files of a Vue front-end project, avoid omission of the dependency relationships of all files, and simultaneously improve the analysis efficiency of determining file dependencies and enhance the user experience.

Description

Technical Field

[0001] The present invention relates to the field of front-end technology, and in particular to a VUE front-end project management and analysis method based on webpack. Background Art

[0002] In the existing technology, the construction process of web front-end projects is usually carried out using supporting construction tools, and various front-end project construction tools are constantly developing. Web browsers mostly use files such as HTML, JS and CSS. Project development makes it difficult for web browsers to adapt, resulting in a complicated process of project tracking and tracing file sources. In the process of completing the construction through front-end construction tools, the construction tools can only display the construction information in a relatively simple way, which easily leads to relationship omissions and cannot well display the performance of the VUE front-end project, affecting the user experience. Summary of the Invention

[0003] In order to overcome the above-mentioned shortcomings of the prior art, the purpose of the present invention is to provide a VUE front-end project management and analysis method based on webpack to solve the problems raised by the above-mentioned background technology.

[0004] The technical solution adopted by the present invention to solve its technical problem is: a VUE front-end project management analysis method based on webpack, the method comprising:

[0005] According to the webpack configuration file packaging process, the file packaging process configures all file information of the root directory of the vue front-end project, and determines one or more vue sub-components of the vue front-end project based on all file information of the vue front-end project in the packaging process;

[0006] Analyze each Vue subcomponent of all file information of the Vue front-end project, and determine the initial dependency relationship of each Vue subcomponent based on the analysis results;

[0007] Analyze the parent component of each Vue sub-component based on its initial dependencies, and determine the complete dependencies of each Vue sub-component;

[0008] According to the packaging process and the complete dependency relationship between each Vue sub-component, the integration analysis relationship between each Vue sub-component is determined.

[0009] As a further improvement of the present invention: according to the webpack packaging process, the webpack construction information is monitored, one or more vue components of all file directory information of the root directory of the current vue front-end project of the webpack-built vue front-end project are obtained, and the dependency relationship is determined according to the analysis of each vue component.

[0010] As a further improvement of the present invention: all file information of the Vue front-end project construction process is obtained, and data information that can characterize the construction structure of the Vue front-end project is generated based on the file information, and the data information includes at least each entry file in the Vue front-end project, each project file corresponding to the entry file, and the dependency relationship between each component in the project file.

[0011] As a further improvement of the present invention: each vue subcomponent of all file information in the vue front-end project is analyzed to determine the directory name of the file corresponding to each vue subcomponent; the initial construction record of each Vue subcomponent is determined according to the file name of the file corresponding to each vue subcomponent, and the initial dependency relationship of each vue component is determined according to the initial construction record of each Vue component.

[0012] As a further improvement of the present invention: each vue subcomponent of all file information in the vue front-end project is analyzed to obtain target attribute information in each vue subcomponent; and the directory name of the file corresponding to each vue subcomponent is determined according to the target attribute information in each vue subcomponent.

[0013] As a further improvement of the present invention: one or more directory association information of each vue sub-component is determined according to the initial dependency relationship of each vue sub-component, one or more directory association information of each vue sub-component is superimposed, the file information of each vue sub-component after the association is determined, and the complete dependency relationship between each vue sub-component is determined according to the file information of each vue sub-component after the association.

[0014] As a further improvement of the present invention: obtaining the mapping relationship between the file information identifier and the Vue sub-component configured during the webpack configuration file packaging process, determining the set corresponding to each Vue sub-component based on the mapping relationship between the file information identifier and the Vue sub-component, and determining the integration analysis relationship between each Vue sub-component based on the complete dependency relationship between each Vue sub-component and the set corresponding to each Vue sub-component.

[0015] A VUE front-end project management and analysis system based on webpack, the system includes:

[0016] The first processing module is used to obtain the construction process information of the Vue front-end project, and the packaging process is configured according to the webpack configuration file. The file packaging process configures all file information of the root directory of the Vue front-end project, and determines one or more Vue sub-components of the Vue front-end project according to all file information of the Vue front-end project in the packaging process;

[0017] The second processing module is used to analyze each Vue sub-component of all file information of the Vue front-end project, and determine the initial dependency relationship of each Vue sub-component according to the analysis result;

[0018] The third processing module analyzes the parent component of each Vue sub-component according to the initial dependency relationship of each Vue sub-component and determines the complete dependency relationship of each Vue sub-component;

[0019] The analysis module determines the integration analysis relationship between each Vue sub-component according to the packaging process and the complete dependency relationship between each Vue sub-component.

[0020] As a further improvement of the present invention: according to the webpack packaging process, the webpack construction information is monitored, one or more vue components of all file directory information of the root directory of the current vue front-end project of the webpack-built vue front-end project are obtained, and the dependency relationship is determined according to the analysis of each vue component.

[0021] As a further improvement of the present invention: all file information of the Vue front-end project construction process is obtained, and data information that can characterize the construction structure of the Vue front-end project is generated based on the file information, and the data information includes at least each entry file in the Vue front-end project, each project file corresponding to the entry file, and the dependency relationship between each component in the project file.

[0022] Compared with the prior art, the present invention has the following beneficial effects:

[0023] The present invention can meet the user's demand for dependency analysis of all files of the Vue front-end project, avoid the omission of the dependencies of all files, and at the same time improve the analysis efficiency of determining file dependencies and improve the user experience. The file information constructed by the Vue front-end project is analyzed and statistical data is constructed through the webpack configuration file, which is convenient for users to analyze the file composition and dependency of the Vue front-end project, thereby determining the adjustable dependency of the files of the Vue front-end project. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 It is a structural schematic diagram of the present invention. DETAILED DESCRIPTION

[0025] The present invention will now be further described with reference to the accompanying drawings and embodiments:

[0026] Figure 1 This is a flow chart of a VUE front-end project management and analysis method based on webpack according to an exemplary embodiment of the present disclosure. Figure 1 As shown, the method includes steps S1 to S4.

[0027] In step S1, according to the webpack configuration file packaging process, the file packaging process configures all file information of the root directory of the vue front-end project, and determines one or more vue sub-components of the vue front-end project according to all file information of the vue front-end project in the packaging process.

[0028] In an embodiment of the present invention, the present invention is aimed at the Vue front-end project, and monitors the webpack construction information according to the webpack packaging process, obtains one or more Vue components of all file directory information of the root directory of the current Vue front-end project built by webpack, and determines the dependency relationship based on the analysis of each Vue component.

[0029] In one embodiment, all file information of the Vue front-end project construction process is obtained, and data information that can characterize the construction structure of the Vue front-end project is generated based on the file information. The data information includes at least each entry file in the Vue front-end project, each project file corresponding to the entry file, and the dependency relationship between each component in the project file.

[0030] In one embodiment, each vue subcomponent of all file information in the vue front-end project is analyzed to obtain target attribute information in each vue subcomponent; and the directory name of the file corresponding to each vue subcomponent is determined based on the target attribute information in each vue subcomponent.

[0031] The Vue front-end project construction of the present invention is obtained after being constructed by the webpack front-end construction tool, so that each entry file in the Vue front-end project, each project file corresponding to the entry file, and the relationship between each component in the project file can be obtained to respectively constitute each node in the Vue front-end project structure.

[0032] In step S2, each vue subcomponent of all file information of the vue front-end project is analyzed, and the initial dependency relationship of each vue subcomponent is determined according to the analysis result.

[0033] In one embodiment, each vue subcomponent of all file information in the vue front-end project is analyzed to determine the directory name of the file corresponding to each vue subcomponent; the initial construction record of each Vue subcomponent is determined according to the file name of the file corresponding to each vue subcomponent, and the initial dependency relationship of each vue component is determined according to the initial construction record of each Vue component.

[0034] The present invention helps to determine the dependency relationship within each vue subcomponent based on the initial construction relationship of each vue subcomponent by determining the initial construction record of each vue subcomponent.

[0035] In step S3, the parent component of each vue subcomponent is analyzed according to the initial dependency relationship of each vue subcomponent, and the complete dependency relationship of each vue subcomponent is determined.

[0036] In one embodiment, one or more directory association information of each vue subcomponent is determined based on the initial dependency relationship of each vue subcomponent, one or more directory association information of each vue subcomponent is superimposed, the file information of each vue subcomponent after association is determined, and the complete dependency relationship between each vue subcomponent is determined based on the file information of each vue subcomponent after association.

[0037] In step S4, the integration analysis relationship between each of the Vue sub-components is determined based on the packaging process and the complete dependency relationship between each of the Vue sub-components.

[0038] In one embodiment, the mapping relationship between the file information identifier and the Vue sub-component configured during the webpack configuration file packaging process is obtained, and the set corresponding to each Vue sub-component is determined based on the mapping relationship between the file information identifier and the Vue sub-component. Based on the complete dependency relationship between each Vue sub-component and the set corresponding to each Vue sub-component, the integration analysis relationship between each Vue sub-component is determined.

[0039] After building and packaging the Vue front-end project, the file construction information obtained during the construction process can be used to analyze the Vue front-end project. Users analyze the file composition and dependencies of the Vue front-end project, obtain specific Vue front-end project performance data, and optimize the built Vue front-end project through the Vue front-end project performance.

[0040] The present invention can meet the user's demand for dependency analysis of all files of the Vue front-end project, avoid the omission of the dependencies of all files, and at the same time improve the analysis efficiency of determining file dependencies and improve the user experience. The file information constructed by the Vue front-end project is analyzed and statistical data is constructed through the webpack configuration file, which is convenient for users to analyze the file composition and dependency of the Vue front-end project, thereby determining the adjustable dependency of the files of the Vue front-end project.

[0041] The present invention relates to a VUE front-end project management and analysis method based on Webpack, aiming to provide a more efficient, flexible and reliable front-end project management and analysis solution to facilitate developers to better develop and maintain front-end projects.

[0042] This method, based on Webpack technology, divides the front-end project into multiple small and independent modules, which are managed and packaged through Webpack's modular packaging mechanism. At the same time, this method also uses the VUE framework to achieve componentization and reusability, improving the development efficiency and quality of the front-end project. Specifically, this method includes the following steps and components:

[0043] 1. Webpack configuration components: According to the needs of the front-end project, formulate the Webpack configuration plan, including entry, output, modules, plug-ins, etc., to facilitate modular packaging and management.

[0044] 2. VUE component development components: Use the VUE framework to realize the componentization and reusability of front-end projects, including views, models, controllers, etc., to improve development efficiency and quality.

[0045] 3. Code static analysis component: Through code static analysis tools, code quality analysis and performance optimization analysis are performed on front-end projects to improve the maintainability and performance of front-end projects.

[0046] 4. Front-end resource management component: For the resource management of front-end projects, including styles, pictures, fonts, etc., unified management and optimization are carried out to improve the loading speed and performance of front-end projects.

[0047] 5. Front-end automated testing components: Use automated testing tools to perform automated testing on front-end projects, including unit testing, integration testing, functional testing, etc., to ensure the quality and stability of front-end projects.

[0048] The advantage of this approach is that, through the combination of Webpack and VUE technologies, it achieves modularity, componentization, and reusability of front-end projects, improving development efficiency and quality. Furthermore, through components such as code static analysis, front-end resource management, and front-end automated testing, it improves the maintainability, performance, and stability of front-end projects, reducing maintenance costs and risks.

[0049] A Vue front-end project management and analysis system based on webpack, the system includes:

[0050] The first processing module is used to obtain the construction process information of the Vue front-end project, and the packaging process is configured according to the webpack configuration file. The file packaging process configures all file information of the root directory of the Vue front-end project, and determines one or more Vue sub-components of the Vue front-end project according to all file information of the Vue front-end project in the packaging process;

[0051] The second processing module is used to analyze each Vue sub-component of all file information of the Vue front-end project, and determine the initial dependency relationship of each Vue sub-component according to the analysis result;

[0052] The third processing module analyzes the parent component of each Vue sub-component according to the initial dependency relationship of each Vue sub-component and determines the complete dependency relationship of each Vue sub-component;

[0053] The analysis module determines the integration analysis relationship between each Vue sub-component according to the packaging process and the complete dependency relationship between each Vue sub-component.

[0054] In one embodiment of the system of the present invention, the webpack packaging process is executed to monitor the webpack construction information, obtain one or more vue components of all file directory information of the root directory of the current vue front-end project built by webpack, and determine the dependency relationship based on the analysis of each vue component.

[0055] In one embodiment of the system of the present invention, all file information of the Vue front-end project construction process is obtained, and data information capable of characterizing the construction structure of the Vue front-end project is generated based on the file information. The data information includes at least each entry file in the Vue front-end project, each project file corresponding to the entry file, and the dependency relationship between each component in the project file.

[0056] A computer device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements any one of the method steps described above when executing the computer program.

[0057] A computer-readable medium having a computer program stored thereon, wherein the computer program includes program instructions, and when the program instructions are executed by a processor, the processor is caused to perform any of the method steps described above.

[0058] Specifically, the innovations of this method include the following aspects:

[0059] 1. Based on the modular packaging mechanism of Webpack, the management and packaging of front-end projects are realized, and the maintainability and reusability of the code are improved.

[0060] 2. The VUE framework is used to realize the componentization and reusability of front-end projects, improving development efficiency and quality.

[0061] 3. Through the code static analysis component, code quality analysis and performance optimization analysis are performed on the front-end project, which improves the maintainability and performance of the front-end project.

[0062] 4. Through the front-end resource management component, the resources of the front-end project are uniformly managed and optimized, which improves the loading speed and performance of the front-end project.

[0063] 5. Perform automated testing on front-end projects through front-end automated testing components to ensure the quality and stability of front-end projects.

[0064] The present invention provides a new VUE front-end project management and analysis method and system based on Webpack, which is efficient, flexible and reliable, provides front-end developers with a better development and maintenance solution, and has good scalability and adaptability, and can easily adapt to different front-end project requirements.

[0065] In summary, after reading the present invention document, ordinary technicians in this field can make various other corresponding transformation schemes based on the technical solutions and technical concepts of the present invention without creative mental work, and all of them fall within the scope of protection of the present invention.

Claims

1. VUE front-end project management analysis method based on webpack, characterized by: The method comprises: S1. Analysis of association between components and directories: According to the webpack configuration file packaging process, the file packaging process configures all file information of the root directory of the vue front-end project, and determines one or more vue sub-components of the vue front-end project based on all file information of the vue front-end project in the packaging process; Analyze each Vue subcomponent of all file information in the Vue front-end project, obtain the target attribute information in each Vue subcomponent; determine the directory name of the file corresponding to each Vue subcomponent based on the target attribute information in each Vue subcomponent; S2. Hierarchical derivation of initial dependencies: Analyze each Vue subcomponent of all file information of the Vue front-end project, and determine the initial dependency of each Vue subcomponent based on the analysis results; specifically: S21. Generate initial build record: Determine the initial build record of each Vue subcomponent according to the directory name of the file corresponding to each Vue subcomponent. S22. Establish initial dependencies: Determine the initial dependencies of each Vue component based on the initial build record of each Vue component; S3. Progressive construction of complete dependencies: Parent component association: Analyze the parent component of each Vue subcomponent based on the initial dependency relationship of each Vue subcomponent, and determine the complete dependency relationship of each Vue subcomponent; Directory information superposition: Determine one or more directory association information of each Vue sub-component based on the initial dependency relationship of each Vue sub-component, superimpose one or more directory association information of each Vue sub-component, determine the file information of each Vue sub-component after association, and determine the complete dependency relationship between each Vue sub-component based on the file information of each Vue sub-component after association; S4. Set mapping of integrated analysis relationships: Obtain the mapping relationship between the file information identifier and the Vue sub-component configured during the webpack configuration file packaging process, determine the set corresponding to each Vue sub-component based on the mapping relationship between the file information identifier and the Vue sub-component, and determine the integration analysis relationship between each Vue sub-component based on the complete dependency relationship between each Vue sub-component and the set corresponding to each Vue sub-component.

2. The VUE front-end project management and analysis method based on webpack according to claim 1 is characterized in that, According to the webpack packaging process, the webpack build information is monitored, and one or more vue components of the root directory of the current vue front-end project of the webpack-built vue front-end project are obtained, and the dependency relationship is determined according to the analysis of each vue component.

3. The VUE front-end project management and analysis method based on webpack according to claim 1 is characterized in that, Obtain all file information of the Vue front-end project construction process, and generate data information that can characterize the construction structure of the Vue front-end project based on the file information. The data information includes at least each entry file in the Vue front-end project, each project file corresponding to the entry file, and the dependency relationship between each component in the project file.

4. The VUE front-end project management and analysis system based on webpack is characterized by: The system comprises: The first processing module is used to obtain the construction process information of the Vue front-end project, and the packaging process is configured according to the webpack configuration file. The file packaging process configures all file information of the root directory of the Vue front-end project, and determines one or more Vue sub-components of the Vue front-end project according to all file information of the Vue front-end project in the packaging process; Analyze each Vue subcomponent of all file information in the Vue front-end project, obtain the target attribute information in each Vue subcomponent; determine the directory name of the file corresponding to each Vue subcomponent based on the target attribute information in each Vue subcomponent; The second processing module is used to analyze each Vue sub-component of all file information of the Vue front-end project, and determine the initial dependency relationship of each Vue sub-component according to the analysis result; The initial dependencies are: Generate initial build record: Determine the initial build record of each Vue subcomponent based on the directory name of the corresponding file of each Vue subcomponent. Establish initial dependencies: Determine the initial dependencies of each Vue component based on the initial build record of each Vue component; The third processing module analyzes the parent component of each Vue sub-component according to the initial dependency relationship of each Vue sub-component and determines the complete dependency relationship of each Vue sub-component; The complete dependencies are: Parent component association: Analyze the parent component of each Vue subcomponent based on the initial dependency relationship of each Vue subcomponent, and determine the complete dependency relationship of each Vue subcomponent; Directory information superposition: Determine one or more directory association information of each Vue sub-component based on the initial dependency relationship of each Vue sub-component, superimpose one or more directory association information of each Vue sub-component, determine the file information of each Vue sub-component after association, and determine the complete dependency relationship between each Vue sub-component based on the file information of each Vue sub-component after association; The analysis module determines the integration analysis relationship between each Vue sub-component according to the packaging process and the complete dependency relationship between each Vue sub-component, specifically: Obtain the mapping relationship between the file information identifier and the Vue sub-component configured during the webpack configuration file packaging process, determine the set corresponding to each Vue sub-component based on the mapping relationship between the file information identifier and the Vue sub-component, and determine the integration analysis relationship between each Vue sub-component based on the complete dependency relationship between each Vue sub-component and the set corresponding to each Vue sub-component.

5. The VUE front-end project management and analysis system based on webpack according to claim 4 is characterized in that, According to the webpack packaging process, the webpack build information is monitored, and one or more vue components of the root directory of the current vue front-end project of the webpack-built vue front-end project are obtained, and the dependency relationship is determined according to the analysis of each vue component.

6. The VUE front-end project management and analysis system based on webpack according to claim 4 is characterized in that, Obtain all file information of the Vue front-end project construction process, and generate data information that can characterize the construction structure of the Vue front-end project based on the file information. The data information includes at least each entry file in the Vue front-end project, each project file corresponding to the entry file, and the dependency relationship between each component in the project file.

Images