Single-file component development method and device, and electronic device
By processing the public dependency components and target component files available to the browser, the problems of long component development time and small application scope are solved, enabling rapid development and wide applicability.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- WEBANK (CHINA)
- Filing Date
- 2021-01-25
- Publication Date
- 2026-06-19
AI Technical Summary
Existing technologies involve long component development times, excessive resource consumption, and limited application scope. In particular, the webpack and Vite development models have limitations in large-scale front-end projects and Vue2 versions.
By obtaining common dependency components from the entry file, processing them into browser-usable components, receiving access requests to obtain target component files, processing them, and sending them to the browser, including deletion functionality and route nodes, parsing template, script, and style parts, it is applicable to any Vue version.
It achieves shorter component development time, saves resources, is applicable to any Vue version, and expands the application scope.
Smart Images
Figure CN112835562B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of network service technology, and in particular to a method and apparatus for developing single-file components and electronic devices. Background Technology
[0002] Existing component development technologies primarily include the Webpack and Vite development models. The Webpack model recursively collects all dependent components of the entire project package based on a configured entry file, building and outputting all dependent components. However, for single-file component development, building all dependent components takes a long time, so it's usually unnecessary. For large front-end projects, hundreds or even more modules need to be compiled and built on initial startup, resulting in even longer build times. Modifying a module requires recompiling and building the entire module. Therefore, the time required for module modification is determined by the number of times the module is depended upon; the more times a module is depended upon, the longer the modification time and the more resources are consumed.
[0003] The Vite development mode only works correctly with the progressive framework Vue 3 used to build user interfaces; however, since Vue 2 is widely used in current technologies and Vue 3 was released recently, its application scope is limited, resulting in a small application scope for the Vite development mode.
[0004] Clearly, the two existing methods have limitations such as long component development time, excessive resource consumption, and limited application scope.
[0005] Application content
[0006] To address the aforementioned technical problems, embodiments of this application provide a single-file component development method and apparatus, computer program product, storage medium, and electronic device, which can complete component development in a shorter time, save resources, and have a wide range of applications.
[0007] This application provides a single-file component development method, including: obtaining the first common dependency component in the entry file;
[0008] The first common dependency component is processed to obtain a second common dependency component that is usable by the browser;
[0009] Receive an access request, and obtain the target public dependency file from the second public dependency component based on the access request;
[0010] The target component file is obtained based on the access request, and the target component file is processed.
[0011] The target public dependency file and the processed target component file are sent to the browser.
[0012] In an optional embodiment of this application, processing the first public dependency component to obtain a second public dependency component usable by the browser includes:
[0013] Traverse the first abstract syntax tree node corresponding to the source code of the first common dependency component, and delete the first function node and the route node;
[0014] The components corresponding to the nodes in the abstract syntax tree other than the function nodes and the route nodes are identified as the second common dependency components.
[0015] In one optional embodiment of this application, the processing of the target component file includes:
[0016] The source code of the target component file is parsed to obtain the template part, script part, and style part;
[0017] At least one of the sample portion, the script portion, and the style portion is processed.
[0018] In one optional embodiment of this application, processing at least one of the template portion, the script portion, and the style portion includes:
[0019] The template portion is assigned to the function corresponding to the first frame used to construct the user interface;
[0020] The script portion is preprocessed;
[0021] The function and the preprocessed script are merged.
[0022] The result of the merging process is compiled to obtain the exported module of the first framework component.
[0023] In one optional embodiment of this application, processing at least one of the template portion, the script portion, and the style portion includes:
[0024] The style portion is preprocessed;
[0025] Traverse the second abstract syntax tree nodes corresponding to the source code of the target component file to determine the second functional node;
[0026] The module path of the second functional node is parsed, and the modules in the module path are recursively compiled to create styles.
[0027] In an optional embodiment of this application, after creating the style, the method further includes:
[0028] Determine whether the style is a private style;
[0029] If the style is a private style, the target component file is made private.
[0030] In an optional embodiment of this application, after obtaining the second common dependency component available to the browser, the method further includes:
[0031] Store the second common dependency component.
[0032] This application provides a single-file component development apparatus, the apparatus comprising:
[0033] The first acquisition unit is used to acquire the first common dependency component in the entry file;
[0034] The first processing unit is used to process the first common dependency component to obtain a second common dependency component that is available to the browser;
[0035] The second acquisition unit is used to receive an access request and acquire the target public dependency file from the second public dependency component based on the access request.
[0036] The second processing unit is used to obtain the target component file based on the access request and process the target component file.
[0037] The sending unit is used to send the target public dependency file and the processed target component file to the browser.
[0038] In an optional embodiment of this application, the first processing unit is used to traverse the first abstract syntax tree nodes corresponding to the source code of the first common dependency component and delete the first function node and the routing node.
[0039] The components corresponding to the nodes in the abstract syntax tree other than the function nodes and the route nodes are identified as the second common dependency components.
[0040] This application embodiment also provides a storage medium storing executable instructions, which, when executed by a processor, implement the above-described method steps.
[0041] This application also provides an electronic device, which includes a memory and a processor. The memory stores computer-executable instructions, and the processor can implement the above-described method steps when it executes the computer-executable instructions in the memory.
[0042] This application also provides a computer program product, which includes computer-executable instructions that, when executed, can implement the above-described method steps.
[0043] The single-file component development method provided in this application involves: obtaining a first common dependency component from an entry file; processing the first common dependency component to obtain a second common dependency component usable by the browser; receiving an access request and obtaining a target common dependency file from the second common dependency component based on the access request; obtaining a target component file based on the access request and processing the target component file; and sending the target common dependency file and the processed target component file to the browser. Thus, by obtaining a browser-usable target common dependency component and only building and compiling the target common dependency component, this application effectively saves build time compared to building and compiling all common dependency components when developing components using Webpack, enabling on-demand component building and compilation and improving component development efficiency. Furthermore, by processing the target component file, the single-file component development method provided in this application is applicable to any version of Vue, expanding the application scope of the single-file component development method compared to developing components using Vite.
[0044] To make the above-mentioned objectives, features and advantages of this application more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description
[0045] Figure 1 A schematic diagram of an optional processing flow for a single-file component development method provided in an embodiment of this application;
[0046] Figure 2 A schematic diagram of the single-file component development method provided in the embodiments of this application;
[0047] Figure 3 This application provides a flowchart for processing the target component file in an embodiment of the present application.
[0048] Figure 4 A schematic diagram illustrating the preprocessing of the script portion by the JS loader provided in this embodiment of the application;
[0049] Figure 5 A schematic diagram illustrating the preprocessing of the style portion using a Style loader, provided as an embodiment of this application.
[0050] Figure 6 The component dependency graph provided in the embodiments of this application;
[0051] Figure 7A schematic diagram illustrating browser support provided in this application embodiment;
[0052] Figure 8 A schematic diagram illustrating the principle of constructing a single-file component as provided in the embodiments of this application;
[0053] Figure 9 A schematic diagram of the structure of the single-file component development device provided in the embodiments of this application.
[0054] Figure 10 This is a schematic diagram of the structure of an electronic device according to an embodiment of this application. Detailed Implementation
[0055] In order to gain a more detailed understanding of the features and technical content of the embodiments of this application, the implementation of the embodiments of this application will be described in detail below with reference to the accompanying drawings. The accompanying drawings are for reference and illustration only and are not intended to limit the embodiments of this application.
[0056] Before describing the single-file component development method provided in the embodiments of this application, a brief description of the single-file component development method in related technologies will be given first.
[0057] In the embodiments of this application, similar reference numerals and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be discussed further in subsequent figures.
[0058] The following is a detailed description of a single-file component development method involved in the embodiments of this application. The execution subject of the single-file component development method provided in the embodiments of this application can be any device, equipment or server with data processing capabilities, and no limitation is made in the embodiments of this application.
[0059] The following is combined Figure 1 The diagram illustrates an optional processing flow for a single-file component development method. Figure 2 The schematic diagram of the single-file component development method shown illustrates the single-file component development method provided in this application embodiment. The single-file component development method provided in this application embodiment may include at least the following steps:
[0060] Step S101: Obtain the first common dependency component from the entry file.
[0061] In some embodiments, the single-file component development apparatus obtains the first common dependency component from the entry file. Optionally, the functionality of the single-file component development apparatus in this embodiment can be implemented by a Node server.
[0062] In practice, the single-file component development device can initiate the process of building common dependency components by executing the Fdev Start command. Specifically, the single-file component development device reads the entry file in the pre-configured configuration file fdev.config.js. The entry file can be main.js, which registers all common dependency components (Vendors) of the project, i.e., the first common dependency component.
[0063] Step S102: Process the first public dependency component to obtain a second public dependency component that is available to the browser.
[0064] In some embodiments, the single-file component development apparatus removes the vue file dependency component from the first public dependency component to obtain a second public dependency component that is available to the browser.
[0065] In practical implementation, the source code of the first common dependency component is represented by a first abstract syntax tree (such as an AST). The single-file component development device can traverse each node of the first abstract syntax tree and delete the first function (import) node and the route node; where the first import node and the route node correspond to the Vue file dependency component. After deleting the Vue file dependency components corresponding to the first import node and the route node from the first common dependency component, the second common dependency component is obtained; the second common dependency component is the common dependency component available to the browser. In this way, when performing single-file component development, the corresponding target common dependency component can be directly obtained from the second common dependency component on demand, saving the time of obtaining the target common dependency component. The single-file component development device can compile, package, and store the second common dependency component; whereby, the single-file component development device can adopt a caching method when storing the second common dependency component, so that when the browser needs to install the second common dependency component, it can quickly obtain the second common dependency component from the single-file component development device.
[0066] Step S103: Receive an access request and obtain the target public dependency file from the second public dependency component based on the access request.
[0067] In some embodiments, after obtaining the second common dependency component, the single-file component development apparatus can start the Node Service's request monitor module via Express to listen for network requests.
[0068] Express is a flexible Node.js web application development framework that keeps the application minimal and provides a powerful set of features for web and mobile applications.
[0069] In practice, users can input the path address of the component they want to access in their browser, such as http: / / localhost / App.vue. The browser then sends an access request through this path address, requesting access to the src / App.vue file, which is the component file the browser needs to render. After the browser sends the access request, the Request Monitor module in the single-file component development device receives the request and uses the browser's Application Program Interface (API) to retrieve the target public dependency file corresponding to the access request from the second public dependency component. Specifically, window.location.href can be used to retrieve the target public dependency file corresponding to the access request from the second public dependency component.
[0070] This application embodiment obtains the target common dependency components available in the browser and builds and compiles only the target common dependency components, instead of building and compiling all common dependency components. This can effectively save build time, realize on-demand building and compilation of components, save resources, and improve component development efficiency.
[0071] Step S104: Obtain the target component file based on the access request, and process the target component file.
[0072] In some embodiments, the single-file component development apparatus obtains the target component file based on the access request sent by the browser; specifically, after receiving the access request, the Request Monitor module in the single-file component development apparatus searches for a matching component file (i.e., the target component file or the component file to be rendered) according to the path, and reads the matching component file into the memory of the single-file component development apparatus.
[0073] In some embodiments, the single-file component development apparatus processes the target component file to obtain a code format that can be supported by a browser; specifically, the processing flow of the single-file component development apparatus on the target component file can be as follows: Figure 3As shown, the single-file component development device uses Node's fs module to read the source code of the target component file, calls the Vue-Template-Compiler package provided by Vue to parse the source code of the target component file, and obtains the template part, script part, and style part. At least one of the template part, script part, and style part is processed. By processing at least one of the template part, script part, and style part, the source code of the target component file can be converted into a form that can be supported by the browser, so that the single-file component development method provided in this application embodiment is applicable to any version of Vue.
[0074] When processing at least one of the template part, the script part, and the style part, for the template part: the template part can be assigned to the function corresponding to the first frame used to build the user interface, such as directly assigning the template part to Vue's render function.
[0075] Regarding the script section: The script section can be preprocessed, for example, by using a JS Loader. Figure 4 As shown, the `babel transform` module can be used to compile the source code corresponding to the `script` section into ES2015 code, compile the `import` directive into `require` directives, and compile the `export` directives into `exports` directives, thus converting the source code corresponding to the `script` section into browser-compatible source code. Then, the `babel parse` or `acomjs parse` module can be used to compile the browser-compatible source code into an Abstract Syntax Tree (AST). By traversing the AST nodes and finding the `import` nodes, the module paths of the imported modules are parsed and recursively compiled. Babel is a toolchain primarily used to convert ECMAScript 2015+ code into backward-compatible JavaScript syntax, enabling it to run in current and older browsers or other environments. Babel can be used to implement syntax transformation, add missing features to the target environment, and perform source code transformation.
[0076] The function obtained from processing the template part and the script part obtained from preprocessing the script part are merged. The result of the merged process is compiled to obtain the exported module of the first framework component.
[0077] Regarding the style part: Preprocessing can be performed by traversing the second abstract syntax tree nodes corresponding to the source code of the target component file to determine the second functional nodes; parsing the module paths of the second functional nodes, recursively compiling the modules in the module paths, and creating styles. In specific implementations, the style part can be preprocessed using a Style Loader, such as... Figure 5 As shown, the style part is preprocessed according to the language used to write the style, such as converting SCSS and LESS in the style part into browser-compatible CSS. The source code corresponding to the style part is compiled into an AST using PostCSS, CSSOM, or CSSTree. The AST nodes are traversed, and after finding the import node, the imported module path is parsed to enter recursive compilation and create the style. Optionally, after recursive compilation, it can be determined whether the style is a private style. If the style is a private style, the target component file can be made private; for example, by hashing the style part to make it private, thus enabling personalized development of a single component.
[0078] In this embodiment of the application, by processing the target component file, the single-file component development method provided in this embodiment of the application is applicable to any version of Vue, thereby improving the application scope of the single-file component development method.
[0079] Vue is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be used layer by layer from the bottom up. Vue has many advantages, such as: Vue's core library focuses only on the view layer, making it easy to learn and integrate with third-party libraries or existing projects. Furthermore, Vue is fully capable of driving complex single-page applications when needed, especially when combined with modern toolchains and various supporting libraries.
[0080] Step S105: Send the target public dependency file and the processed target component file to the browser.
[0081] In some embodiments, the single-file component development apparatus can send the target public dependency file obtained in step S103 to the browser.
[0082] In some embodiments, the single-file component development apparatus can send the target component file processed in step S104 to the browser. Specifically, the single-file component development apparatus can send the processing result of the style part in step S104 to the browser, and send the combined processing result of the script part and the template part in step S104 to the browser.
[0083] The text sent to the browser can be HyperText Markup Language (HTML, HTML) injected into the browser.
[0084] In existing technologies, when developing components using webpack, a component dependency graph is recursively built, such as... Figure 6 As shown, this includes every module required by the application, and then all these modules are bundled into one or more bundles. Users can enable webpack's development mode by configuring webpack-dev-middleware and configure vue-loader to parse Vue's single-file components. Combined with hot module replacement, this allows for previewing component effects while developing. However, because webpack's development mode recursively collects the dependencies of the entire project package based on the configured entry file and builds and outputs all dependencies, it takes a relatively long time.
[0085] In existing technologies, component development using Vite is based on the browser's native ESimports in the development environment and Rollup packaging in the production environment. Vite has at least the following key features: fast cold start, instant module hot updates, and true on-demand compilation. Vite starts a Node web server on the server side to send requests to proxy modules. When developers access a page in their browser, Vite intercepts module imports and sends module requests to the server. When parsing Vue single-file components, Vite typically initiates three requests. The first request returns the parsed content of the component script, which also includes imports for the template and style. Subsequently, Vite makes two more requests for the template and style, respectively, and returns the parsed template and style parts.
[0086] Vite is based on browser support for ES (ECMAScript) modules. Its native support enables true on-demand loading, but sequential loading depends on browser support. A diagram illustrating browser support is shown below. Figure 7As shown, the unfilled areas represent browser-supported features, while the dotted areas represent browser-unsupported features. ES (Executable Script) is a scripting language specification developed by Ecma International (formerly the European Computer Manufacturers Association) according to the ECMA-262 and ISO / IEC 16262 standards. ES2015 is the name of the sixth version of ES. JavaScript is a scripting language implemented according to the ECMAScript specification. However, the Vite development mode only works correctly with the progressive framework Vue 3 used for building user interfaces.
[0087] Compared to Figure 6 and Figure 7 The component development method shown is a schematic diagram illustrating the principle of single-file component development provided in this application embodiment, as follows: Figure 8 As shown, when the single-file component development device starts the Fdev Start command, it first identifies and compiles common dependencies, rather than compiling and packaging all dependencies. Compared to developing components using webpack, this saves a significant amount of time and increases the speed of component development. When a user accesses the component through a browser, the single-file component development device compiles the Vue component in real time based on the browser's access request, generating the corresponding packaged result, achieving on-demand building. Furthermore, by processing the target component file, the single-file component development method provided in this application embodiment is applicable to any version of Vue, expanding the application scope of the single-file component development method compared to developing components using Vite.
[0088] It should be noted that the single-file component development device involved in the embodiments of this application can be a device with a browser installed. It can obtain sufficient computing power and storage space through cloud computing technology, and then execute the single-file component development method provided in the embodiments of this application. The single-file component development device involved in the embodiments of this application can 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 storage, cloud communication, and big data; it can also be a device with computing capabilities such as a smartphone, tablet computer, laptop computer, or desktop computer; of course, the form of the information generation device is not limited to the above.
[0089] It should be understood that in the various embodiments of this application, the order of the above-mentioned processes does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.
[0090] To implement the business single-file component development method provided in the embodiments of this application, the embodiments of this application also provide a single-file component development apparatus. Figure 9 This is a schematic diagram of the structure of the single-file component development device 500 provided in the embodiments of this application. The single-file component development device 500 includes:
[0091] The first acquisition unit 501 is used to acquire the first common dependency component in the entry file;
[0092] The first processing unit 502 is used to process the first public dependency component to obtain a second public dependency component that is available to the browser.
[0093] The second acquisition unit 503 is used to receive an access request and acquire the target public dependency file from the second public dependency component based on the access request.
[0094] The second processing unit 504 is used to obtain the target component file based on the access request and process the target component file.
[0095] Sending unit 505 is used to send the target public dependency file and the processed target component file to the browser.
[0096] In some optional embodiments, the first processing unit 502 is used to traverse the first abstract syntax tree nodes corresponding to the source code of the first common dependency component and delete the first function node and the route node.
[0097] The components corresponding to the nodes in the abstract syntax tree other than the function nodes and the route nodes are identified as the second common dependency components.
[0098] In some optional embodiments, the second processing unit 504 is configured to parse the source code of the target component file to obtain a template part, a script part, and a style part; and to process at least one of the sample part, the script part, and the style part.
[0099] In some alternative embodiments, the second processing unit 504 is configured to assign the template portion to a function corresponding to the first frame used to construct the user interface;
[0100] The script portion is preprocessed;
[0101] The function and the preprocessed script portion are merged.
[0102] The result of the merging process is compiled to obtain the exported module of the first framework component.
[0103] In some alternative embodiments, the second processing unit 504 is used to preprocess the style portion;
[0104] Traverse the second abstract syntax tree nodes corresponding to the source code of the target component file to determine the second functional node;
[0105] The module path of the second functional node is parsed, and the modules in the module path are recursively compiled to create styles.
[0106] In some optional embodiments, the second processing unit 504 is further configured to determine whether the style is a private style;
[0107] If the style is a private style, the style part is made private.
[0108] In some alternative embodiments, the single-file component development apparatus further includes:
[0109] Storage unit 506 is used to store the second common dependency component.
[0110] It should be noted that, in this embodiment of the application, the function of the storage unit 506 can be implemented by a memory, the functions of the first acquisition unit 501, the first processing unit 502, the second acquisition unit 503 and the second processing unit 504 can be implemented by a processor, and the function of the sending unit 505 can be implemented by a transmitter or a transceiver.
[0111] The single-file component development apparatus described in this application embodiment, when implemented as a software functional module and sold or used as an independent product, can also be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application embodiment, essentially or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause an electronic device (which may be a personal computer, server, or network device, etc.) to execute all or part of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), magnetic disks, or optical disks. Thus, this application embodiment is not limited to any specific hardware and software combination.
[0112] Accordingly, this application also provides a computer program product, which stores computer-executable instructions that, when executed, can implement the single-file component development method described above in this application.
[0113] Accordingly, this application embodiment also provides a storage medium storing executable instructions, which are executed by a processor to perform the steps of the single-file component development method described above in this application embodiment.
[0114] To implement the single-file component development method provided in the embodiments of this application, the embodiments of this application also provide an electronic device. Figure 10 This is a schematic diagram of the structural composition of the electronic device according to an embodiment of this application, such as... Figure 10 As shown, the electronic device 70 may include one or more (only one is shown in the figure) processors 702 (processors 702 may include, but are not limited to, processing devices such as microprocessors (MCUs, Micro Controller Units) or programmable logic devices (FPGAs, Field Programmable Gate Arrays), memory 704 for storing data, and transmission device 706 for communication functions. Those skilled in the art will understand that... Figure 10 The structure shown is for illustrative purposes only and does not limit the structure of the aforementioned electronic device. For example, electronic device 70 may also include components that are more... Figure 10 The more or fewer components shown, or having the same Figure 10 The different configurations shown.
[0115] The memory 704 can be used to store software programs and modules of application software, such as program instructions / modules corresponding to the methods in the embodiments of this application. The processor 702 executes various functional applications and data processing by running the software programs and modules stored in the memory 704, thereby implementing the above-described methods. The memory 704 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 704 may further include memory remotely located relative to the processor 702, and these remote memories can be connected to the electronic device 70 via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.
[0116] The transmission device 706 is used to receive or send data via a network. Specific examples of the network described above may include a wireless network provided by the communication provider of the electronic device 70. In one example, the transmission device 706 includes a network adapter (NIC, Network Interface Controller), which can connect to other network devices via a base station to communicate with the Internet. In another example, the transmission device 706 may be a radio frequency (RF) module, used for wireless communication with the Internet.
[0117] The technical solutions described in the embodiments of this application can be combined arbitrarily without conflict.
[0118] In the several embodiments provided in this application, it should be understood that the disclosed methods and smart devices can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods, such as: multiple units or components can be combined, or integrated into another system, or some features can be ignored or not executed. In addition, the coupling, direct coupling, or communication connection between the various components shown or discussed can be through some interfaces, and the indirect coupling or communication connection between devices or units can be electrical, mechanical, or other forms.
[0119] The units described above as separate components may or may not be physically separate. The components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the units may be selected to achieve the purpose of this embodiment according to actual needs.
[0120] In addition, each functional unit in the various embodiments of this application can be integrated into a second processing unit, or each unit can be a separate unit, or two or more units can be integrated into a unit; the integrated unit can be implemented in hardware or in the form of hardware plus software functional units.
[0121] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application.
Claims
1. A single file component development method, characterized by, The method includes: Retrieve the first common dependency component from the entry file; The first common dependency component is processed to obtain a second common dependency component that is usable by the browser; Receive an access request, and obtain the target public dependency file from the second public dependency component based on the access request; The target component file is obtained based on the access request, and the target component file is processed. Send the target public dependency file and the processed target component file to the browser; The step of processing the first public dependency component to obtain a second public dependency component usable by the browser includes: Traverse the first abstract syntax tree node corresponding to the source code of the first common dependency component, and delete the first function node and route node; The components corresponding to the nodes in the abstract syntax tree other than the function nodes and the route nodes are identified as the second common dependency components; The processing of the target component file includes: The source code of the target component file is parsed to obtain the template part, script part, and style part; At least one of the template portion, the script portion, and the style portion is processed.
2. The method of claim 1, wherein, The processing of at least one of the template portion, the script portion, and the style portion includes: The template portion is assigned to the function corresponding to the first frame used to construct the user interface; The script portion is preprocessed; The function and the preprocessed script portion are merged. The result of the merging process is compiled to obtain the exported module of the first framework.
3. The method of claim 1, wherein, The processing of at least one of the template portion, the script portion, and the style portion includes: The style portion is preprocessed; Traverse the second abstract syntax tree nodes corresponding to the source code of the target component file to determine the second functional node; The module path of the second functional node is parsed, and the modules in the module path are recursively compiled to create styles.
4. The method of claim 3, wherein, After creating the style, the method further includes: Determine whether the style is a private style; If the style is a private style, the style part is made private.
5. The method according to any one of claims 1 to 4, characterized in that, After obtaining the second public dependency component available to the browser, the method further includes: Store the second common dependency component.
6. A single file component development apparatus characterized by comprising: The device includes: The first acquisition unit is used to acquire the first common dependency component in the entry file; The first processing unit is used to process the first common dependency component to obtain a second common dependency component that is available to the browser; The second acquisition unit is used to receive an access request and acquire the target public dependency file from the second public dependency component based on the access request. The second processing unit is used to obtain the target component file based on the access request and process the target component file. A sending unit is configured to send the target public dependency file and the processed target component file to the browser; The step of processing the first public dependency component to obtain a second public dependency component usable by the browser includes: Traverse the first abstract syntax tree node corresponding to the source code of the first common dependency component, and delete the first function node and route node; The components corresponding to the nodes in the abstract syntax tree, excluding the function nodes and the route nodes, are identified as the second common dependency components; The processing of the target component file includes: The source code of the target component file is parsed to obtain the template part, script part, and style part; At least one of the template portion, the script portion, and the style portion is processed.
7. A storage medium, characterized by The storage medium stores executable instructions that, when executed by a processor, implement the steps of the method described in any one of claims 1 to 5.
8. An electronic device, comprising: The electronic device includes a memory and a processor, wherein the memory stores computer-executable instructions, and the processor, when executing the computer-executable instructions in the memory, can implement the steps of the method according to any one of claims 1 to 5.
9. A computer program product, characterised in that, The computer program product includes computer-executable instructions that, when executed, enable the implementation of the steps of the method described in any one of claims 1 to 5.