Static Resource File Processing Method, Device, Electronic Device, and Storage Medium

Abstract

The present application provides a method, apparatus, electronic device, and storage medium for processing static resource files. The method includes: obtaining a first static resource file; the first static resource file includes source code files of a main application and source code files of at least one sub-application; according to the conversion rules of each source code file in the first static resource file, converting each source code file to obtain a first processing result of the first static resource file; the first processing result includes a syntax tree corresponding to each source code file or Css rules corresponding to each source code file; loading the first processing result of the first static resource file according to at least one plugin corresponding to each source code file. Based on the method for processing static resource files provided by the present application, the readability of the source code files of static resource files can be improved.

Description

Technical Field

[0001] The embodiments of the present application relate to the technical field of micro frontends, and in particular, to a method, device, electronic device, and computer storage medium for processing static resource files. Background Art

[0002] Micro-Frontends splits a single web (World Wide Web) front-end application into multiple sub-applications. Each of the split sub-applications can run and be released and deployed independently, solving the problem that the project is too large to be maintained. Micro frontends are divided into a main application and sub-applications. The main application is the main body application. When the Js (JavaScript) variables and Cascading Style Sheets (Css) styles of the main application and each sub-application do not conflict, the static resource files of the sub-applications can be loaded into the main application for rendering.

[0003] In practical applications, as the project becomes more and more complex, there will inevitably be unpredictable conflicts between the Js variables and Css styles of the main application and each sub-application. At the same time, the number of source codes in the static resource files is increasing, making the readability of the source code files of the static resource files poor, which is not conducive to developers modifying the conflicting variables or styles in the static resource files of the main application and sub-applications. However, in the related technologies, the micro frontend solutions include the open-source frameworks single-spa and qiankun, and there is no solution for the readability of the static resource files of the main application and sub-applications. Therefore, how to improve the readability of the source code files of the static resource files has become an important problem to be solved urgently. Summary of the Invention

[0004] The embodiments of the present application provide a method, device, electronic device, and computer storage medium for processing static resource files, which can improve the readability of the source code files of the static resource files.

[0005] A method for processing a static resource file provided by an embodiment of the present application includes:

[0006] Obtain a first static resource file; the first static resource file includes a source code file of a main application and source code files of at least one sub-application;

[0007] According to the conversion rules of each source code file in the first static resource file, convert each source code file to obtain a first processing result of the first static resource file; the first processing result includes a syntax tree corresponding to each source code file or a Css rule corresponding to each source code file;

[0008] Load a first processing result of the first static resource file according to at least one plugin corresponding to each source code file.

[0009] In one implementation, the method further includes: receiving modification result information of the user for the syntax tree and / or the Css rules, to obtain a second processing result of the first static resource file; the second processing result includes the modification result information.

[0010] In one implementation, the step of converting each source code file in the first static resource file according to a conversion rule of each source code file to obtain a first processing result of the first static resource file includes:

[0011] Obtain configuration items of each source code file;

[0012] When the configuration item of the first source code file indicates to convert the first source code file, convert the first source code file according to the conversion rule of the first source code file, to obtain a first processing result of the first static resource file; the first source code file is any one of the source code files in the first static resource file.

[0013] In one implementation, the method further includes:

[0014] Determine a conversion rule of each source code file according to a file type of each source code file.

[0015] In one implementation, the step of determining a conversion rule of each source code file according to a file type of each source code file includes:

[0016] When a file type of any one source code file is a cascading style sheet type, determine a conversion rule of the any one source code file as converting a string of the source code file into Css rules;

[0017] When the file type of the any one source code file is a JavaScript type, determine a conversion rule of the any one source code file as converting a string of the source code file into a syntax tree.

[0018] In one implementation, the method further includes:

[0019] Determine at least one plugin corresponding to each source code file according to a file type of each source code file.

[0020] In one implementation, the method further includes:

[0021] Convert the second processing result of the first static resource file to obtain a second static resource file; the data types of the second static resource file and the first static resource file are the same.

[0022] A static resource file processing device provided by an embodiment of the present application includes:

[0023] An acquisition module, configured to acquire a first static resource file; the first static resource file includes a source code file of a main application and source code files of at least one sub-application;

[0024] A processing module, configured to convert each source code file in the first static resource file according to the conversion rule of each source code file to obtain a first processing result of the first static resource file; the first processing result includes a syntax tree corresponding to each source code file or a Css rule corresponding to each source code file;

[0025] A plugin module, configured to load the first processing result of the first static resource file according to at least one plugin corresponding to each source code file.

[0026] In an implementation manner, the static resource file processing device further includes a receiving module, configured to receive modification result information of the user on the syntax tree and / or the Css rule to obtain a second processing result of the first static resource file; the second processing result includes the modification result information.

[0027] In an implementation manner, the processing module is configured to convert each source code file in the first static resource file according to the conversion rule of each source code file to obtain a first processing result of the first static resource file, including:

[0028] Obtain the configuration item of each source code file;

[0029] When the configuration item of the first source code file indicates to convert the first source code file, convert the first source code file according to the conversion rule of the first source code file to obtain a first processing result of the first static resource file; the first source code file is any one of the source code files in the first static resource file.

[0030] In an implementation manner, the processing module is further configured to:

[0031] Determine the conversion rule of each source code file according to the file type of each source code file.

[0032] In one implementation, the processing module is configured to determine the conversion rule for each source code file according to the file type of each source code file, including:

[0033] When the file type of any one source code file is a Cascading Style Sheets type, determine that the conversion rule for the any one source code file is to convert the string of the source code file into a Css rule;

[0034] When the file type of the any one source code file is a JavaScript type, determine that the conversion rule for the any one source code file is to convert the string of the source code file into a syntax tree.

[0035] In one implementation, the plugin module is further configured to:

[0036] Determine at least one plugin corresponding to each source code file according to the file type of each source code file.

[0037] In one implementation, the plugin module is further configured to:

[0038] Convert the second processing result of the first static resource file to obtain a second static resource file; the second static resource file and the first static resource file have the same data type.

[0039] An embodiment of the present application provides an electronic device, which includes a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the program, it implements the static resource file processing method provided by the foregoing one or more technical solutions.

[0040] An embodiment of the present application provides a computer storage medium, which stores a computer program; after the computer program is executed, it can implement the static resource file processing method provided by the foregoing one or more technical solutions.

[0041] Based on the static resource file processing method provided by this application, each source code file is converted according to the conversion rules of each source code file to obtain the first processing result of the first static resource file. The first processing result of the first static resource file includes the syntax tree corresponding to each source code file or the style rules corresponding to each source code file. Since the syntax tree can present the tree-like data structure of the source code file of the static resource file in the computer memory, and the style rules can intuitively reflect the styles defined for the main application / sub-application in the code, the readability of the source code file of the static resource file can be improved, and developers can flexibly modify the variables or styles that conflict in the static resource files of the main application and sub-application.

[0042] It should be understood that the above general description and the following detailed description are only exemplary and explanatory, and do not limit this application. Brief Description of the Drawings

[0043] Figure 1 It is an application scenario diagram of the static resource file processing method provided by the embodiment of this application;

[0044] Figure 2 It is a flowchart of a static resource file processing method provided by the embodiment of this application;

[0045] Figure 3 It is a network structure diagram of the static resource file processing method provided by the embodiment of this application;

[0046] Figure 4 It is a schematic diagram of a static resource file processing device provided by the embodiment of this application;

[0047] Figure 5 It is a schematic diagram of the structure of an electronic device provided by the embodiment of this application. Detailed Embodiments

[0048] The following further details this application in conjunction with the drawings and embodiments. It should be understood that the embodiments provided herein are only used to explain this application and not to limit this application. In addition, the embodiments provided below are partial embodiments for implementing this application, rather than all embodiments for implementing this application. Without conflict, the technical solutions recorded in the embodiments of this application can be implemented in any combination.

[0049] A microservice is a software development technique - a variant of the service-oriented architecture (SOA) architectural style. A micro front-end is an architecture similar to a microservice that transforms a web application from a single monolithic application into multiple small front-end applications, each of which can run independently, be developed independently, and be deployed independently. When a micro front-end runs on the browser side, it can include a main application and at least one sub-application. Each sub-application corresponds to a menu item in the main application.

[0050] Figure 1 The application scenario diagram of a static resource processing method provided by an embodiment of the present application is shown. Refer to Figure 1 , the micro front-end includes a main application and N sub-applications, where the N sub-applications include sub-application 1, sub-application 2, sub-application 3, …, sub-application i, …, sub-application N; sub-application i represents the i-th sub-application. In Figure 1 , menu item 1 corresponds to sub-application 1, menu item 2 corresponds to sub-application 2, and menu item 3 corresponds to sub-application 3.

[0051] It should be understood that the main application can also be referred to as a base or a base application, and the sub-application can also be referred to as a micro application. The embodiments of the present application do not make any limitations in this regard.

[0052] Here, a micro application is a front-end architecture design. Based on the single-page web application mode, a large single-page application is split into multiple micro applications with single and clear functions. Each micro application depends on one or more backend microservices to support the application functions provided by the micro application and can be developed, deployed, and integrated independently.

[0053] In the example, the micro front-end can listen for the user's click operation on any menu item and display the page of the sub-application corresponding to the menu item in the micro front-end. For example, when the user clicks menu item 1, the page corresponding to the sub-application is rendered in the micro front-end, and the page of sub-application 1 corresponding to menu item 1 is loaded. At this time, the user can use the services provided by sub-application 1. The loading method of the sub-application can be implemented based on various front-end application frameworks, such as front-end frameworks like Umi, React, Vue, Angular, etc.

[0054] Among them, Umi is an extensible enterprise-level front-end application framework. Umi is based on routing and supports various functional extensions and business requirements. React is a JavaScript library for building user interfaces. React can pass various types of parameters. For example, it can declare code and render the interface (UI, User Interface). JavaScript is a scripting language widely used on the client side. Vue is a progressive framework for building user interfaces. Angular is a development platform that integrates declarative templates, dependency injection, and end-to-end tools, making it easier to build web applications.

[0055] In practical applications, as projects become more and more complex, there will inevitably be unpredictable conflicts between the Js variables and Css styles of the main application and the sub-applications. When conflicts occur between the Js variables and Css styles of the main application and the sub-applications, it is required to modify the static resource files of the sub-applications. However, the static resource files of the sub-applications are dependent on third parties, and modifying the static resource files will affect the development efficiency of the micro front-end.

[0056] In the embodiments of the present application, the static resource processing method can be applied to a plugin system, and the plugin system can run in the main application. In the main application, through the getStaticSource function provided by the plugin system, the processing result of the static resource file, the resource address, and the plugin configuration information are passed as parameters into the file loader of the plugin to load the processing result of the static file.

[0057] Figure 2 The schematic flowchart of the static resource file processing method provided by the embodiments of the present application is shown. Refer to Figure 2 , the static resource file processing method provided by the embodiments of the present application may include the following steps:

[0058] Step A201: Obtain the first static resource file; the first static resource file includes the source code file of the main application and the source code files of at least one sub-application.

[0059] Here, the static resource file refers to a file that can be parsed and executed and will not change. The static resource file can be stored in a web server. The source code file can be a string file corresponding to the static resource file. A web server is a computer program residing on the server side.

[0060] In the example, the file type of the static resource file may include any one of the following: Css static resource file, Js static resource file.

[0061] Among them, Js is the abbreviation of Javascript, which is a scripting language for web pages. Css is Cascading Style Sheets, a computer language used to present the structural styles of Hyper Text Markup Language (HTML).

[0062] Exemplarily, for a Css source code file, the source code file is the Css string corresponding to the Css source code file; for a Js source code file, the source code file is the Js string corresponding to the Js source code file.

[0063] Step A202: According to the conversion rules of each source code file in the first static resource file, convert each source code file to obtain the first processing result of the first static resource file; the first processing result includes the syntax tree corresponding to each source code file or the Css rules corresponding to each source code file.

[0064] Here, a correspondence between the conversion rules and the file types of the source code files can be established in advance, and the conversion rules of the source code files can be determined according to the file types of the source code files. Further, by converting the code in the source code file according to the conversion rules of the source code file, the first processing result of the first static resource file can be obtained.

[0065] In the example, the source code file being a Js string and the source code file being a Css string correspond to two different conversion rules. Hereinafter, the conversion rules of the source code files will be introduced in detail.

[0066] In the example, for a Js source code file, when the source code file is a Js string, the conversion rule is to convert the Js string into a syntax tree. For a Css source code file, when the source code file is a Css string, the conversion rule is to convert the Css string into Css rules.

[0067] In the example, the syntax tree adopts an Abstract Syntax Tree (AST). The AST syntax tree is an abstract representation of the syntax structure, presenting the syntax structure of a programming language in a tree-like form, and each node in the syntax tree represents a structure in the source code.

[0068] It should be understood that when the Css static resource file is too large, developers cannot effectively modify certain rules. When the Js static resource file is too large, developers cannot effectively modify certain nodes in the syntax tree.

[0069] In the example, the Css rules corresponding to the source code files can be defined as CssRules, and each value in CssRules corresponds to a Css rule. For the Css source code file, after converting the Css string into Css rules, the developer can modify a certain Css rule in CssRules individually.

[0070] Here, the CSS rule refers to the pair of properties and values in CSS. The property is the style property that is expected to be set, and each property has a value. For example, "property: value".

[0071] Step A203: Load the first processing result of the first static resource file according to at least one plugin corresponding to each source code file.

[0072] Here, the plugin can be understood as an object that conforms to specific rules. A function is provided in the object to process the static resource file, and the function of the plugin can be customized by the developer.

[0073] It should be understood that the plugin is a program that follows a certain specification of the application programming interface and can run on the platform specified by the program, and call the function library or data provided by the platform. In this application, the plugin can be provided by the plugin system running on the main application.

[0074] In the example, a correspondence relationship between the file type of the source code file and the plugin type of at least one plugin is established in advance. According to the correspondence relationship between the file type of the source code file and the plugin type of at least one plugin, at least one plugin corresponding to each source code file is determined.

[0075] Here, the plugin type can be a Css type plugin (CssPlugin), or a Js type plugin (JsPlugin).

[0076] In the example, at least one plugin corresponding to the file type of the source code file is called in sequence, and the static resource file is passed as a parameter to the file loader in the plugin, and the file loader loads the first processing result of the first static resource file.

[0077] In the example, in the plugin list, at least one plugin corresponding to the file type of the source code file is defined. The plugin list includes a Css plugin list (CssPlugins) and / or a Js plugin list (JsPlugins). The Css plugin list (CssPlugins) includes at least one Css type plugin; the Js plugin list (JsPlugins) includes at least one Js type plugin.

[0078] In the example, for the Css source code file, obtain the list of Css plugins corresponding to the Css source code file, loop through each plugin in the Css plugin list, and use the CssRules value, resource address, and plugin configuration information corresponding to the Css source code file as parameters and pass them into the file loaders of the respective plugins in the Css plugin list. The file loader loads the first processing result of the first static resource file.

[0079] In the example, for the Js source code file, obtain the list of Js plugins corresponding to the Js source code file, loop through each plugin in the Js plugin list, and use the AST syntax tree, static resource address, and plugin configuration information corresponding to the Js source code file as parameters and pass them into the file loaders (loaders) of the respective plugins in the Js plugin list. The file loader loads the first processing result of the first static resource file.

[0080] Based on the above method for processing static resource files, each source code file is converted according to the conversion rules of each source code file to obtain the first processing result of the first static resource file. The first processing result of the first static resource file includes the syntax tree corresponding to each source code file or the style rules corresponding to each source code file; according to at least one plugin corresponding to each source code file, the first processing result of the first static resource file is loaded; since the syntax tree can present the tree-like data structure of the source code file of the static resource file in the computer memory, and the style rules can intuitively reflect the styles defined for the main application / sub-application in the code, therefore, the readability of the source code file of the static resource file can be improved. Thus, developers can flexibly modify the variables or styles that conflict in the static resource files of the main application and sub-application.

[0081] In practical applications, steps A201 to A204 above can be implemented using a processor, and the above processor can be at least one of an Application Specific Integrated Circuit (ASIC), a Digital Signal Processor (DSP), a Digital Signal Processing Device (DSPD), a Programmable Logic Device (PLD), a Field Programmable Gate Array (FPGA), a Central Processing Unit (CPU), a controller, a microcontroller, and a microprocessor.

[0082] In one implementation, the above-mentioned static resource file processing method further includes: receiving the modification result information of the syntax tree and / or style rules by the user, and obtaining a second processing result of the first static resource file; the second processing result includes the modification result information.

[0083] Here, the second processing result of the first static resource file may include the modification result information of the syntax tree and / or style rules by the user.

[0084] In an example, based on at least one plugin corresponding to each source code file, the first processing result of the first static resource file is loaded. When the first static resource is a Js static resource, the user can modify a certain node in the syntax tree and return the modified syntax tree to the plugin system.

[0085] Correspondingly, the plugin system receives the modified syntax tree, converts it into a Js string using bable, obtains the second processing result of the first static resource file, and returns the second processing result of the first static resource file to the main application. Here, bable is a compiler for JavaScript syntax.

[0086] In an example, based on at least one plugin corresponding to each source code file, the first processing result of the first static resource file is loaded. When the first static resource is a Css static resource, the user can modify a certain style rule in the Css rule and return the modified Css rule to the plugin system.

[0087] Correspondingly, the plugin system receives the modified Css rule, converts the modified Css rule into a Css string, obtains the second processing result of the first static resource file, and returns the second processing result of the first static resource file to the main application.

[0088] In the embodiments of the present application, when receiving the modification result information of the syntax tree and / or style rules by the user and obtaining the second processing result of the first static resource file, the conflict problem existing in the static resource files of the main application and the sub-application can be solved.

[0089] In one implementation, in the above step A202, the converting each source code file according to the conversion rule of each source code file in the first static resource file to obtain the first processing result of the first static resource file includes:

[0090] Obtaining the configuration item of each source code file;

[0091] When the configuration item of the first source code file indicates that the first source code file needs to be converted, convert the first source code file according to the conversion rules of the first source code file to obtain the first processing result of the first static resource file; the first source code file is any source code file in the first static resource file.

[0092] Here, the configuration item of the source code file can be used to indicate whether to perform file conversion on the source code file.

[0093] In the example, the configuration items of the source code file include useCssRules and useAST. Among them, the configuration item useCssRules is used to determine whether to convert the Css string into Css rules, and the configuration item useAST is used to determine whether to convert the Js string into an AST syntax tree.

[0094] In the example, for the Js source code file, judge the value of the configuration item useAST. When the value of the configuration item useAST in the Js source code file is true, use babel to convert the Js string in the Js static resource file into an AST syntax tree. Accordingly, developers can make targeted modifications to some nodes in the syntax tree.

[0095] In the example, for the Js source code file, obtain the value of the configuration item useAST. When the Js source code file does not configure useAST, or the value of the configuration item useAST in the Js source code file is false, do not convert the Js string in the Js source code file.

[0096] In the example, for the Css source code file, obtain the value of the configuration item useCssRules. When the value of the configuration item useCssRules in the Css source code file is true, convert the Css string into Css rules. Accordingly, developers can make targeted modifications to some style rules in the Css rules.

[0097] In the example, for the Css source code file, obtain the value of the configuration item useCssRules. When the Css source code file does not configure useCssRules, or the value of the configuration item useCssRules in the Css source code file is false, do not convert the Css string in the Css source code file.

[0098] In the example, when converting the Css string into Css rules, create an empty style tag, assign the Css string to the textContent property of the style tag, insert the style tag into the body element, and obtain the Css rule list through the CssRules property of the style tag.

[0099] Here, element and tag refer to each node in the DOM structure tree. The textContent attribute represents the variables of the script and style tags. Setting the textContent variable can change the content of the tag. The format of the style tag is as follows: style.sheet.disable = true.

[0100] In an implementation manner, the static resource processing method may further include the following steps: determining a conversion rule for each source code file according to the file type of each source code file.

[0101] In the example, when the suffix of the static resource file is "Js" or "Jsx", it is determined that the static resource file is a JavaScript script file. When the suffix of the static resource file is "sass", "sCss" or "Css", it is determined that the static resource file is a style file.

[0102] That is, the file type of the static resource file is determined according to the suffix of the static resource file.

[0103] In the example, the main application is provided with a plug-in system, and the plug-in system can obtain the static resource files of the main application and the static resource files of the sub-application that are passed in. Here, the static resource files of the main application can include JavaScript script files and / or Css style files; the static resource files of the sub-application can include JavaScript script files and / or Css style files.

[0104] In the example, according to the file type of each source code file, the conversion rules of JavaScript script files and Css style files are distinguished, and different conversion rules are used for JavaScript script files and Css style files.

[0105] In one implementation, determining the conversion rule of each source code file according to the file type of each source code file includes:

[0106] When the file type of any source code file is a cascading style sheet type, the conversion rule of the any source code file is determined to be converting a character string of the source code file into a CSS rule.

[0107] In the example, when the file type of the static resource file is Css type, for the Css source code file, the conversion rule of the source code file is to convert the Css string into the Css rule. Further, according to the configuration item useCssRules of the Css static resource file, it is determined whether the Css string needs to be converted into the Css rule.

[0108] In one implementation, determining the conversion rule for each source code file according to the file type of each source code file includes:

[0109] When the file type of any one source code file is of JavaScript type, determining the conversion rule for the any one source code file is to convert the string of the source code file into a syntax tree.

[0110] In an example, when the file type of the static resource file is of Js type, for the Js source code file, the conversion rule for the source code file is to convert the Js string into a syntax tree. Further, according to the configuration item useAST of the Js static resource file, it is determined whether to convert the Js string into a syntax tree.

[0111] It should be understood that the Js static resource file belongs to a file that has been obfuscated and packaged. When the Js string of the Js static resource file has not been converted into a syntax tree, developers cannot effectively modify the content of the Js static resource file.

[0112] In one implementation, in the above static resource processing method, the following steps may further be included: determining at least one plugin corresponding to each source code file according to the file type of each source code file.

[0113] In an example, the plugin may be defined by the following parameters: plugin name (name), plugin configuration information (options), file loader (loader).

[0114] Here, the parameters of the file loader (loader) may include any one of the following: static resource file, resource address, plugin configuration information.

[0115] In an example, before processing the static resource file, the plugin information may be configured through the setConfig function of the plugin system microPlugin. The setConfig function accepts an object as a parameter and passes it into the file loader (loader).

[0116] In an example, defining the plugin list corresponding to the Css source code file may be implemented by the following code:

[0117]

[0118] Among them, microPlugin is the name of the plugin system, setConfig is used to configure the plugin information, and the getStaticSource function can be used to obtain the file content and resource address of the static resource file.

[0119] In the example, through the getStaticSource function provided by the plugin system (microPlugin) in the main application, the static resource file, resource address, and plugin configuration information are passed as parameters to the file loader (loader).

[0120] In the example, the data types of the Css static resource file and Js static resource file in the file loader (loader) passed to the plugin are in string form.

[0121] In the example, the plugin list corresponding to the Js source code file can be implemented by the following code:

[0122]

[0123] In the example, in the plugin system microPlugin, the CssPluins property and JsPlugins property are used to configure the plugin list corresponding to the Css source code file and the plugin list corresponding to the Js source code file respectively. The plugin list can include at least one plugin, and each plugin corresponds to a different plugin name (name).

[0124] In one implementation, in the above static resource processing method, the following steps may further be included:

[0125] Convert the second processing result of the first static resource file to obtain a second static resource file; the data types of the second static resource file and the first static resource file are the same.

[0126] In the example, after modifying the syntax tree corresponding to the static resource file or the style rule corresponding to the static resource file in the file loader (loader), the modification result of the syntax tree corresponding to the static resource file or the modification result of the style rule corresponding to the static resource file is returned to the plugin system.

[0127] In the example, the plugin system converts the modification result of the syntax tree corresponding to the static resource file into a string to obtain a second static resource file. Alternatively, the plugin system converts the modification result of the style rule corresponding to the static resource file into a string to obtain a second static resource file. Further, the plugin system returns the second static resource file to the main application.

[0128] For example, after the file loader (loader) loads the style rule corresponding to the source code file, it receives the modification result information of the Css rule corresponding to the source code file and returns the modification result of the Css rule corresponding to the source code file to the plugin system.

[0129] Further, the plug-in system obtains the modification result of the Css rules corresponding to the source code file, converts the modification result of the Css rules corresponding to the source code file into a Css string to obtain a second static resource file, and returns the second static resource file to the main application.

[0130] For example, after a file loader loads the syntax tree corresponding to the source code file, it receives the modification result of the syntax tree corresponding to the source code file by the user, and returns the modification result of the syntax tree corresponding to the source code file to the plug-in system.

[0131] Further, the plug-in system obtains the modification result of the syntax tree corresponding to the source code file, converts the modification result of the syntax tree corresponding to the source code file into a Js string to obtain a second static resource file, and returns the second static resource file to the main application.

[0132] In the example, in the second static resource file, the data types of the Css static resource file and the Js static resource file can adopt the string type.

[0133] Figure 3 Fig. shows a network architecture diagram of the static resource file processing method provided by the embodiments of the present application. Refer to Figure 3 , the static resource processing method can be applied to a plug-in system, and the plug-in system can run in the main application. The first static resource file can be loaded in the main application, and the first static resource file can include the source code file of the main application and the source code files of at least one sub-application. The first static resource file is passed into the plug-in system, and the main application is given the function of processing the first static resource file in the plug-in system.

[0134] In the example, the plug-in system can determine whether to convert the Css string into Css rules and whether to convert the Js string into a syntax tree according to the configuration items of the source code file, to obtain the first processing result of the first static resource file. The first processing result includes the syntax tree corresponding to each source code file or the cascading style sheet Css rules corresponding to each source code file.

[0135] Further, according to at least one plug-in corresponding to each source code file, the first processing result of the first static resource file is loaded. Correspondingly, the developer can modify any node in the syntax tree or any Css rule on the interface of the plug-in system.

[0136] In the example, the main application obtains the modification result information of the user for the syntax tree and / or Css rules, obtains the second processing result of the first static resource file, converts the second processing result of the first static resource file, and obtains the second static resource file. According to the second static resource file, the sub-application is rendered in the main application. Thus, the problem of conflicts between Js variables and Css styles of the main application and each sub-application during micro-frontend rendering is solved.

[0137] It should be understood that the plugin system can coordinate how each plugin is executed. The plugin system itself is pure and will not affect the static resource file. When the developer does not set a plugin in the plugin system, the static resource files passed into and out of the plugin system are the same.

[0138] Based on the same technical concept as the foregoing embodiment, see Figure 4 , the static resource file processing device provided by the embodiment of the present application may include:

[0139] An acquisition module 401, configured to acquire a first static resource file; the first static resource file includes a source code file of the main application and source code files of at least one sub-application;

[0140] A processing module 402, configured to convert each source code file according to the conversion rule of each source code file in the first static resource file, and obtain a first processing result of the first static resource file; the first processing result includes a syntax tree corresponding to each source code file or a cascading style sheet Css rule corresponding to each source code file;

[0141] A plugin module 403, configured to load the first processing result of the first static resource file according to at least one plugin corresponding to each source code file.

[0142] In an implementation manner, the static resource file processing device further includes a receiving module 404, and the receiving module 404 is configured to receive the modification result information of the user for the syntax tree and / or the style rule, and obtain a second processing result of the first static resource file; the second processing result includes the modification result information.

[0143] In an implementation manner, the processing module 402 is configured to convert each source code file according to the conversion rule of each source code file in the first static resource file, and obtain a first processing result of the first static resource file, including:

[0144] Obtain the configuration item of each source code file;

[0145] When the configuration item of the first source code file indicates that the first source code file needs to be converted, convert the first source code file according to the conversion rule of the first source code file to obtain the first processing result of the first static resource file; the first source code file is any source code file in the first static resource file.

[0146] In one implementation, the processing module 402 is further configured to:

[0147] Determine the conversion rule of each source code file according to the file type of each source code file.

[0148] In one implementation, the processing module 402 is configured to determine the conversion rule of each source code file according to the file type of each source code file, including:

[0149] When the file type of any source code file is a Cascading Style Sheets type, determine the conversion rule of the any source code file as converting the string of the source code file into a style rule;

[0150] When the file type of the any source code file is a JavaScript type, determine the conversion rule of the any source code file as converting the string of the source code file into a syntax tree.

[0151] In one implementation, the plugin module 403 is further configured to:

[0152] Determine at least one plugin corresponding to each source code file according to the file type of each source code file.

[0153] In one implementation, the plugin module 403 is further configured to:

[0154] Convert the second processing result of the first static resource file to obtain a second static resource file;

[0155] The data types of the second static resource file and the first static resource file are the same.

[0156] In practical applications, the acquisition module 401, the processing module 402, the plugin module 403, and the receiving module 404 can all be implemented by a processor of an electronic device. The above processor can be at least one of an ASIC, a DSP, a DSPD, a PLD, an FPGA, a CPU, a controller, a microcontroller, and a microprocessor. The embodiments of the present application do not limit this.

[0157] In some embodiments, the functions or modules included in the device provided by the embodiments of the present application can be used to execute the methods described in the above method embodiments. The specific implementation can refer to the description of the above method embodiments. For the sake of brevity, it will not be repeated here.

[0158] Based on the same technical concept as the foregoing embodiments, refer to Figure 5 , the electronic device 500 provided by the embodiments of the present application may include: a memory 510 and a processor 520; wherein,

[0159] The memory 510 is used to store computer programs and data;

[0160] The processor 520 is configured to execute the computer program stored in the memory to implement any one of the static resource file processing methods in the foregoing embodiments.

[0161] In practical applications, the above-mentioned memory 510 may be a volatile memory, exemplarily RAM; or a non-volatile memory, exemplarily ROM, flash memory, hard disk drive (HDD) or solid-state drive (SSD); or a combination of the above types of memories. The above-mentioned memory 510 can provide instructions and data to the processor 520.

[0162] The descriptions of the foregoing embodiments tend to emphasize the differences between the embodiments. The same or similar parts can be referred to each other. For the sake of brevity, it will not be repeated here.

[0163] The methods disclosed in the method embodiments provided by the present application can be arbitrarily combined without conflict to obtain new method embodiments.

[0164] The features disclosed in the product embodiments provided by the present application can be arbitrarily combined without conflict to obtain new product embodiments.

[0165] The features disclosed in the method or device embodiments provided by the present application can be arbitrarily combined without conflict to obtain new method embodiments or device embodiments.

[0166] In several embodiments provided by the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. The device embodiments described above are merely illustrative. Exemplarily, the division of units is only a logical function division. In actual implementation, there may be other division methods. For example, multiple units or components can be combined, or can be integrated into another system, or some features can be ignored or not executed. Additionally, the couplings, direct couplings, or communication connections between the various components shown or discussed can be through some interfaces. The indirect couplings or communication connections of devices or units can be electrical, mechanical, or in other forms.

[0167] The units described above as separate components may or may not be physically separated. The components shown as units may or may not be physical units, that is, they can be located in one place or distributed to multiple grid units. One can select some or all of the units according to actual needs to achieve the purpose of the solution of this embodiment.

[0168] In addition, in each embodiment of the present application, the various functional units can all be integrated in one processing module, or each unit can be separately regarded as one unit, or two or more units can be integrated in one unit. The above-mentioned integrated units can be implemented in the form of hardware, or in the form of a combination of hardware and software functional units.

[0169] Those of ordinary skill in the art can understand that all or part of the steps of implementing the above method embodiments can be completed by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When the program is executed, it performs the steps including the above method embodiments.

[0170] The above is only the specific implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present application can easily think of changes or substitutions, which should all be covered by the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A method for processing static resource files, characterized in that, it includes: Obtain a first static resource file; The first static resource file includes source code files of a main application and source code files of at least one sub-application; When the file type of any one source code file is a Cascading Style Sheets type, determine that the conversion rule of the any one source code file is to convert the string of the source code file into a Css rule; When the file type of the any one source code file is a JavaScript type, determine that the conversion rule of the any one source code file is to convert the string of the source code file into a syntax tree; According to the conversion rules of each source code file in the first static resource file, convert each source code file to obtain a first processing result of the first static resource file; The first processing result includes the syntax tree corresponding to each source code file or the Cascading Style Sheets Css rule corresponding to each source code file; Load the first processing result of the first static resource file according to at least one plugin corresponding to each source code file.

2. The method according to claim 1, characterized in that, the method further includes: Receive the modification result information of the user for the syntax tree and / or the Css rule to obtain a second processing result of the first static resource file.

3. The method according to claim 1, characterized in that, The step of converting each source code file according to the conversion rules of each source code file in the first static resource file to obtain a first processing result of the first static resource file includes: Obtain the configuration item of each source code file; When the configuration item of the first source code file indicates to convert the first source code file, convert the first source code file according to the conversion rule of the first source code file to obtain a first processing result of the first static resource file; the first source code file is any one source code file in the first static resource file.

4. The method according to claim 1, characterized in that, the method further includes: Determine at least one plugin corresponding to each source code file according to the file type of each source code file.

5. The method according to claim 2, characterized in that, the method further includes: Convert the second processing result of the first static resource file to obtain a second static resource file; the data type of the second static resource file is the same as that of the first static resource file.

6. A static resource processing device, characterized in that, it includes: An acquisition module for acquiring a first static resource file; The first static resource file includes source code files of a main application and source code files of at least one sub-application; A processing module, configured to determine that the conversion rule for any source code file is to convert the string of the source code file into a Css rule when the file type of the any source code file is a cascading style sheet type; determine that the conversion rule for the any source code file is to convert the string of the source code file into a syntax tree when the file type of the any source code file is a JavaScript type; and convert each source code file in the first static resource file according to the conversion rule of each source code file in the first static resource file, to obtain a first processing result of the first static resource file. The first processing result includes the syntax tree corresponding to each source code file or the Css rule corresponding to each source code file. A plugin module, configured to load the first processing result of the first static resource file according to at least one plugin corresponding to each source code file.

7. An electronic device characterized in that the electronic device includes a memory, a processor, and a computer program stored on the memory and executable on the processor, and when the processor executes the program, the static resource file processing method according to any one of claims 1 to 5 is implemented.

8. A computer storage medium storing a computer program; characterized in that after being executed, the computer program can implement the static resource file processing method according to any one of claims 1 to 5.

Images