Front-end component sharing method, device, computer equipment and storage medium

Abstract

The present disclosure discloses a front-end component sharing method, apparatus, computer equipment, and storage medium, belonging to the field of front-end development technology. The method comprises: obtaining detection configuration information; determining a target front-end component based on the detection configuration information; generating a target component file corresponding to the target front-end component; and publishing the target component file to a sharing platform. Because each front-end component is tested according to a fixed logical algorithm, the problem of low quality when manually screening and extracting reusable front-end components is solved, saving manual and time resources, and improving the efficiency of extracting reusable front-end components, thereby improving the efficiency of front-end development.

Description

Technical Field

[0001] The present disclosure relates to the field of front-end development technology, and in particular to a front-end component sharing method, apparatus, computer equipment, and storage medium. Background Art

[0002] At present, when conducting front-end development projects, there is a demand to reuse some front-end components. Among them, reusable front-end components with low coupling need to be extracted and the front-end component content needs to be published on a shared platform for developers to directly download and use during the front-end development process.

[0003] In related technologies, in order to extract some front-end components and publish them on a shared platform, developers need to view the component codes and related annotation files corresponding to each front-end component, and screen some front-end components that can be extracted and published according to the characteristics of reusable front-end components. Developers then manually write instruction documents for the extracted and published front-end components and publish them on the shared platform.

[0004] However, in the actual application process of the solutions in the related technology, developers need to manually screen reusable front-end components, which requires a lot of manpower and time resources, and manual screening may result in screening errors, which leads to low quality of component extraction and reduces the efficiency of front-end development. Summary of the Invention

[0005] The present disclosure provides a front-end component sharing method, apparatus, computer equipment, and storage medium. The technical solution is as follows:

[0006] In one aspect, a front-end component sharing method is provided, the method comprising:

[0007] Acquire detection configuration information, where the detection configuration information is used to detect whether the front-end component can support sharing;

[0008] Determine a target front-end component according to the detection configuration information, where the target front-end component is the front-end component that supports sharing;

[0009] Generate a target component file corresponding to the target front-end component, wherein the target component file is a file used to install and run the target front-end component;

[0010] The target component file is published to a sharing platform, which is a network platform for users to download or upload the target component file.

[0011] In a possible implementation, determining a target front-end component according to the detection configuration information includes:

[0012] Parsing the detection configuration information to obtain configuration rules and detection conditions; the configuration rules are used to indicate the detection content that needs to be detected on the front-end component; the detection conditions are used to indicate at least one of the detection contents that the target front-end component needs to meet;

[0013] Obtaining the detection content in the configuration rule;

[0014] Detecting the detection content in the front-end component and determining a detection result corresponding to the detection content;

[0015] In response to the detection results corresponding to the various detection contents indicated in the detection conditions all being detected as passed, the front-end component is determined as the target front-end component.

[0016] In a possible implementation, the detection content includes at least one of a first detection content, a second detection content, and a third detection content;

[0017] The first detection content is that the front-end component has no dependency relationship;

[0018] The second detection content is that the front-end component has a component interface definition;

[0019] The third detection content is used to indicate that the component type of the front-end component is a first front-end component; the first front-end component is used to indicate the front-end component that has a simple encapsulation degree and is reusable.

[0020] In a possible implementation, detecting the detection content in the front-end component and determining a detection result corresponding to the detection content includes:

[0021] In response to the fact that there is no relative path reference code and asynchronous request logic that depends on other front-end components in the front-end component code, it is determined that the detection result corresponding to the first detection content is detection passed.

[0022] In a possible implementation, detecting the detection content in the front-end component and determining a detection result corresponding to the detection content includes:

[0023] In response to the presence of a component interface description in the front-end component code, it is determined that the detection result corresponding to the second detection content is detection passed.

[0024] In a possible implementation, detecting the detection content in the front-end component and determining a detection result corresponding to the detection content includes:

[0025] Determine the component type of the front-end component according to the front-end component code; the component type is used to distinguish the scale of the front-end component; the component type includes the first front-end component and the second front-end component, and the second front-end component is used to indicate the front-end component with complex packaging or non-reusable;

[0026] In response to the component type being the first front-end component, it is determined that the detection result corresponding to the third detection content is detection passed.

[0027] In a possible implementation, generating a target component file corresponding to the target front-end component and publishing the target component file to a sharing platform includes:

[0028] Obtaining a scaffolding template corresponding to the target front-end component, wherein the scaffolding template is a template used to develop the target front-end component;

[0029] Obtaining a front-end component code corresponding to the target front-end component; the front-end component code is the code used to develop the target front-end component;

[0030] Generate an executable file according to the scaffolding template and the front-end component code;

[0031] The executable file is published to the package management platform npm, which is a network platform for the user to upload or download files.

[0032] In a possible implementation, the target component file further includes a preview file; in response to the preview file including the component preview image;

[0033] The generating of the target component file corresponding to the target front-end component and publishing the target component file to the sharing platform further includes:

[0034] Generate the component preview image according to the front-end component code corresponding to the target front-end component;

[0035] The component preview image is published to the online document preview platform; the online document preview platform is a network platform for the user to upload or preview files online.

[0036] In a possible implementation, in response to the preview file further including an interface description file;

[0037] Generating a target component file corresponding to the target front-end component and publishing the target component file to a sharing platform includes:

[0038] In response to the front-end component code corresponding to the target front-end component including a component interface description, generating the interface description file corresponding to the target front-end component; the interface description file is used to describe the interface information included in the front-end component;

[0039] The interface description file is published to the document online preview platform.

[0040] In a possible implementation, before obtaining the detection configuration information, the method further includes:

[0041] Obtaining component configuration information, where the component configuration information is used to indicate the storage directory location of the front-end component;

[0042] Determine the storage directory location of the front-end component code corresponding to the front-end component according to the component configuration information;

[0043] Obtain the front-end component code under the storage directory location.

[0044] In one aspect, a front-end component sharing device is provided, the device comprising:

[0045] An information acquisition module is used to acquire detection configuration information; the detection configuration information is information used to detect whether the front-end component can be shared;

[0046] a target determination module, configured to determine a target front-end component according to the detection configuration information, wherein the target front-end component is the front-end component that can be shared;

[0047] A file publishing module is used to generate a target component file corresponding to the target front-end component, and the target component file is a file used to install and run the target front-end component;

[0048] The file publishing module is further used to publish the target component file to a sharing platform; the sharing platform is a network platform for users to download or upload the target component file.

[0049] In a possible implementation, the target determination module includes:

[0050] An information parsing submodule is configured to parse the detection configuration information and obtain configuration rules and detection conditions; the configuration rules are used to indicate the detection content that needs to be detected for the front-end component; the detection conditions are used to indicate at least one of the detection contents that the target front-end component needs to meet;

[0051] A content acquisition submodule, configured to acquire the detection content in the configuration rule;

[0052] A result determination submodule, configured to detect the detection content in the front-end component and determine a detection result corresponding to the detection content;

[0053] The target determination submodule is configured to determine the front-end component as the target front-end component in response to the detection results corresponding to the respective detection contents indicated in the detection conditions all being detected as passed.

[0054] In a possible implementation, the detection content includes at least one of a first detection content, a second detection content, and a third detection content;

[0055] The first detection content is that the front-end component has no dependency relationship;

[0056] The second detection content is that the front-end component has a component interface definition;

[0057] The third detection content is used to indicate that the component type of the front-end component is a first front-end component; the first front-end component is used to indicate the front-end component that has a simple encapsulation degree and is reusable.

[0058] In a possible implementation, the result determination submodule includes:

[0059] The first determination unit is configured to determine that the detection result corresponding to the first detection content is a passed detection in response to the absence of relative path reference code and asynchronous request logic that depend on other front-end components in the front-end component code.

[0060] In a possible implementation, the result determination submodule includes:

[0061] The second determining unit is configured to determine that the detection result corresponding to the second detection content is a detection pass in response to the presence of a component interface description in the front-end component code.

[0062] In a possible implementation, the result determination submodule includes:

[0063] a type determination unit, configured to determine the component type of the front-end component according to the front-end component code; the component type is used to distinguish the scale of the front-end component; the component type includes the first front-end component and the second front-end component, the second front-end component is used to indicate the front-end component with a complex packaging level or non-reusable;

[0064] The third determining unit is configured to determine, in response to the component type being the first front-end component, that the detection result corresponding to the third detection content is a detection pass.

[0065] In a possible implementation, the file publishing module includes:

[0066] A template acquisition submodule is used to acquire a scaffolding template corresponding to the target front-end component, wherein the scaffolding template is a template used to develop the target front-end component;

[0067] A code acquisition submodule is used to acquire the front-end component code corresponding to the target front-end component; the front-end component code is the code used to develop the target front-end component;

[0068] A file generation submodule is used to generate an executable file according to the scaffolding template and the front-end component code;

[0069] The file publishing submodule is used to publish the executable file to the package management platform npm, which is a network platform for the user to upload or download files.

[0070] In a possible implementation, the target component file further includes a preview file; in response to the preview file including the component preview image;

[0071] The file publishing module further includes:

[0072] A preview image generation submodule, configured to generate the component preview image according to the front-end component code corresponding to the target front-end component;

[0073] The image publishing submodule is used to publish the component preview image to the document online preview platform; the document online preview platform is a network platform for the user to upload or preview files online.

[0074] In a possible implementation, in response to the preview file further including an interface description file;

[0075] The file publishing module includes:

[0076] An interface description file generating submodule is configured to generate an interface description file corresponding to the target front-end component in response to a component interface description included in the front-end component code corresponding to the target front-end component; the interface description file is used to describe the interface information included in the front-end component;

[0077] The interface description file publishing submodule is used to publish the interface description file to the document online preview platform.

[0078] On the other hand, a computer device is provided, which includes a processor and a memory, wherein the memory stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the above-mentioned front-end component sharing method.

[0079] On the other hand, a computer-readable storage medium is provided, in which at least one instruction, at least one program, code set or instruction set is stored, and the at least one instruction, the at least one program, the code set or instruction set is loaded and executed by a processor to implement the above-mentioned front-end component sharing method.

[0080] According to one aspect of the present application, a computer program product is provided, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the front-end component sharing method provided in various optional implementations of the above aspects.

[0081] The technical solutions provided by the embodiments of the present disclosure may have the following beneficial effects:

[0082] The computer equipment determines the corresponding logical algorithm based on the detection configuration information preset by the developer, automatically screens and extracts the front-end components, and detects each front-end component through a fixed logical algorithm, thereby solving the problem of low quality when manually screening and extracting reusable front-end components, saving labor and time resources, and improving the efficiency of extracting reusable front-end components, thereby improving the efficiency of front-end development.

[0083] It should be understood that the foregoing general description and the following detailed description are exemplary only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0084] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

[0085] Figure 1 is a schematic diagram of a front-end component automatic extraction system according to an exemplary embodiment;

[0086] Figure 2 This is a diagram showing a front-end component framework in a project according to an exemplary embodiment;

[0087] Figure 3 is a flow chart showing a front-end component sharing method according to an exemplary embodiment;

[0088] Figure 4 is a flow chart of a front-end component sharing method according to an exemplary embodiment;

[0089] Figure 5 A front-end component automatically generates a service flow chart according to an exemplary embodiment;

[0090] Figure 6 is a block diagram showing a front-end component sharing device according to an exemplary embodiment;

[0091] Figure 7 The figure is a schematic structural diagram of a computer device according to an exemplary embodiment. DETAILED DESCRIPTION

[0092] Exemplary embodiments will be described in detail herein, with examples illustrated in the accompanying drawings. In the following description, when referring to the drawings, identical numerals in different figures represent identical or similar elements, unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all possible embodiments consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims.

[0093] It should be understood that the term "several" in this document refers to one or more, and "multiple" refers to two or more. "And / or" describes the relationship between associated objects, indicating that three possible relationships exist. For example, "A and / or B" can mean: A exists alone, A and B exists simultaneously, or B exists alone. The character " / " generally indicates that the associated objects are in an "or" relationship.

[0094] For ease of understanding, the nouns involved in the embodiments of the present disclosure are explained below.

[0095] 1) Front-end development

[0096] Front-end development is the process of creating front-end interfaces such as web pages or apps (applications) to present them to users. User interface interaction of Internet products can be achieved through HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), JavaScript (literal scripting language) and various derived technologies, frameworks, and solutions.

[0097] 2) Front-end components

[0098] A front-end component is an entity that encapsulates the code for the web page's view and user interaction. It facilitates business logic processing. Front-end components can be individual functional code segments within a project and can be stored in directories.

[0099] A reusable component is one that developers can directly manipulate visually within a software construction tool. A software construction tool can be a web page builder, a visual application builder, a GUI (Graphical User Interface) design builder, or a server application builder. A construction tool can also be a document editor for a compound document containing several beans (software component models).

[0100] 3) Package Management Platform (npm)

[0101] npm is a package hosting platform under nodejs (running environment) for hosting data packages. It can be used in Web front-end development for uploading or downloading data packages.

[0102] 4) Git (open source distributed version control system)

[0103] Git is an open source distributed version control system that can effectively and quickly handle version management of projects from very small to very large.

[0104] Git repositories can be divided into local repositories and remote repositories. A local repository can be a code repository stored locally on a computer device; a remote repository can be a repository that stores code on a public network server. For example, a remote repository can be a repository on a server such as GitHub (software source code hosting service) or GitLab (warehouse management system open source project).

[0105] Figure 1 FIG1 is a schematic diagram of a front-end component automatic extraction system according to an exemplary embodiment. The front-end component automatic extraction system includes a terminal 110 and a server 120 .

[0106] The developer inputs configuration information on the terminal 110, where the configuration information includes detection configuration information and / or component configuration information, and obtains the front-end component code that meets the configuration information through the server 120 for abstract extraction. The developer implements the automatic extraction process of the required reusable front-end components in the front-end component automatic extraction system.

[0107] The server 120 may include a memory, which can be used to store component files corresponding to each front-end component, or the component files corresponding to each front-end component may also be stored in a code repository, wherein the code repository may be a git repository associated with the server 120, and the component files corresponding to the front-end components include the front-end component code.

[0108] Among them, the front-end component code can include component interface information.

[0109] Developers can upload, download, and modify the front-end component code in the code repository, realizing the process of sharing the front-end component code and the update process of collaboratively modifying the front-end component code.

[0110] The terminal 110 can perform data transmission with the server 120 via a wired or wireless network.

[0111] The server 120 may be a single server, or a server cluster consisting of several servers, or may include one or more virtualization platforms, or may be a cloud computing service center.

[0112] The server 120 may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides 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 (Content Delivery Network), and big data and artificial intelligence platforms. The terminal may be a smartphone, tablet computer, laptop computer, desktop computer, smart speaker, smart watch, etc., but is not limited thereto. The terminal and the server may be directly or indirectly connected via wired or wireless communication, which is not limited in this application.

[0113] Optionally, the above-mentioned wired or wireless network uses standard communication technologies and / or protocols. The network is typically the Internet, but can also be any network, including but not limited to a local area network (LAN), a metropolitan area network (MAN), a wide area network (WAN), a mobile, wireless network, a private network, or any combination of a virtual private network. In some embodiments, technologies and / or formats including Hypertext Markup Language (HTML), Extensible Markup Language (XML), etc. are used to represent data exchanged over the network. In addition, conventional encryption technologies such as Secure Socket Layer (SSL), Transport Layer Security (TLS), Virtual Private Network (VPN), Internet Protocol Security (IPsec), etc. can also be used to encrypt all or some links. In other embodiments, customized and / or dedicated data communication technologies can also be used to replace or supplement the above-mentioned data communication technologies.

[0114] Figure 2 It is a diagram showing a front-end component framework in a project according to an exemplary embodiment. The project 20 includes at least one Web page 21 , and each Web page 21 includes at least one front-end component 22 .

[0115] For example, the project 20 may be an APP (Application), and each web page 21 may be the current browsing page in the APP, or a jump page within the APP. There are several front-end components on each web page 21, which may include button controls or pop-up boxes.

[0116] like Figure 2 As shown, in Figure 1 The terminal 110 shown in FIG. 1 shows a project 20. The display interface of the terminal 110 can visually display the project 20, at least one web page 21 within the project, and at least one front-end component 22 included in each web page 21. Any project 20 may include multiple web pages 21, and the types and quantities of front-end components 22 included in each web page 21 may vary. A front-end component 22 is a component that includes at least one front-end component code entry file.

[0117] In order to facilitate developers to develop web pages in the future, the reusable components that need to be created in the web pages can be directly obtained on the shared platform. Among them, developers can search for the required component type or interface information on the shared platform and retrieve the executable files corresponding to the required front-end components. The various executable files on the shared platform can be obtained through Figure 1 The front-end component automatic extraction system shown is obtained, that is, the reusable front-end components under any project in the terminal are automatically extracted and uploaded to the sharing platform.

[0118] Figure 3 This is a flow chart of a front-end component sharing method according to an exemplary embodiment. The front-end component sharing method can be applied to computer devices, and automatically extracts the front-end components that meet the configuration information in the project, automatically generates the executable files corresponding to the front-end components, and publishes the executable files corresponding to the front-end components on the sharing platform, thereby achieving the purpose of front-end component sharing. Figure 3 As shown, the front-end component sharing method may include the following steps:

[0119] In step 301, detection configuration information is obtained. The detection configuration information is information used to detect whether the front-end component can support sharing.

[0120] In the embodiment of the present disclosure, the developer inputs the detection configuration information on the terminal side, and the computer device obtains the content of the detection configuration information.

[0121] The detection configuration information is input by the developer on the terminal side and is used to detect whether the front-end component can support shared information.

[0122] In one possible implementation, the detection configuration information is input by the developer through a command line tool to specify the detection content of each front-end component in the project so that the detection content corresponding to different front-end components can be set separately.

[0123] In step 302, a target front-end component is determined according to the detection configuration information, where the target front-end component is a front-end component that supports sharing.

[0124] In an embodiment of the present disclosure, the computer device determines that at least one front-end component in the project meets the detection configuration information based on the acquired detection configuration information, and determines that the at least one front-end component that meets the detection configuration information is the target front-end component.

[0125] The target front-end component is a front-end component that supports sharing.

[0126] In one possible implementation, the detection configuration information is configured for the type of front-end component. For different types of front-end components, the developer inputs the detection configuration information corresponding to the front-end component type. The computer device detects the corresponding front-end component based on the detection configuration information and determines the target front-end component.

[0127] In step 303, a target component file corresponding to the target front-end component is generated. The target component file is a file used to install and run the target front-end component.

[0128] In the embodiment of the present disclosure, the computer device processes each determined target front-end component and generates a target component file corresponding to each target front-end component.

[0129] The target component file is a file used to install and run the target front-end component.

[0130] For example, the target component file may include an installation package for installing the target front-end component and an executable file for directly running the target front-end component.

[0131] In step 304, the target component file is published to a sharing platform, which is a network platform for users to download or upload the target component file.

[0132] In the embodiment of the present disclosure, the computer device automatically uploads the generated target component file to the sharing platform corresponding to the target component file, so that the user can download the target component file on the sharing platform and use the target component file on the user's computer device to perform front-end development of the corresponding target component software.

[0133] Among them, the sharing platform is a network platform for users to download or upload target component files.

[0134] In a possible implementation, different types of target component files correspond to different sharing platforms.

[0135] For example, the sharing platform can be a package management platform (npm) used for web front-end development. The executable files corresponding to the target front-end components are published on the package management platform (npm) for users to download and reuse, thereby realizing the sharing of front-end components.

[0136] In summary, the front-end component sharing method provided in the embodiments of the present disclosure. Through the above scheme, the computer device obtains the corresponding logical algorithm based on the detection configuration information to automatically screen and extract the front-end components. Since the target front-end component is determined and extracted by detecting each front-end component according to a fixed logical algorithm, the problem of low quality when reusable front-end components are extracted through manual screening is solved, which saves labor resources and time resources, and improves the efficiency of extracting reusable front-end components, thereby improving the efficiency of front-end development.

[0137] Figure 4 This is a flow chart of a front-end component sharing method according to another exemplary embodiment. The front-end component sharing method can be applied to computer devices, and automatically extracts front-end components that meet the configuration information in the project, generates corresponding executable files, and publishes the executable files corresponding to the front-end components on a sharing platform, thereby achieving the purpose of front-end component sharing. Figure 4 As shown, the front-end component sharing method may include the following steps:

[0138] In step 401, component configuration information is obtained.

[0139] In an embodiment of the present disclosure, a computer device obtains component configuration information input by a user.

[0140] The component configuration information is used to indicate the storage directory location of the front-end component.

[0141] In a possible implementation, the component configuration information includes a front-end component code entry and a directory structure.

[0142] The front-end component code entry is used to obtain the front-end component code; the directory structure format is used to indicate the format of the front-end component. Configuring the front-end component code entry and directory structure format in the component configuration information facilitates the service's subsequent automated extraction operations.

[0143] In step 402, the storage directory location of the front-end component code corresponding to the front-end component is determined according to the component configuration information.

[0144] In an embodiment of the present disclosure, the computer device determines the storage directory location of the front-end component code corresponding to the front-end component that needs to be tested in the project by parsing the obtained component configuration information.

[0145] The storage directory location is used to indicate the folder location where the code files corresponding to the front-end component code are stored.

[0146] In step 403, the front-end component code in the storage directory location is obtained.

[0147] In an embodiment of the present disclosure, the computer device obtains the front-end component code in the storage directory location according to the determined storage directory location of the front-end component code corresponding to the front-end component.

[0148] Among them, the computer device can obtain the content of the code file in the folder of the corresponding directory location as the front-end component code based on the storage directory location corresponding to the at least one front-end component obtained.

[0149] In step 404, detection configuration information is obtained.

[0150] In an embodiment of the present disclosure, a computer device obtains detection configuration information input by a user.

[0151] The detection configuration information is information used to detect whether the front-end component can support sharing.

[0152] In step 405, the detection configuration information is parsed to obtain configuration rules and detection conditions.

[0153] In the embodiment of the present disclosure, the computer device parses the acquired detection configuration information to obtain the configuration rules and detection conditions set by the user.

[0154] Among them, the configuration rule is used to indicate the detection content that needs to be detected on the front-end component; the detection condition is used to indicate at least one detection content that the target front-end component needs to meet.

[0155] In step 406, the detection content in the configuration rule is obtained.

[0156] In the embodiment of the present disclosure, after parsing the detection configuration information, the computer device obtains the detection content in the configuration rule.

[0157] In a possible implementation manner, the detection content includes at least one of first detection content, second detection content, and third detection content.

[0158] Among them, the first detection content is that the front-end component has no dependencies; the second detection content is that the front-end component has a component interface definition; the third detection content is used to indicate that the component type of the front-end component is the first front-end component.

[0159] Among them, the first front-end component includes at least one of a molecular component and a scene component.

[0160] The above steps 401 to 403 and steps 404 to 406 may be executed simultaneously by a computer device, and there is no restriction on the execution order of steps 401 to 403 and steps 404 to 406.

[0161] In step 407, the detection content in the front-end component is detected to determine the detection result corresponding to the detection content.

[0162] In the embodiment of the present disclosure, the computer device obtains the front-end component code corresponding to each front-end component through the component configuration information, performs the detection content obtained by parsing the detection configuration information on the front-end component code, and determines the detection results corresponding to each detection content.

[0163] In one possible implementation, the computer device performs a first detection on the front-end component code, that is, detects whether the front-end component has a dependency relationship; the computer device performs a second detection on the front-end component code, that is, detects whether the front-end component has a component interface definition; the computer device performs a third detection on the front-end component code, that is, detects the component type of the front-end component to determine whether the component type is the first front-end component.

[0164] The component type is used to distinguish the scale of the front-end component; the component type includes a first front-end component and a second front-end component. The first front-end component indicates a front-end component with a simple packaging and is reusable. The second front-end component indicates a front-end component with a complex packaging or non-reusable.

[0165] Among them, the first front-end component includes at least one of a molecular component and a scene component, and the second front-end component includes at least one of an atomic component and a module component.

[0166] For example, an atomic component can be a button component or a pop-up window component. A molecular component can be composed of a combination of atomic components, such as a filter pop-up window, that is, a molecular component with a button component and a pop-up window component. When the component type is an atomic component, the front-end component is obtained from the basic component library, and generally does not require front-end component extraction. When the component type is a module, the module can be coupled with the business, with a lower reusability rate, and generally does not require front-end component extraction.

[0167] In one possible implementation, in response to the absence of relative path reference code and asynchronous request logic that depend on other front-end components in the front-end component code, the test result corresponding to the first test content is determined to be a pass. In response to the presence of a component interface description in the front-end component code, the test result corresponding to the second test content is determined to be a pass. The component type of the front-end component is determined based on the front-end component code; in response to the component type being a molecular component or a scene component, the test result corresponding to the third test content is determined to be a pass.

[0168] In a possible implementation, the asynchronous request logic is an ajax request logic.

[0169] In step 408, in response to the detection results corresponding to the various detection contents indicated in the detection conditions all being detected as passed, the front-end component is determined as the target front-end component.

[0170] In an embodiment of the present disclosure, when a computer device performs a detection on a front-end component based on the detection contents included therein, if the detection results corresponding to the respective detection contents are all passed, the front-end component is determined as a target front-end component.

[0171] In one possible implementation, the detection content that needs to be met is determined based on the detection conditions obtained from the detection configuration information. When the computer device passes the detection results of the detection content included in the detection conditions of the front-end component, the front-end component is determined as the target front-end component.

[0172] In a possible implementation, the computer device determines the project type of the target front-end component creation project according to the developer's selection operation.

[0173] The project type includes at least one of a local component project and a virtual component project.

[0174] In a possible implementation, in response to the received project creation instruction, it is determined that the project type of the target component creation project is a local component project.

[0175] The project creation instruction is an instruction received by the developer through selecting an option to create a project locally.

[0176] A local component project is a project that stores a specific directory address, allowing iteration and upgrades of components. A virtual component project is a project that automatically extracts the target component without creating a local code directory. Instead, a virtual directory is created in the cache.

[0177] In step 409, a target component file corresponding to the target front-end component is generated, and the target component file is published to a sharing platform.

[0178] The target component file is a file used to install and run the target front-end component. The sharing platform is a network platform for users to download or upload the target component file.

[0179] In a possible implementation, the computer device generates a target component file corresponding to the target front-end component according to the user's configuration.

[0180] Exemplarily, in response to the target component file being an executable file, a scaffolding template corresponding to the target front-end component is obtained, and a front-end component code corresponding to the target front-end component is obtained; and an executable file is generated according to the scaffolding template and the front-end component code.

[0181] The scaffolding template is the template used to develop the target front-end component. The front-end component code is the code used to develop the target front-end component.

[0182] In a possible implementation, the scaffolding template corresponding to the target front-end component is obtained by associating a git repository and obtaining the scaffolding template corresponding to the target front-end component from the git repository.

[0183] Among them, the scaffolding template is the project template used to develop the target component. The scaffolding template can contain source code, static resource files, build compilation files, package description information files, etc.

[0184] Exemplarily, in response to the target component file further including a preview file, and in response to the preview file including a component preview image, the component preview image is generated according to the front-end component code corresponding to the target front-end component.

[0185] Third-party tools can be used to generate component previews corresponding to front-end component code. Generating component previews can intuitively display the component visualization results corresponding to the project, making it easier for developers to select the component project that best matches the front-end development project in the shared component file.

[0186] Exemplarily, in response to the target component file also including a preview file, and in response to the preview file also including an interface description file; in response to the front-end component code corresponding to the target front-end component including a component interface description, an interface description file corresponding to the target front-end component is generated.

[0187] Among them, the interface description file is used to describe the interface information contained in the front-end component; the front-end component code may contain annotation information of the component interface, and the corresponding interface description file is generated according to the specified syntax by obtaining the annotation information of the component interface.

[0188] In a possible implementation, the target component file is published to a shared platform.

[0189] Exemplarily, in response to the target component file including the executable file, the executable file is published to the package management platform npm.

[0190] The package management platform npm is a network platform for users to upload or download files. The computer device publishes the executable file corresponding to the generated target front-end component to the package management platform.

[0191] The package management platform can be npm, a package hosting platform within the Node.js framework. It can host executable file packages corresponding to component projects on npm. Developers download the executable files corresponding to the selected and adapted target front-end components from the package hosting platform and directly use the target front-end components during front-end development.

[0192] Exemplarily, in response to the target component file containing the component preview image, the component preview image is published to the document online preview platform.

[0193] The document online preview platform is a network platform for users to upload or preview files online.

[0194] Exemplarily, in response to the target component file including the interface description file, the interface description file is published to the document online preview platform.

[0195] Among them, the interface description files and component preview images published on the document online preview platform can be used by front-end developers to find front-end components that are more suitable for interface information and appearance and functions.

[0196] There may be several online document preview platforms, which may be non-open source online document preview platforms or platforms developed by developers themselves.

[0197] In a possible implementation, in response to the project type being a local component project, the front-end component code is published to the project repository.

[0198] Among them, when it is determined that the project type of the component project is a local component project, after the developer chooses to upload the component code, the front-end component code corresponding to the component project is published to the project warehouse.

[0199] In one possible implementation, the project repository is a git repository.

[0200] The front-end component code published in the project repository can save local storage space and improve the security of the front-end component code. It also enables developers to collaborate with multiple people to modify and update the front-end component code.

[0201] In summary, the front-end component sharing method provided in the embodiments of the present disclosure. Through the above scheme, the computer device obtains the corresponding logical algorithm based on the detection configuration information to automatically screen and extract the front-end components. Since the target front-end component is determined and extracted by detecting each front-end component according to a fixed logical algorithm, the problem of low quality when reusable front-end components are extracted through manual screening is solved, which saves labor resources and time resources, and improves the efficiency of extracting reusable front-end components, thereby improving the efficiency of front-end development.

[0202] Figure 5 This is a flow chart of a front-end component automatic generation service according to an exemplary embodiment. The front-end component automatic generation service can be executed by a computer device. Figure 5As shown, the front-end component automatic generation service may include: starting the front-end component automatic generation service and obtaining user configuration information (S501). In addition to the component configuration information, the user configuration information also includes detection configuration information. The detection content in the detection configuration information may include: 1. Detecting that the front-end component has no dependencies with other files in the project. 2. The front-end component has no dependencies with the business code. 3. The front-end component contains annotations for the component API (Application Program Interface). 4. The front-end component contains type checks for the component API. Then, according to the component configuration information, a specified or default directory is obtained (S502). Then, the detection content that needs to be detected in the front-end component determined in the detection configuration information is verified (S503). Determine whether the front-end component meets the detection content. If it does not meet the detection rules, directly end the extraction service for the front-end component (S504). If the detection result meets the detection content, obtain the scaffolding template, wherein the developer can choose whether to obtain it from the online code repository (S505). According to the developer's choice, determine whether to generate a local component project (S506). If not, generate a local virtual component project (S507). If you choose to generate a local component project, generate a local component project (S508). According to the developer's choice, determine whether to associate the git repository (S509), build and generate the local virtual component project or generate the executable file corresponding to the local component project (S510). At the same time, by analyzing the front-end component code, the corresponding interface document and component preview image can be automatically generated (S511). Then, the interface document and component preview image are published to the document hosting platform (S51 2) Publish the corresponding executable file to the npm hosting platform (S513), determine whether the front-end component has a local component project (S514), if the front-end component is in the local virtual component project, directly delete the local virtual component project and end the front-end component automatic generation service (S515), if it is determined to be in the local component project, determine whether the git repository is associated, if not, directly end the front-end component automatic generation service (S516), if it is associated with the git repository, upload the front-end component code to the git repository for backup storage, and then end the front-end component automatic generation service (S517).

[0203] In summary, the front-end component sharing method provided in the embodiments of the present disclosure. Through the above scheme, the computer device obtains the corresponding logical algorithm based on the detection configuration information to automatically screen and extract the front-end components. Since the target front-end component is determined and extracted by detecting each front-end component according to a fixed logical algorithm, the problem of low quality when reusable front-end components are extracted through manual screening is solved, which saves labor resources and time resources, and improves the efficiency of extracting reusable front-end components, thereby improving the efficiency of front-end development.

[0204] Figure 6 is a block diagram of a front-end component sharing device according to an exemplary embodiment. Figure 6 As shown, the front-end component sharing device can be implemented as all or part of a computer device through hardware or a combination of hardware and software to perform Figure 3 or Figure 4 All or part of the steps of the method shown in the corresponding embodiment. The front-end component sharing device may include:

[0205] The information acquisition module 610 is used to acquire detection configuration information; the detection configuration information is information used to detect whether the front-end component can be shared;

[0206] A target determination module 620 is configured to determine a target front-end component according to the detection configuration information, wherein the target front-end component is a front-end component that can be shared;

[0207] A file publishing module 630 is configured to generate a target component file corresponding to the target front-end component, wherein the target component file is a file used to install and run the target front-end component;

[0208] The file publishing module 630 is further configured to publish the target component file to a sharing platform; the sharing platform is a network platform for users to download or upload the target component file.

[0209] In a possible implementation, the target determination module 620 includes:

[0210] An information parsing submodule is configured to parse the detection configuration information and obtain configuration rules and detection conditions; the configuration rules are used to indicate the detection content that needs to be detected for the front-end component; the detection conditions are used to indicate at least one of the detection contents that the target front-end component needs to meet;

[0211] A content acquisition submodule, configured to acquire the detection content in the configuration rule;

[0212] A result determination submodule, configured to detect the detection content in the front-end component and determine a detection result corresponding to the detection content;

[0213] The target determination submodule is configured to determine the front-end component as the target front-end component in response to the detection results corresponding to the respective detection contents indicated in the detection conditions all being detected as passed.

[0214] In a possible implementation, the detection content includes at least one of a first detection content, a second detection content, and a third detection content;

[0215] The first detection content is that the front-end component has no dependency relationship;

[0216] The second detection content is that the front-end component has a component interface definition;

[0217] The third detection content is used to indicate that the component type of the front-end component is a first front-end component; the first front-end component is used to indicate the front-end component that has a simple encapsulation degree and is reusable.

[0218] In a possible implementation, the result determination submodule includes:

[0219] The first determination unit is configured to determine that the detection result corresponding to the first detection content is a passed detection in response to the absence of relative path reference code and asynchronous request logic that depend on other front-end components in the front-end component code.

[0220] In a possible implementation, the result determination submodule includes:

[0221] The second determining unit is configured to determine that the detection result corresponding to the second detection content is a detection pass in response to the presence of a component interface description in the front-end component code.

[0222] In a possible implementation, the result determination submodule includes:

[0223] a type determination unit, configured to determine the component type of the front-end component according to the front-end component code; the component type is used to distinguish the scale of the front-end component; the component type includes the first front-end component and the second front-end component, the second front-end component is used to indicate the front-end component with a complex packaging level or non-reusable;

[0224] The third determining unit is configured to determine, in response to the component type being the first front-end component, that the detection result corresponding to the third detection content is a detection pass.

[0225] In a possible implementation, the file publishing module 630 includes:

[0226] A template acquisition submodule is used to acquire a scaffolding template corresponding to the target front-end component, wherein the scaffolding template is a template used to develop the target front-end component;

[0227] A code acquisition submodule is used to acquire the front-end component code corresponding to the target front-end component; the front-end component code is the code used to develop the target front-end component;

[0228] A file generation submodule is used to generate an executable file according to the scaffolding template and the front-end component code;

[0229] The file publishing submodule is used to publish the executable file to the package management platform npm, which is a network platform for the user to upload or download files.

[0230] In a possible implementation, the target component file further includes a preview file; in response to the preview file including the component preview image;

[0231] The file publishing module 630 further includes:

[0232] A preview image generation submodule, configured to generate the component preview image according to the front-end component code corresponding to the target front-end component;

[0233] The image publishing submodule is used to publish the component preview image to the document online preview platform; the document online preview platform is a network platform for the user to upload or preview files online.

[0234] In a possible implementation, in response to the preview file further including an interface description file;

[0235] The file publishing module 630 includes:

[0236] An interface file generating submodule is configured to generate an interface description file corresponding to the target front-end component in response to a component interface description included in the front-end component code corresponding to the target front-end component; the interface description file is used to describe the interface information included in the front-end component;

[0237] The interface file publishing submodule is used to publish the interface description file to the document online preview platform.

[0238] In summary, the front-end component sharing method provided in the embodiments of the present disclosure. Through the above scheme, the computer device obtains the corresponding logical algorithm based on the detection configuration information to automatically screen and extract the front-end components. Since the target front-end component is determined and extracted by detecting each front-end component according to a fixed logical algorithm, the problem of low quality when reusable front-end components are extracted through manual screening is solved, which saves labor resources and time resources, and improves the efficiency of extracting reusable front-end components, thereby improving the efficiency of front-end development.

[0239] It should be noted that the device provided in the above embodiment only uses the division of the above-mentioned functional modules as an example to implement its functions. In actual applications, the above-mentioned functions can be assigned to different functional modules according to actual needs, that is, the content structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0240] Regarding the apparatus in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0241] Figure 7 1 is a schematic diagram illustrating the structure of a computer device according to an exemplary embodiment. The computer device 700 includes a central processing unit (CPU) 701, a system memory 704 including a random access memory (RAM) 702 and a read-only memory (ROM) 703, and a system bus 705 connecting the system memory 704 and the CPU 701. The computer device 700 also includes a basic input / output system (I / O system) 706 for facilitating information transmission between various components within the computer device, and a mass storage device 707 for storing an operating system 713, application programs 714, and other program modules 715.

[0242] The basic input / output system 706 includes a display 708 for displaying information and an input device 709 such as a mouse and keyboard for user input. The display 708 and the input device 709 are both connected to the central processing unit 701 via an input / output controller 710 connected to the system bus 705. The basic input / output system 706 may also include an input / output controller 710 for receiving and processing input from a variety of other devices such as a keyboard, mouse, or electronic stylus. Similarly, the input / output controller 710 also provides output to a display screen, printer, or other types of output devices.

[0243] The mass storage device 707 is connected to the central processing unit 701 via a mass storage controller (not shown) connected to the system bus 705. The mass storage device 707 and its associated computer-readable medium provide non-volatile storage for the computer device 700. In other words, the mass storage device 707 may include a computer-readable medium (not shown) such as a hard disk or a CD-ROM drive.

[0244] Without loss of generality, the computer device readable medium may include computer device storage media and communication media. Computer device storage media include volatile and non-volatile, removable and non-removable media implemented by any method or technology for storing information such as computer device readable instructions, data structures, program modules or other data. Computer device storage media include RAM, ROM, Erasable Programmable Read-Only Memory (EPROM), Electrically Erasable Programmable Read-Only Memory (EEPROM), CD-ROM, Digital Video Disc (DVD) or other optical storage, tape cassettes, magnetic tapes, disk storage or other magnetic storage devices. Of course, those skilled in the art will appreciate that the computer device storage media are not limited to the above-mentioned ones. The above-mentioned system memory 704 and mass storage device 707 can be collectively referred to as memory.

[0245] According to various embodiments of the present disclosure, the computer device 700 may also be connected to a remote computer device on a network such as the Internet for operation. That is, the computer device 700 may be connected to a network 712 via a network interface unit 711 connected to the system bus 705. Alternatively, the network interface unit 711 may be used to connect to other types of networks or remote computer device systems (not shown).

[0246] The memory also includes one or more programs, which are stored in the memory. The CPU 701 executes the one or more programs to implement Figure 3 or Figure 4 All or part of the steps of the method shown.

[0247] Those skilled in the art will appreciate that in one or more of the above examples, the functions described in the embodiments of the present disclosure can be implemented using hardware, software, firmware, or any combination thereof. When implemented using software, these functions can be stored in a computer-readable medium or transmitted as one or more instructions or codes on a computer-readable medium. Computer-readable media include computer storage media and communication media, wherein communication media include any media that facilitates the transmission of computer programs from one place to another. The storage medium can be any available medium that can be accessed by a general-purpose or special-purpose computer device.

[0248] The embodiment of the present disclosure further provides a computer device storage medium for storing computer device software instructions used by the above-mentioned testing apparatus, which includes a program designed for executing the above-mentioned component sharing method.

[0249] According to one aspect of the present disclosure, a computer program product or computer program is provided, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the front-end component sharing method provided in various optional implementations of the above aspects.

[0250] Other embodiments of the present disclosure will readily occur to those skilled in the art after considering the specification and practicing the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art not disclosed herein. The description and examples are to be considered as exemplary only, with the true scope and spirit of the present disclosure being indicated by the following claims.

[0251] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes can be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A front-end component sharing method, characterized in that: The method comprises: Acquire detection configuration information, where the detection configuration information is used to detect whether the front-end component can support sharing; Determine a target front-end component according to the detection configuration information, where the target front-end component is the front-end component that supports sharing; Generate a target component file corresponding to the target front-end component, wherein the target component file is a file used to install and run the target front-end component; Publishing the target component file to a sharing platform, which is a network platform for users to download or upload the target component file; The determining of the target front-end component according to the detection configuration information includes: Parsing the detection configuration information to obtain configuration rules and detection conditions; the configuration rules are used to indicate the detection content that needs to be detected on the front-end component; the detection conditions are used to indicate at least one of the detection contents that the target front-end component needs to meet; Obtaining the detection content in the configuration rule; Detecting the detection content in the front-end component and determining a detection result corresponding to the detection content; In response to the detection results corresponding to the respective detection contents indicated in the detection condition all being passed, determining the front-end component as the target front-end component; The detection content includes at least one of a first detection content, a second detection content, and a third detection content; The first detection content is that the front-end component has no dependency relationship; The second detection content is that the front-end component has a component interface definition; The third detection content is used to indicate that the component type of the front-end component is a first front-end component; the first front-end component is used to indicate the front-end component with a simple encapsulation level and is reusable; The detecting the detection content in the front-end component and determining a detection result corresponding to the detection content includes: In response to the fact that there is no relative path reference code and asynchronous request logic that depends on other front-end components in the front-end component code, it is determined that the detection result corresponding to the first detection content is detection passed.

2. The method according to claim 1, characterized in that The detecting the detection content in the front-end component and determining a detection result corresponding to the detection content includes: In response to the presence of a component interface description in the front-end component code, it is determined that the detection result corresponding to the second detection content is detection passed.

3. The method according to claim 1, characterized in that The detecting the detection content in the front-end component and determining a detection result corresponding to the detection content includes: Determine the component type of the front-end component according to the front-end component code; the component type is used to distinguish the scale of the front-end component; the component type includes the first front-end component and the second front-end component, and the second front-end component is used to indicate the front-end component with complex packaging or non-reusable; In response to the component type being the first front-end component, it is determined that the detection result corresponding to the third detection content is detection passed.

4. The method according to any one of claims 1 to 3, characterized in that: Generating a target component file corresponding to the target front-end component and publishing the target component file to a sharing platform includes: Obtaining a scaffolding template corresponding to the target front-end component, wherein the scaffolding template is a template used to develop the target front-end component; Obtaining a front-end component code corresponding to the target front-end component; the front-end component code is the code used to develop the target front-end component; Generate an executable file according to the scaffolding template and the front-end component code; The executable file is published to the package management platform npm, which is a network platform for the user to upload or download files.

5. The method according to any one of claims 1 to 3, characterized in that: The target component file further includes a preview file; in response to the preview file including a component preview image; The generating of the target component file corresponding to the target front-end component and publishing the target component file to the sharing platform further includes: Generate the component preview image according to the front-end component code corresponding to the target front-end component; The component preview image is published to an online document preview platform; the online document preview platform is a network platform for the user to upload or preview files online.

6. The method according to any one of claims 1 to 3, characterized in that: The preview file also includes an interface description file in response to the preview file; Generating a target component file corresponding to the target front-end component and publishing the target component file to a sharing platform includes: In response to the component interface description being included in the front-end component code corresponding to the target front-end component, generating the interface description file corresponding to the target front-end component; the interface description file is used to describe the interface information included in the front-end component; Publish the interface description file to the document online preview platform.

7. The method according to any one of claims 1 to 3, characterized in that: Before acquiring the detection configuration information, the method further includes: Obtaining component configuration information, where the component configuration information is used to indicate the storage directory location of the front-end component; Determine the storage directory location of the front-end component code corresponding to the front-end component according to the component configuration information; Obtain the front-end component code under the storage directory location.

8. A front-end component sharing device, characterized in that: The device comprises: An information acquisition module is used to acquire detection configuration information; the detection configuration information is information used to detect whether the front-end component can be shared; a target determination module, configured to determine a target front-end component according to the detection configuration information, wherein the target front-end component is the front-end component that can be shared; A file publishing module is used to generate a target component file corresponding to the target front-end component, and the target component file is a file used to install and run the target front-end component; The file publishing module is further used to publish the target component file to a sharing platform; the sharing platform is a network platform for users to download or upload the target component file; The method of determining the target front-end component based on the detection configuration information includes: parsing the detection configuration information to obtain configuration rules and detection conditions; the configuration rules are used to indicate the detection content that needs to be detected for the front-end component; the detection conditions are used to indicate at least one of the detection contents that the target front-end component needs to meet; obtaining the detection content in the configuration rules; detecting the detection content in the front-end component to determine the detection result corresponding to the detection content; in response to the detection results corresponding to each of the detection contents indicated in the detection conditions being all detected as passed, determining the front-end component as the target front-end component; the detection content includes a first detection content, At least one of the second detection content and the third detection content; the first detection content is that the front-end component has no dependencies; the second detection content is that the front-end component has a component interface definition; the third detection content is used to indicate that the component type of the front-end component is the first front-end component; the first front-end component is used to indicate the front-end component with a simple degree of encapsulation and reusable; the detection content in the front-end component is detected to determine the detection result corresponding to the detection content, including: in response to the absence of relative path reference code and asynchronous request logic that depend on other front-end components in the front-end component code, determining that the detection result corresponding to the first detection content is a passed detection.

9. A computer device, characterized in that: The computer device includes a processor and a memory, wherein the memory stores at least one instruction, at least one program, code set or instruction set, and the at least one instruction, the at least one program, the code set or instruction set is loaded and executed by the processor to implement the steps of the front-end component sharing method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that The storage medium stores at least one instruction, at least one program, code set or instruction set, and the at least one instruction, the at least one program, the code set or instruction set is loaded and executed by the processor to implement the steps of the front-end component sharing method as described in any one of claims 1 to 7.

Images