A Method, Device and Storage Medium for Style Isolation of a Micro Front-end Component Library

Abstract

The present invention relates to a method, device and storage medium for style isolation of a micro-frontend component library. In the process of packaging each micro-frontend component library, based on a preset component library file directory and a preset file matching rule, component files whose directory meets the preset component library file directory and file name meets the file matching rule are matched and intercepted; the directory and file name of the intercepted component files are verified; if the verification is successful, a unique target prefix of the micro-frontend to which the intercepted component file belongs is configured for the style class names of all styles in the intercepted component file, and the component file with the target prefix configured is passed to the next packaging process; if the verification fails, the component file is passed to the next packaging process. The present invention assigns independent and different target prefixes to the style class names in the component files of each micro-frontend, which can ensure that the styles between different micro-frontends will not contaminate each other.

Description

Technical Field

[0001] The present invention relates to the field of component style isolation, and in particular to a method, device and storage medium for isolating component library style of a micro front-end. Background Art

[0002] In the browser, all CSS is globally shared. If each application of the micro-frontend references the same third-party component library and adjusts the CSS of the third-party component library according to their own needs, after rendering the DOM and CSS of each application to the browser, it is very easy to have style conflicts and mutual pollution.

[0003] To solve this problem, major micro-frontend frameworks have provided some solutions, such as requiring all micro-frontend applications to modify CSS according to certain rules and constraints, or variableizing all CSS before engineering development, and using different variables to distinguish different components of different micro-frontend applications. However, these solutions require developers to modify CSS according to preset rules and constraints or variableize CSS according to preset variable rules during the development process. If the introduced CSS model has been solidified in the completed engineering project, the above method will require developers to spend a lot of energy on batch transformation. The present application proposes a micro-frontend component library style isolation method for engineering projects whose CSS models have been solidified, which can isolate the component library style of the micro-frontend of the solidified project during the packaging process. Summary of the invention

[0004] In order to solve the above technical problems or at least partially solve the above technical problems, the present invention provides a component library style isolation method, device and storage medium for a micro front-end.

[0005] In a first aspect, the present invention provides a component library style isolation method for a micro-frontend, comprising: in a process of packaging each micro-frontend component library, a sub-file loader of a processing style isolation process matches and intercepts a component file whose directory matches a preset component library file directory and whose file name matches a file matching rule based on a preset component library file directory and a preset file matching rule;

[0006] The sub-file loader that handles the style isolation process verifies the directory and file name of the intercepted component file; if the verification succeeds, the style class names of all styles in the intercepted component file are configured with a unique target prefix of the micro-frontend to which the corresponding component file belongs, and the component file with the configured target prefix is passed to the next packaging processing process; if the verification fails, the component file is passed to the next packaging processing process.

[0007] Furthermore, corresponding to each process of the packaging process, a corresponding sub-file loader is constructed. The constructed sub-file loader returns the complete address of the component file of the component file it intercepts. The text processor reads the corresponding component file based on the complete component address provided by each sub-file loader and performs corresponding processing on the content of the read component file to implement the packaging process.

[0008] Furthermore, in the file directory configuration file, for each sub-file loader, its component library file directory is preset respectively. The component library file directory contains the directory where the component files of the micro front-end that the sub-file loader needs to intercept are located; and in the file matching rule configuration file, for each sub-file loader, the file matching rules for the component files it needs to intercept are preset respectively.

[0009] Furthermore, the sub-file loaders for processing the style isolation process include: a first sub-file loader and a second sub-file loader; in the file directory configuration file, a first component library file directory is configured for the first file loader, and a second component library file directory is configured for the second file loader; in the file matching rule configuration file, a first file matching rule is configured for the first file loader. The first file matching rule is formed by regular matching as "*js" or "*framework" to match component files with suffixes of.js files and.framework files; a second file matching rule is configured for the second file loader. The second file matching rule is formed by regular matching as "*css" or "*less" or "*scss" to match component files with suffixes of.css,.less, and.scss files.

[0010] Furthermore, the sub-file loaders for processing the style isolation process verify the directory and file name of the intercepted component file, including: a sub-file loader for processing the style isolation process obtains and verifies whether the directory where the intercepted component file is located belongs to the component library file directory corresponding to the sub-file loader. If it does not belong, the verification fails. If it belongs, the sub-file loader obtains and verifies whether the suffix of the file name of the intercepted component file belongs to the file name suffixes defined in the file matching rule corresponding to the sub-file loader. If it belongs, the verification is successful. If it does not belong, the verification fails.

[0011] Furthermore, configuring a unique target prefix of the micro front-end to which the corresponding component file belongs for all style class names of all styles in the intercepted component file includes:

[0012] For the component files that need to perform style isolation and have passed the verification, the sub-file loader that processes the style isolation process obtains the complete address of the component file, sends the complete address of the component file to the text processor, and the text processor reads the corresponding component file content using the complete address of the component file, and matches all style class names from the content of the component file according to the preset style class name matching rules; configure the unique target prefix of the micro front-end to which the corresponding component file belongs for the matched style class names.

[0013] Furthermore, the means by which the text processor configures the unique target prefix of the micro front-end to which the corresponding component file belongs for the matched style class names includes: detecting whether the style class name has a prefix. If the style class name does not have a prefix, add the target prefix to the style class name without a prefix according to the format of the prefix. If the style class name has a prefix, replace the original prefix of the style class name with the target prefix.

[0014] Furthermore, the text processor reads the preset prefix configuration file or the target prefix parameter preset in the file component to obtain the target prefix; among them, in the prefix configuration file, the target prefix for each micro front-end is recorded, and the target prefix parameter in the file component records the target prefix corresponding to the micro front-end to which the file component belongs.

[0015] In a second aspect, the present invention provides a device for isolating the styles of a component library of a micro front-end, including: a processing module, a storage module, and a bus module. The bus module connects the processing module and the storage module. The storage module stores computer instructions and the micro front-end project files to be packaged. The processing module reads the computer instructions and executes them to process the micro front-end project files to be packaged, implementing the method for isolating the styles of the component library of the micro front-end described above.

[0016] In a third aspect, the present invention provides a storage medium for implementing the method for isolating the styles of a component library of a micro front-end. The storage medium stores a computer program, and when the computer program is executed by a processor, it implements the method for isolating the styles of the component library of the micro front-end described above.

[0017] The above technical solutions provided by the embodiments of the present invention have the following advantages compared with the prior art:

[0018] For a project with a solidified CSS mode, during the packaging process of each micro-frontend component library of the project, the style class names in the component files of all component libraries of each micro-frontend are processed with prefix configuration, such as adding a target prefix and replacing the original prefix with the target prefix, so that the style class names in the component files of each micro-frontend are configured with different target prefixes. Although all styles are still global in the browser, since independent and different target prefixes are assigned to the style class names in the component files of each micro-frontend, it can be ensured that the styles between different micro-frontends will not contaminate each other. The sub-file loader for processing the style isolation process verifies the directory and file name of the intercepted component file after matching and intercepting the component file, and only performs the prefix configuration operation if the verification is successful, configuring the unique target prefix of the micro-frontend to which the component file belongs for all style class names of the styles in the component file, realizing the reliability of the prefix configuration. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The accompanying drawings herein are incorporated into and constitute a part of this specification, showing embodiments consistent with the present invention and, together with the specification, are used to explain the principles of the present invention.

[0020] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the accompanying drawings required for use in the description of the embodiments or the prior art. Obviously, for those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0021] Figure 1 It is a flowchart of a method for isolating the styles of a component library of a micro-frontend provided by an embodiment of the present invention;

[0022] Figure 2 It is a flowchart of verifying the directory and file name of the intercepted component file provided by an embodiment of the present invention;

[0023] Figure 3 It is a flowchart of configuring the unique target prefix of the micro-frontend to which the intercepted component file belongs for all style class names of the styles in the intercepted component file provided by an embodiment of the present invention;

[0024] Figure 4 It is a flowchart of the text processor configuring the unique target prefix of the micro-frontend to which the matched style class name belongs for the style class name provided by an embodiment of the present invention;

[0025] Figure 5 It is a schematic diagram of a device for isolating the styles of a component library of a micro-frontend provided by an embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0026] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are some, but not all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0027] It should be noted that in this document, the terms "include", "comprise", or any other variant thereof are intended to cover a non-exclusive inclusion, such that a process, method, article, or device including a series of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or device. Without further limitation, an element defined by the phrase "comprising a..." does not exclude the presence of additional identical elements in the process, method, article, or device including the element.

[0028] Embodiment 1

[0029] Refer to Figure 1 As shown, the embodiments of the present invention provide a method for isolating the styles of a micro-frontend component library, including:

[0030] During the process of packaging each micro-frontend component library, the sub-file loader that processes the style isolation process matches the component files that conform to the file matching rules based on the preset component library file directory and the preset file matching rules, and intercepts the matched component files.

[0031] In the specific implementation process, corresponding sub-file loaders are constructed for each process of the packaging process. In the specific implementation process, in the file directory configuration file, the component library file directory for each sub-file loader is preset respectively. The component library file directory includes the directory where the component files of the micro-frontend that the sub-file loader needs to intercept are located; and in the file matching rule configuration file, the file matching rules for the component files that each sub-file loader needs to intercept are preset respectively. The constructed sub-file loader returns the complete address of the component file of the intercepted component file, and the text processor loads the component file based on the complete address of the component provided by each sub-file loader and performs corresponding processing on the loaded component file to implement the packaging process.

[0032] The constructed sub-file loader includes a sub-file loader that processes the style isolation process. The sub-file loader that processes the style isolation process includes a first sub-file loader and a second sub-file loader.

[0033] Among them, the first sub - file loader intercepts component files that are in the first component library file directory and whose file names conform to the preset first file matching rule. Here, the first component library file directory is the component library file directory corresponding to the first sub - file loader recorded in the file directory configuration file. The preset first file matching rule is formed based on regular matching as "* .js" or "* .framework", which is used to match component files with suffixes of .js files and .framework files. For example, when the current micro - front - end implementation project uses the vue framework, "* .framework" is "* .vue".

[0034] Among them, the second sub - file loader intercepts component files that are in the second component library file directory and whose file names conform to the preset second file matching rule. Here, the second component library file directory is the component library file directory corresponding to the second sub - file loader recorded in the file directory configuration file. The preset second file matching rule is formed based on regular matching as "* .css" or "* .less" or "* .scss", which is used to match component files with suffixes of .css, .less, and .scss files.

[0035] The sub - file loader for processing the style isolation process verifies the directory and file name of the intercepted component file. In the specific implementation process, refer to Figure 2 As shown, verifying the directory and file name of the intercepted component file includes:

[0036] A sub - file loader for processing the style isolation process obtains and verifies whether the directory where the intercepted component file is located belongs to the component library file directory corresponding to this sub - file loader. If it does not belong, the verification fails. If it belongs, then this sub - file loader obtains and verifies whether the suffix of the file name of the intercepted component file belongs to the file name suffixes defined in the file matching rule corresponding to this sub - file loader. If it belongs, the verification is successful; if it does not belong, the verification fails. If it belongs, the verification is successful.

[0037] Specifically:

[0038] The first sub - file loader obtains and verifies whether the directory where the intercepted component file is located belongs to the first component library file directory. If it does not belong, the verification fails. If it belongs, the first sub - file loader continues to obtain and verify whether the suffix of the file name of the intercepted component file belongs to the file name suffixes defined in the first file matching rule. If it does not belong, the verification fails. If it belongs, the verification is successful.

[0039] For example, the directory where a first sub-file loader intercepts a component file is: / node_modules / element-ui / . The first sub-file loader verifies whether node_modules / element-ui / belongs to the first component library file directory. Otherwise, the verification of the directory where the component file is located and the file name of the matched component file fails. If it belongs, the first sub-file loader obtains the suffix of the component file based on a preset first suffix matching rule, and verifies whether the suffix of the component file belongs to the file name suffix ".js" or ".framework" defined in the first file matching rule. If it does not belong, the verification of the directory where the component file is located and the file name of the matched component file fails. If it belongs, the verification of the directory where the component file is located and the file name of the matched component file is successful.

[0040] The second sub-file loader obtains and verifies whether the directory where the intercepted component file is located belongs to the second component library file directory. If it does not belong, the verification fails. If it belongs, the second sub-file loader continues to obtain and verify whether the suffix of the file name of the intercepted component file belongs to the file name suffix defined in the second file matching rule. If it does not belong, the verification fails. If it belongs, the verification is successful.

[0041] For example, the directory where a second sub-file loader intercepts a component file is: / node_modules / element-ui / lib / theme-chalk / . Verify whether node_modules / element-ui / lib / theme-chalk / belongs to the second component library file directory. Otherwise, the verification of the directory where the component file is located and the file name of the matched component file fails. If it belongs, the second sub-file loader obtains the suffix of the component file based on a preset second suffix matching rule, and verifies whether the suffix of the component file belongs to the file name suffix ".css" or ".less" or ".scss" defined in the second file matching rule. If it does not belong, the verification of the directory where the component file is located and the file name of the matched component file fails. If it belongs, the verification of the directory where the component file is located and the file name of the matched component file is successful.

[0042] If the verification is successful, a unique target prefix of the micro front-end to which the corresponding component file belongs is configured for the style class names of all styles in the intercepted component file. Then, the component file with the target prefix configured is passed to the next packaging process.

[0043] Refer to Figure 3 As shown, the process of configuring a unique target prefix of the micro front-end to which the corresponding component file belongs for the style class names of all styles in the intercepted component file includes:

[0044] For component files that have passed the verification and require style isolation, the sub-file loader that processes the style isolation process obtains the complete address of the component file, sends the complete address of the component file to the text processor. The text processor reads the content of the corresponding component file using the complete address of the component file, and matches all style class names from the content of the component file according to the preset style class name matching rules; configures the unique target prefix of the micro front-end to which the corresponding component file belongs for the matched style class names.

[0045] For the component files that have passed the verification by the first sub-file loader, the first sub-file loader combines the directory where it is located with its file name to obtain the complete address of the first component file.

[0046] The first sub-file loader sends the complete address of the first component file to the text processor.

[0047] The text processor reads the content of the corresponding component file using the complete address of the first component file, matches all style class names from the content of the component file according to the preset style class name matching rules, where the style class name matching rules are implemented based on regular matching; configures the unique target prefix of the micro front-end to which the corresponding component file belongs for the matched style class names.

[0048] For the component files that have passed the verification by the second sub-file loader, the second sub-file loader combines the directory where it is located with its file name to obtain the complete address of the second component file.

[0049] The second sub-file loader sends the complete address of the second component file to the text processor.

[0050] The text processor reads the content of the corresponding component file using the complete address of the second component file, matches all style class names from the content of the component file according to the preset style class name matching rules; configures the unique target prefix of the micro front-end to which the corresponding component file belongs for the matched style class names.

[0051] In the specific implementation process, the means by which the text processor configures the unique target prefix of the micro front-end to which the corresponding component file belongs for the matched style class names include: traversing the matched style class names; detecting whether there is a prefix in the style class name. If there is no prefix, a target prefix is added to the style class name without a prefix according to the prefix format. If there is a prefix, the original prefix of the style class name is replaced with the target prefix.

[0052] In the specific implementation process, the target prefix is configured into a preset prefix configuration file. The prefix configuration file records the target prefixes corresponding to each micro front-end, and the target prefixes corresponding to different micro front-ends are different. The text processor reads the prefix configuration file to obtain the corresponding target prefix, and uses the obtained target prefix to configure the prefix of the intercepted component file.

[0053] In the specific implementation process, a target prefix parameter is pre-added to the component file. The target prefix parameter is used to record the target prefix. The text processor obtains the corresponding target prefix by reading the target prefix parameter in the component file, and uses the obtained target prefix to configure the prefix of the intercepted component file.

[0054] The text processor passes the component file with the prefix configuration completed to the next packaging process.

[0055] Embodiment 2

[0056] Refer to Figure 5 As shown, an embodiment of the present invention provides a component library style isolation device for a micro front-end, including: a processing module, a storage module, and a bus module. The bus module connects the processing module and the storage module. The storage module stores computer instructions and the micro front-end project files to be packaged. The processing module reads the computer instructions and executes them to process the micro front-end project files to be packaged, implementing the component library style isolation method of the micro front-end.

[0057] Embodiment 3

[0058] An embodiment of the present invention provides a storage medium for implementing a component library style isolation method for a micro front-end. The storage medium stores a computer program, and when the computer program is executed by a processor, it implements the component library style isolation method of the micro front-end.

[0059] In the embodiments provided by the present invention, it should be understood that the disclosed structure and method can be implemented in other ways. For example, the structural embodiments described above are merely illustrative. For example, the division of the 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 integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed coupling or direct coupling or communication connection between each other can be through some interfaces, and the indirect coupling or communication connection of structures or units can be in electrical, mechanical or other forms.

[0060] The units described as separate components may or may not be physically separated. The components displayed as units may or may not be physical units, that is, they can be located in one place, or they can be distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0061] In addition, in each embodiment of the present invention, each functional unit may be integrated into one processing unit, may exist separately as individual physical units, or two or more units may be integrated into one unit. The above-mentioned integrated units may be implemented in the form of hardware or in the form of software functional units.

[0062] The above are only specific embodiments of the present invention, enabling those skilled in the art to understand or implement the present invention. Various modifications to these embodiments will be obvious to those skilled in the art, and the general principles defined herein can be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to these embodiments shown herein, but rather will be accorded the widest scope consistent with the principles and novel features claimed herein.

Claims

1. A method for style isolation of a component library in a micro front-end, characterized in that Including: During the process of packaging each micro front-end component library, the sub-file loader for processing the style isolation process matches and intercepts component files whose directories meet the preset component library file directory and file names meet the file matching rules based on the preset component library file directory and the preset file matching rules; The sub-file loader for processing the style isolation process verifies the directory and file name of the intercepted component file; If the verification is successful, a unique target prefix of the micro front-end to which the intercepted component file belongs is configured for the style class names of all styles in the intercepted component file, and then the component file with the target prefix configured is passed to the next packaging process; If the verification fails, the component file is passed to the next packaging process; among them, the sub-file loader for processing the style isolation process verifying the directory and file name of the intercepted component file includes: the sub-file loader for processing the style isolation process obtains and verifies whether the directory where the intercepted component file is located belongs to the component library file directory corresponding to the sub-file loader. If it does not belong, the verification fails. If it belongs, the sub-file loader obtains and verifies whether the suffix of the file name of the intercepted component file belongs to the file name suffix defined in the file matching rules corresponding to the sub-file loader. If it belongs, the verification is successful. If it does not belong, the verification fails.

2. The method for isolating the component library styles of the micro front-end according to claim 1, wherein For each process of the corresponding packaging process, a corresponding sub-file loader is constructed. The constructed sub-file loader returns the complete component file address of the intercepted component file. The text processor reads the corresponding component file based on the complete component file address provided by each sub-file loader and performs corresponding processing on the content of the read component file to implement the packaging process.

3. The method for isolating component library styles of a micro front-end according to claim 2, wherein In the file directory configuration file, the component library file directory for each sub-file loader is preset respectively. The component library file directory includes the directory where the component files of the micro front-end that the sub-file loader needs to intercept are located; And in the file matching rule configuration file, the file matching rules for the component files that each sub-file loader needs to intercept are preset respectively.

4. The method for isolating the component library styles of the micro front-end according to claim 3, wherein, The sub-file loader for processing the style isolation process includes: a first sub-file loader and a second sub-file loader; in the file directory configuration file, a first component library file directory is configured for the first file loader, and a second component library file directory is configured for the second file loader; in the file matching rule configuration file, a first file matching rule is configured for the first file loader. The first file matching rule is "*js" or "*framework" formed based on regular matching, used to match component files with suffixes of.js files and.framework; a second file matching rule is configured for the second file loader. The second file matching rule is "*css" or "*less" or "*scss" formed based on regular matching, used to match component files with suffixes of.css,.less, and.scss.

5. The method for isolating component library styles of a micro front-end according to claim 1, characterized in that The configuration of the unique target prefix of the micro front-end to which the intercepted component file belongs for the style class names of all styles in the intercepted component file includes: For the component files that need to perform style isolation and have passed the verification, the sub-file loader that processes the style isolation process obtains the complete address of the component file, sends the complete address of the component file to the text processor, and the text processor reads the corresponding component file content using the complete address of the component file, and matches all the style class names from the content of the component file according to the preset style class name matching rules; configure the unique target prefix of the micro front-end to which the corresponding component file belongs for the matched style class names.

6. The method for isolating the component library styles of the micro front-end according to claim 5, characterized in that, The means by which the text processor configures the unique target prefix of the micro front-end to which the corresponding component file belongs for the matched style class names includes: detecting whether the style class name has a prefix. If the style class name does not have a prefix, add the target prefix to the style class name without a prefix according to the prefix format. If the style class name has a prefix, replace the original prefix of the style class name with the target prefix.

7. The method for isolating component library styles of a micro front-end according to claim 6, characterized in that, The text processor reads the preset target prefix parameter in the prefix configuration file or the file component to obtain the target prefix; among them, the prefix configuration file records the target prefix for each micro front-end, and the target prefix parameter in the file component records the target prefix corresponding to the micro front-end to which the file component belongs.

8. A component library style isolation device for micro frontends, characterized in that, Including: A processing module, a storage module, and a bus module. The bus module connects the processing module and the storage module. The storage module stores computer instructions and the micro front-end project files to be packaged. The processing module reads the computer instructions and executes them to process the micro front-end project files to be packaged, implementing the method for isolating the styles of the component library of the micro front-end as described in any one of claims 1-7.

9. A storage medium for a method of isolating component library styles in a micro-frontend, wherein the storage medium stores a computer program, characterized in that, When the computer program is executed by a processor, it implements the method for isolating the styles of the component library of the micro front-end as described in any one of claims 1-7.

Images