Method and device for detecting compatibility of front-end engineering style file

Abstract

The invention relates to the technical field of software development, and particularly discloses a front-end project style file compatibility detection method and device.The method comprises the steps that a front-end project file directory to be detected is obtained; extracting compatible attribute configuration data of the browser; searching a plurality of front-end project style files in the front-end project file directory; the front-end engineering style file comprises a plurality of style rules, and the style rules are used for defining visual performance of webpage elements; analyzing each front-end project style file in the plurality of front-end project style files into a corresponding abstract syntax tree; traversing the abstract syntax tree to obtain compatibility data corresponding to each front-end engineering style file; and generating a front-end engineering compatibility detection report based on the compatibility attribute configuration data and the compatibility data. Through the scheme, the compatibility of the front-end engineering style file can be comprehensively detected, the efficiency of compatibility detection of the front-end engineering style file can be improved, and the project operation compatibility is improved.

Description

Technical Field

[0001] The present invention relates to the field of software development technology, and in particular to a method and device for detecting the compatibility of front-end engineering style files. Background Art

[0002] Style compatibility in front-end engineering means ensuring that the style of a web page remains consistent and predictable across different browsers, operating systems, devices, and screen sizes. Since different browsers and devices may parse and render CSS differently, front-end developers need to take a series of measures to ensure style compatibility.

[0003] Front-end developers usually use Can I use to search and get a detailed compatibility chart showing the support of different browser versions for the feature. The chart usually includes color coding to indicate the degree of support (such as green for full support, red for unsupported, orange for partial support, etc.). However, front-end developers manually query the compatibility of style files. The following are the disadvantages: (1) Inefficiency: Manually querying the compatibility of each CSS feature or API takes a lot of time, especially when dealing with large projects or needing to support multiple features. Developers need to enter the feature names one by one, and then view and parse the compatibility chart and detailed information, which is a tedious and error-prone process. (2) Easy to miss: Manual query may cause developers to miss the compatibility check of certain important features, especially when the project is large or time is tight. Missing compatibility checks may result in the discovery at a later stage that the style or function does not work properly on some browsers, thereby increasing the cost and risk of repair. (3) Information is not updated in a timely manner: The data on the Can I use website is updated regularly, but developers may not be able to keep up with the latest compatibility information in a timely manner. If developers do not regularly query Can I use or pay attention to its update notifications, they may miss important compatibility changes, which will affect the quality of the project and user experience. (4) Lack of integration: Manual compatibility queries usually cannot be seamlessly integrated with other development tools or processes, resulting in low development efficiency. Developers need to switch between multiple tools and copy and paste information, which increases the risk of errors and the complexity of work. (5) Difficult to track and record: Manually queried compatibility information is difficult to track and record, especially in multi-person collaborative projects. Without an effective recording mechanism, other developers may not be able to quickly understand the compatibility information that has been queried, resulting in duplication of work and waste of resources. (6) High developer skill requirements: Manual compatibility queries require developers to have in-depth knowledge and experience in front-end technologies such as CSS, HTML, and JavaScript. For novice or inexperienced developers, they may be confused or unable to accurately understand the meaning of compatibility charts and detailed information.

[0004] Currently, no effective solution has been proposed to the above problems. Summary of the invention

[0005] The embodiments of this specification provide a front-end engineering style file compatibility detection method and device to solve the problem of low efficiency of compatibility detection methods in the prior art.

[0006] The embodiment of this specification provides a front-end engineering style file compatibility detection method, including:

[0007] Get the front-end project file directory to be tested; extract the browser's compatible attribute configuration data;

[0008] Searching for a plurality of front-end engineering style files in the front-end engineering file directory; the front-end engineering style files include a plurality of style rules, and the style rules are used to define the visual performance of web page elements;

[0009] Parsing each of the plurality of front-end engineering style files into a corresponding abstract syntax tree, traversing the abstract syntax tree, and obtaining compatibility data corresponding to each of the front-end engineering style files;

[0010] Based on the compatible attribute configuration data and the compatibility data, generating a front-end engineering compatibility detection report;

[0011] The plurality of front-end engineering style files include at least one of the following: a CSS file, an inline style file, and an inline style sheet;

[0012] Accordingly, multiple front-end engineering style files in the front-end engineering file directory are searched, including:

[0013] Match the file path of the CSS file in the front-end engineering file directory using a pattern matching method, and read the CSS file;

[0014] Selecting a DOM element node in the front-end project file directory to obtain a node list object; the node list object includes multiple DOM element nodes on the page; traversing each DOM element in the node list object; determining whether each DOM element has an inline style setting, and obtaining an inline style file; and / or,

[0015] Search for multiple style tags in the front-end engineering file directory, traverse the multiple style tags and extract style content to obtain an inline style sheet.

[0016] In one embodiment, obtaining the front-end engineering file directory to be detected includes:

[0017] Obtain a front-end project directory; extract a construction directory of the front-end project from the front-end project directory and display it to the user; the construction directory is a directory output after the front-end project is built;

[0018] In response to the user's selection operation, the construction directory selected by the user is used as the front-end project file directory.

[0019] In one embodiment, parsing each of the plurality of front-end engineering style files into a corresponding abstract syntax tree includes:

[0020] Read the file content of the CSS file, the inline style file and / or the inline style sheet to obtain the CSS text;

[0021] The CSS text is parsed to obtain a corresponding abstract syntax tree.

[0022] In one embodiment, traversing the abstract syntax tree to obtain compatibility data corresponding to each front-end engineering style file includes:

[0023] Traversing the nodes in the abstract syntax tree;

[0024] Determine whether the traversed node is a regular node;

[0025] For rule nodes, extract attribute names and attribute values ​​to obtain corresponding compatibility data.

[0026] In one embodiment, the method is implemented by a VS Code plug-in.

[0027] In one embodiment, the VS Code plug-in is implemented in the following manner:

[0028] Initialize the plug-in project to set the plug-in project information;

[0029] Install plugin dependencies to support writing plugins;

[0030] Define plugin contribution points to activate plugins when executing specific commands;

[0031] Implementing plug-in logic, wherein the plug-in logic is used to implement the front-end engineering style file compatibility detection method;

[0032] Package and publish said plugin.

[0033] The embodiment of this specification also provides a front-end engineering style file compatibility detection device, including:

[0034] The acquisition module is used to obtain the directory of the front-end engineering files to be detected; it is also used to extract the compatible attribute configuration data of the browser;

[0035] A search module, used to search for a plurality of front-end engineering style files in the front-end engineering file directory; the front-end engineering style files include a plurality of style rules, and the style rules are used to define the visual expression of web page elements;

[0036] A parsing module, used for parsing each front-end engineering style file among the plurality of front-end engineering style files into a corresponding abstract syntax tree, traversing the abstract syntax tree, and obtaining compatibility data corresponding to each front-end engineering style file;

[0037] A generating module, used for generating a front-end engineering compatibility detection report based on the compatible attribute configuration data and the compatibility data;

[0038] Among them, the multiple front-end engineering style files include at least one of the following: CSS files, inline style files and inline style sheets; the search module is specifically used to: match the file path of the CSS file in the front-end engineering file directory using a pattern matching method, and read the CSS file; select the DOM element node in the front-end engineering file directory to obtain a node list object; the node list object contains multiple DOM element nodes on the page; traverse each DOM element in the node list object; determine whether each DOM element has an inline style setting to obtain an inline style file; and / or search for multiple style tags in the front-end engineering file directory, traverse the multiple style tags and extract style content to obtain an inline style sheet.

[0039] An embodiment of the present specification also provides a computer device, including a processor and a memory for storing processor executable instructions, and when the processor executes the instructions, the steps of the front-end engineering style file compatibility detection method described in any of the above embodiments are implemented.

[0040] The embodiments of this specification also provide a computer-readable storage medium having computer instructions stored thereon, which, when executed by a processor, implement the steps of the front-end engineering style file compatibility detection method described in any of the above embodiments.

[0041] The embodiments of this specification also provide a computer program product, including a computer program / instruction, which, when executed by a processor, implements the steps of the front-end engineering style file compatibility detection method described in any of the above embodiments.

[0042] In an embodiment of the present specification, a front-end engineering style file compatibility detection method is provided, which can obtain a front-end engineering file directory to be detected, extract the browser's compatible attribute configuration data, search for multiple front-end engineering style files in the front-end engineering file directory, parse each of the multiple front-end engineering style files into a corresponding abstract syntax tree, traverse the abstract syntax tree, obtain the compatibility data corresponding to each front-end engineering style file, and generate a front-end engineering compatibility detection report based on the compatible attribute configuration data and the compatibility data. Through the above scheme, according to the developer's browser compatibility requirements, the incompatible styles existing in the project can be automatically fed back, without manual query, and the efficiency is high; the query is comprehensive and no omissions will be made; it is convenient to track and record compatibility issues; it is convenient for developers to optimize the front-end project according to the summarized browser compatibility issues and improve the project operation compatibility. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] The drawings described herein are used to provide a further understanding of this specification, constitute a part of this specification, and do not constitute a limitation of this specification. In the drawings:

[0044] Figure 1 A flow chart of a front-end engineering style file compatibility detection method in an embodiment of this specification is shown;

[0045] Figure 2 The following is a flowchart of the implementation of the VS Code plug-in in an embodiment of this specification;

[0046] Figure 3 A schematic diagram showing the implementation logic of a method for detecting browser compatibility of a front-end engineering style file in an embodiment of this specification;

[0047] Figure 4 A schematic diagram showing a front-end engineering style file compatibility detection device in an embodiment of this specification;

[0048] Figure 5 A schematic diagram of a computer device in an embodiment of the present specification is shown. DETAILED DESCRIPTION

[0049] The principles and spirit of this specification will be described below with reference to several exemplary embodiments. It should be understood that these embodiments are provided only to enable those skilled in the art to better understand and implement this specification, and are not intended to limit the scope of this specification in any way. On the contrary, these embodiments are provided to make this specification more thorough and complete, and to fully convey the scope of this disclosure to those skilled in the art.

[0050] Those skilled in the art will appreciate that the embodiments of this specification may be implemented as a system, device, method, or computer program product. Therefore, this specification may be implemented in the following forms: complete hardware, complete software (including firmware, resident software, microcode, etc.), or a combination of hardware and software.

[0051] In the embodiments of this specification, certain software, components, models, etc. existing solutions in the industry may be mentioned. They should be regarded as exemplary. Their purpose is only to illustrate the feasibility of implementing the technical solution of this application, but it does not mean that the applicant has or will necessarily use the solution.

[0052] The embodiments of this specification provide a method for detecting the compatibility of front-end engineering style files. Figure 1 A flowchart of a front-end engineering style file compatibility detection method in an embodiment of this specification is shown. Although this specification provides method operation steps or device structures as shown in the following embodiments or drawings, more or fewer operation steps or module units may be included in the method or device based on routine or no creative labor. In the steps or structures where there is no necessary causal relationship logically, the execution order of these steps or the module structure of the device is not limited to the execution order or module structure described in the embodiments of this specification and shown in the drawings. When the method or module structure is applied to an actual device or terminal product, it can be connected according to the method or module structure shown in the embodiments or drawings for sequential execution or parallel execution (for example, a parallel processor or a multi-threaded processing environment, or even a distributed processing environment).

[0053] Specifically, Figure 1 As shown, a front-end engineering style file compatibility detection method provided in an embodiment of this specification may include the following steps.

[0054] Step S101, obtaining the front-end engineering file directory to be detected; extracting the browser's compatible attribute configuration data.

[0055] The method in this embodiment can be executed by a computer device or implemented by an application in a computer device. The front-end engineering file directory for browser compatibility to be detected can be obtained. In front-end engineering, when using frameworks such as Vue and React, style files can exist in multiple locations, and the style files depend on the structure of the project, the construction tools used, and the development habits of the team. The following are some common style file storage locations: global style files, component internal styles, styles of third-party libraries and frameworks, public style libraries, dynamically generated styles, and other locations. In addition to the above common locations, style files may also be stored in other locations according to the specific needs of the project and the development habits of the team. For example, in a project using CSS-in-JS technology, the style may be directly stored in a JavaScript file as a result returned by a JavaScript object or function. As described above, there are multiple places for the style files of the front-end engineering, and there may be intermediate states (such as pre-processed style files such as less and scss), which leads to the acquisition of the front-end engineering file directory being more cumbersome, and it may also be impossible to fully obtain the front-end engineering file directory.

[0056] In some embodiments of the present specification, obtaining a front-end engineering file directory to be detected may include: obtaining the front-end engineering directory; extracting a build directory of the front-end engineering from the front-end engineering directory and displaying it to a user; the build directory is a directory output after building the front-end engineering; and in response to a user's selection operation, using the build directory selected by the user as the front-end engineering file directory.

[0057] In order to quickly and comprehensively obtain the front-end engineering file directory, in this embodiment, the front-end engineering file directory is obtained in the following manner. During the construction process of the front-end engineering, the front-end engineering source code and related resource files are converted into applications or web pages that can be run in the browser. This construction process usually includes steps such as code compilation, packaging, and optimization. All style files of the front-end source code project will be built into the final construction directory, and there are three forms in the directory, that is, the final style includes CSS files, inline styles, and inline style sheets. During the construction of the front-end engineering, the output directory is the directory where the generated files are stored after the construction is completed. This directory usually contains front-end resources that have been processed by steps such as compilation, packaging, and optimization, such as compressed JavaScript files, CSS files, pictures, etc. According to common construction tools and frameworks, the front-end engineering construction output directory may include: a default output directory, and / or a configurable output directory.

[0058] The process of providing developers with the option of building a directory may include: (1) obtaining the root folder path of the current workspace, i.e., the front-end project directory; (2) filtering out the first-level subfolders, where the build directory exists in the first-level subfolders of the front-end project; (3) displaying a quick selection menu for developers to select a folder; (4) recording the build directory selected by the developer. The build directory selected by the developer may be used as the front-end project file directory. According to the build directory selected by the user, the front-end resources that have been compiled, packaged, and optimized can be found in the directory, including CSS files, inline styles, and inline style sheets where the final style files exist. In this way, the user can accurately specify the front-end project file directory for which browser compatibility is to be tested in order to perform related operations.

[0059] Common browsers used by front-end projects include: Google Chrome, Firefox, Safari, Internet Explorer, Microsoft Edge, and other browsers. The browser compatibility attribute configuration data includes the developer's configuration information for the browser, that is, which browsers the developer wants to detect compatibility with. In one embodiment, the developer can select the minimum version of the browser that the front-end project runs. In one embodiment, the vscode plug-in can add a configuration field in the contributions section of the package.json file to define the configuration options of the browser. The compatibility attribute configuration data includes the version data corresponding to each browser.

[0060] Step S102, searching for a plurality of front-end engineering style files in the front-end engineering file directory; the front-end engineering style files include a plurality of style rules, and the style rules are used to define the visual expression of web page elements.

[0061] After obtaining the front-end engineering file directory, multiple front-end engineering style files in the front-end engineering file directory can be searched. The front-end engineering style file may include multiple style rules. The style rules may define the visual representation of web page elements. In front-end engineering, style files are files used to define the visual representation of web page elements. These files usually contain various style rules for controlling the visual attributes of elements in the web page, such as color, font, layout, animation, etc. The main function of the style file is to make the web page content more visually attractive and help maintain a consistent look and feel. The style file also includes compatibility information for each style rule.

[0062] The multiple front-end engineering style files include at least one of the following: CSS files, inline style files and inline style sheets; accordingly, searching for multiple front-end engineering style files in the front-end engineering file directory includes: matching the file path of the CSS file in the front-end engineering file directory in a pattern matching manner, and reading the CSS file; selecting a DOM element node in the front-end engineering file directory to obtain a node list object; the node list object contains multiple DOM element nodes on the page; traversing each DOM element in the node list object; determining whether each DOM element has an inline style setting to obtain an inline style file; and / or searching for multiple style tags in the front-end engineering file directory, traversing the multiple style tags and extracting style content to obtain an inline style sheet.

[0063] Specifically, for CSS files, you can use glob("** / *.css") to match the .css file paths in the front-end project file directory and all subdirectories. The glob library is a popular npm package that can use pattern matching to find files in the file system. For each matched file path, use fs.readFile to asynchronously read the file content. For inline style files, you can use document.querySelectorAll('*') to select all DOM elements on the page and return a NodeList object containing all element nodes in the document. You can use the forEach method to traverse each element in this NodeList collection. For each element, you can check whether the element has an inline style setting. The cssText attribute contains the CSS style text in the element's style attribute. For inline style sheets, you can find all <style>标签。这会返回一个HTMLCollection对象，包含所有匹配的<style>元素。遍历<style>标签。对于每个<style>元素，使用textContent属性或innerText属性来获取标签内的文本内容。这将包含样式规则，如选择器、属性和值等。

[0064] 在本说明书一些实施例中，所述方法还可以包括：将检测到的内联样式和内联样式表转换为独立的CSS文件。这样可以将样式代码从HTML文件中分离出来，使项目结构更清晰，样式更易于管理和维护。可以通过解析HTML文件中的内联样式和内联样式表，提取其中的样式规则，并将它们保存为独立的CSS文件。这样，就可以在项目中直接引入这些独立的CSS文件，而不是在HTML文件中直接定义样式，从而提高项目的可维护性和可扩展性。可以使用VS Code的插件开发平台来实现上述步骤。

[0065] 步骤S103，将所述多个前端工程样式文件中各前端工程样式文件解析成对应的抽象语法树，遍历所述抽象语法树，得到所述各前端工程样式文件对应的兼容性数据。

[0066] 在查找到多个前端工程样式文件之后，可以对各前端工程样式文件进行解析，得到各前端工程样式文件对应的抽象语法树。再遍历各前端工程样式文件对应的抽象语法树，得到各前端工程样式文件对应的兼容性数据。兼容性数据可以包括各CSS属性的兼容性数据，例如可以兼容的浏览器以及对应的浏览器版本。

[0067] 在本说明书一些实施例中，将所述多个前端工程样式文件中各前端工程样式文件解析成对应的抽象语法树，包括：读取所述CSS文件、所述内联样式文件和 / 或所述内联样式表的文件内容，得到CSS文本；解析所述CSS文本，得到对应的抽象语法树。

[0068] 具体的，在查找到CSS文件、所述内联样式文件和 / 或所述内联样式表之后，可以读取文件内容，得到CSS文本。之后，可以解析CSS文本，得到对应的抽象语法树。可以利用css-tree库中的函数将CSS文本内容解析成抽象语法树。css-tree库用于解析、遍历、修改和生成CSS代码。之后，可以遍历抽象语法树，得到对应的兼容性数据。通过上述方式，可以方便快捷地得到兼容性数据。

[0069] 在本说明书一些实施例中，遍历所述抽象语法树，得到所述各前端工程样式文件对应的兼容性数据，包括：遍历所述抽象语法树中的节点；判断遍历到的节点是否为规则节点；对于规则节点，提取属性名和属性值，得到对应的兼容性数据。

[0070] 具体的，可以使用csstree.walk遍历抽象语法树。当遇到规则节点时，可以提取规则内容。对于每个规则内的声明，分别提取属性名和属性值。抽象语法树是源代码的一种抽象表示形式，将源代码的结构和语法以树状结构的方式呈现出来。在这个树中，每个节点都代表源代码中的一个构造，如变量声明、函数调用、条件语句等。抽象语法树使得开发者能够更方便地理解和操作源代码，如进行代码分析、代码优化、代码转换(如编译、转译)等任务。通过遍历和修改抽象语法树，开发者可以实现对源代码的精确控制和改造。

[0071] 步骤S104，基于所述兼容属性配置数据与所述兼容性数据，生成前端工程兼容性检测报告。

[0072] 在得到前端工程样式文件的兼容性数据之后，可以基于所述兼容属性配置数据与所述兼容性数据，生成前端工程兼容性检测报告。具体的，可以将所述兼容属性配置数据与所述兼容性数据进行比较。例如，可以将各属性所兼容的浏览器版本与兼容属性配置数据中对应的浏览器版本进行比较，若属性所兼容的浏览器版本高于或等于兼容属性配置数据中的浏览器版本，则该属性能够兼容。前端工程兼容性检测报告中可以包括各样式属性的兼容性。

[0073] 上述实施例中的方法，可以根据开发者对浏览器兼容性要求，自动反馈工程中存在的不兼容的样式，不需要手动查询，效率高；查询全面，不会遗漏；方便跟踪和记录兼容性问题；便于开发者根据汇总的浏览器兼容性问题进行优化前端工程，提升项目运行兼容性。

[0074] 在本说明书一些实施例中，所述方法由VS Code插件实现。本实施例中，通过VSCode插件实现前端工程样式文件兼容性检测方法，通过将方法封装在插件中，便于兼容性检测的实施。

[0075] 在本说明书一些实施例中，所述VS Code插件通过以下方式实现：初始化插件项目，以设置插件项目信息；安装插件依赖以支持编写插件；定义插件贡献点，以在执行特定命令时激活插件；实现插件逻辑，所述插件逻辑用于实现所述前端工程样式文件兼容性检测方法；打包和发布所述插件。

[0076] 具体的，本专利通过实现一个VS Code插件实现本实施例中的方法。可以先初始化插件项目，设置项目的名称、描述和发布者等信息。安装插件依赖。安装必要的开发依赖项，如TypeScript 和@types / vscode以支持使用TypeScript中编写插件。还可以定义插件贡献点。在Visual Studio Code(VS Code)的插件开发中，"贡献点"是指插件通过其package.json文件中的特定配置部分，向编辑器提供的扩展或自定义功能。在package.json 中的contributes字段中声明当开发者执行特定命令时激活插件。之后，实现插件逻辑，以实现所述前端工程样式文件兼容性检测方法，之后可以打包和发布所述插件。通过VS Code插件，可以根据开发者对浏览器兼容性要求，自动反馈工程中存在的不兼容的样式，快速自动反馈工程中存在的不兼容的样式。

[0077] 本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。具体的可以参照前述相关处理相关实施例的描述，在此不做一一赘述。

[0078] 上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

[0079] 下面结合一个具体实施例对上述方法进行说明，然而，值得注意的是，该具体实施例仅是为了更好地说明本说明书，并不构成对本说明书的不当限定。

[0080] 本具体实施例提供了一种前端工程样式文件兼容性检测方法。前端工程中的样式兼容性是指确保在不同的浏览器、不同的操作系统、不同的设备以及不同的屏幕尺寸上，网页的样式表现都能保持一致性和可预期性。由于不同的浏览器和设备对CSS的解析和渲染可能存在差异，因此前端开发者需要采取一系列措施来确保样式的兼容性。本实施例中的方法可以快速反馈样式在浏览器的兼容性。

[0081] 浏览器兼容性是指不同浏览器对CSS的解析和渲染可能存在差异。例如，某些CSS属性可能在某些浏览器中不被支持，或者某些CSS选择器的行为在不同浏览器中可能不同。本实施例中通过实现一个VS Code插件，来进行前端样式文件兼容性的检测。根据开发者对浏览器兼容性要求，自动反馈工程中存在的不兼容的样式，快速自动反馈工程中存在的不兼容的样式。开发者不需要手动查询浏览器兼容性，浏览器兼容性信息查询效率高；查询全面，不会遗漏；方便跟踪和记录兼容性问题，开发者根据汇总的浏览器兼容性问题进行优化前端工程，提升项目运行兼容性。

[0082] 本具体实施例中通过实现一个VS Code插件实现前端工程样式文件兼容性检测方法。图2示出了本实施例中的VS Code插件的实现流程图。如图2所示，VS Code插件实现流程包括以下内容。初始化插件项目，设置项目的名称、描述和发布者等信息。安装插件依赖，安装必要的开发依赖项，如TypeScript和@types / vscode以支持使用TypeScript中编写插件。定义插件贡献点(contributes point)。在Visual Studio Code(VS Code)的插件开发中，"贡献点"(contributes points)是指插件通过其package.json文件中的特定配置部分，向编辑器提供的扩展或自定义功能。在package.json中的contributes字段中声明当开发者执行特定命令时激活插件。实现插件逻辑。打包和发布插件。

[0083] 本实施例的核心为实现插件逻辑，可以完成快速打开三方库源工程和三方库官网内容。插件核心逻辑包括以下内容。

[0084] 注册1个快捷键。例如，开发者在Mac电脑下按Cmd+Shift+c或Windows电脑下按Ctrl+Shift+c查询前端工程样式文件浏览器兼容性。

[0085] 图3示出了本实施例中的前端工程样式文件浏览器兼容性检测方法的实现逻辑的示意图。如图3所示，前端工程样式文件浏览器兼容性检测方法的实现逻辑可以包括：(1)选择待检测浏览器兼容性的前端工程文件目录。(2)获取开发者对浏览器的配置。(3)解析CSS文件并获取兼容性信息。(4)解析内联样式和内联样式表并获取兼容性信息。(5)输出兼容性信息。

[0086] 在前端工程中，如使用Vue、React等框架时，样式文件(如CSS、SCSS、LESS、Stylus等)可以存在于多个位置，样式文件具体取决于项目的结构、使用的构建工具和团队的开发习惯。以下是一些常见的样式文件存放位置：

[0087] (1)全局样式文件：

[0088] 通常会放在项目的根目录或src目录下的assets、styles或css文件夹中。这些文件通常包含整个项目都会用到的全局样式，如重置样式、字体样式、基础颜色等。

[0089] 在Vue CLI创建的项目中，全局样式文件通常放在src / assets / styles或src / styles目录下，并通过main.js或main.ts文件全局引入。

[0090] 在React项目中，全局样式文件可能会放在src / styles或src / assets / css目录下，并通过Webpack或其他构建工具进行全局引入。

[0091] (2)组件内部样式：

[0092] 在Vue或React组件内部，可以直接使用内联样式(通过组件的style属性)。

[0093] 更常见的是，将组件的样式写在与组件相同的文件夹下的.css、.scss、.less等文件中，并通过组件的import语句引入。例如，在Vue中，你可能会有一个名为MyComponent.vue的组件文件和一个同名的MyComponent.scss样式文件。

[0094] 在某些项目中，特别是使用CSS Modules或类似技术的项目中，组件的样式文件可能会以.module.css、.module.scss等形式命名，以便进行样式隔离。

[0095] (3)第三方库和框架的样式：

[0096] 如果你在项目中使用了第三方库或框架(如UI组件库、图标库等)，它们的样式文件通常会放在node_modules目录下的相应库中。这些样式文件通常不需要你直接操作，只需要确保在项目中正确引入和使用这些库即可。

[0097] (4)公共样式库：

[0098] 在大型项目中，可能会有一个或多个公共样式库，包含项目中多个页面或组件都会用到的样式。这些样式库通常会放在项目的某个公共目录下(如src / styles / common)，并通过Webpack或其他构建工具进行全局引入。

[0099] (5)动态生成的样式：

[0100] 在某些情况下，你可能会根据项目的状态或用户的交互动态生成样式。这些样式可能会作为字符串存储在JavaScript变量中，并通过DOM操作或CSSOM API动态添加到页面中。虽然这种做法不太常见，但在某些复杂的动画或交互效果中可能会用到。

[0101] (6)其他位置：

[0102] 除了上述常见的位置外，样式文件还可能根据项目的具体需求和团队的开发习惯存放在其他位置。例如，在使用CSS-in-JS技术的项目中，样式可能会直接作为JavaScript对象或函数返回的结果存储在JavaScript文件中。

[0103] 正如上面描述，前端工程的样式文件存在多个地方，并且可能存在中间态(如less、scss等预处理样式文件)，但是前端工程都会有一个过程，就是构建。构建，就是将前端工程源代码(如HTML、CSS、JavaScript等)以及相关的资源文件(如图片、字体等)转化为可在浏览器中运行的应用或网页的过程。这个过程通常包括代码的编译、打包、优化等步骤。前端源代码工程的所有样式文件都会构建到最终的构建目录中，在目录中存在三种形式，即最终样式存在css文件、内联样式和内联样式表。

[0104] 在前端工程构建的过程中，输出目录是构建完成后存放生成文件的目录。这个目录通常包含了经过编译、打包、优化等步骤处理后的前端资源，如压缩后的JavaScript文件、CSS文件、图片等。

[0105] 根据常见的构建工具和框架，前端工程构建输出目录的详细说明：

[0106] (1)默认输出目录：

[0107] 对于很多构建工具，如Webpack、Vue CLI、Create React App等，默认的输出目录通常是dist或build。

[0108] 例如，在Vue CLI创建的项目中，默认的输出目录是dist。

[0109] 在使用Create React App创建的React项目中，构建后的输出目录是build。

[0110] (2)可配置输出目录：

[0111] 在使用构建工具时，通常可以通过配置文件(如webpack.config.js、vue.config.js等)来指定输出目录。

[0112] 例如，在Webpack中，可以通过output.path字段来配置输出目录的路径。

[0113] 在Vue CLI项目中，可以在vue.config.js文件中通过outputDir选项来指定输出目录的名称。

[0114] 默认的输出目录名称通常是dist或build，但具体取决于使用的构建工具和框架，所以本专利第一步提示用户选择前端工程的构建目录。

[0115] 提供开发者选择构建目录的流程为：

[0116] (1)获取vscode当前工作区的根文件夹路径，即前端工程目录。

[0117] (2)过滤出第一级子文件夹，构建目录存在前端工程的第一级子文件夹。

[0118] (3)展示快速选择菜单让开发者选择文件夹。

[0119] (4)记录开发者选择的构建目录。

[0120] 关于获取开发者对浏览器的配置，前端工程运行的常见浏览器有：GoogleChrome、Mozilla Firefox–Firefox、Apple Safari–Safari、Microsoft Edge、InternetExplorer(IE)等。虽然IE的市场份额已大幅下降，且微软已停止对大多数版本的支持，但在一些特定场景(如企业内部应用)中，仍需考虑IE11的兼容性。通常，开发者不再为IE的旧版本(如IE8、IE9、IE10)提供支持。

[0121] 本实施例中提供的常用浏览器，开发者可以选择前端工程运行的浏览器的最低版本。本实施例中的vscode插件在package.json文件的contributes部分，添加configuration字段来定义浏览器的配置选项。

[0122] 解析CSS文件并获取兼容性信息。

[0123] 解析CSS文件的主要流程包括以下步骤。查找CSS文件：使用glob("** / *.css")来匹配目录(选择待检测浏览器兼容性的前端工程文件目录)及所有子目录下的.css文件路径。glob库是一个流行的npm包，它允许你使用模式匹配来查找文件系统中的文件。读取文件内容：对于每一个匹配到的文件路径，使用fs.readFile异步读取文件内容。解析CSS：利用csstree.parse(data)将CSS文本内容解析成AST(抽象语法树)。css-tree库是一个用于解析、遍历、修改和生成CSS代码的工具库。在前端开发中，需要处理CSS代码，比如读取、分析或修改CSS样式规则。而css-tree库就是为了帮助更方便地处理这些任务而诞生的。遍历AST：使用csstree.walk遍历AST。当遇到规则节点时，使用csstree.isRule(node)判断，然后提取规则内容。对于每个规则内的声明(csstree.isDeclaration(decl))，分别提取属性名和属性值。AST(抽象语法树)是源代码的一种抽象表示形式，它将源代码的结构和语法以树状结构的方式呈现出来。在这个树中，每个节点都代表源代码中的一个构造，如变量声明、函数调用、条件语句等。AST使得开发者能够更方便地理解和操作源代码，如进行代码分析、代码优化、代码转换(如编译、转译)等任务。通过遍历和修改AST，开发者可以实现对源代码的精确控制和改造。如下图所示(https: / / astexplorer.net / )，css-tree将css文件解析为了AST。使用@mdn / browser-compat-data包中提供的能力，封装API，来检查css兼容性(包括属性和属性值)，如检测aspect-ratio属性的兼容性，会获得如下返回结果：表示aspect-ratio在chrome浏览器88以及以上版本支持，在ie浏览器不支持。

[0124] 可以比较开发者配置的浏览器版本是否比属性(或者值)浏览器支持版本大。如若开发者配置chrome最低版本是87，说明开发者认为前端工程需要运行在87版本以及以上的chrome浏览器上，此时aspect-ratio兼容性不支持，程序记录下来aspect-ratio属性以及aspect-ratio属性支持的浏览器信息。

[0125] 对于解析内联样式和内联样式表并获取兼容性信息，与CSS文件的解析类似，区别是获取内联样式和内联样式表，获取内联样式和内联样式表以后后续流程一样。

[0126] 获取内联样式的流程为：(1)使用document.querySelectorAll('*')选取页面上的所有DOM元素，返回一个NodeList对象，包含了文档中所有的元素节点。(2)遍历元素：通过forEach方法遍历这个NodeList集合中的每一个元素。(3)检查style属性：对于每个元素，检查该元素是否有内联样式设置。cssText属性包含了元素style属性中的CSS样式文本。后续通过css-tree解析CSS样式文本和获取兼容性。

[0127] 获取内联样式表的流程为：(1)获取所有<style>标签：使用document.getElementsByTagName('style')方法查找文档中所有的<style>标签。这会返回一个HTMLCollection对象，包含所有匹配的<style>元素。(2)遍历<style>标签。(3)提取样式内容：对于每个<style>元素，使用textContent属性(优先)或innerText属性(如果textContent不存在或为空)来获取标签内的文本内容。这将包含样式规则，如选择器、属性和值等。后续通过css-tree解析CSS样式文本和获取兼容性。将不兼容的css属性输出到本地文件。

[0128] 插件的核心逻辑已开发好，将插件发布到插件市场，开发者搜索和安装此插件就可以使用此插件完成快速打开三方库官网和三方库的工程。

[0129] 上述实施例中，可以自动检测前端工程中的使用的所有样式，根据开发者对浏览器兼容性要求，自动反馈工程中存在的不兼容的样式。不需要手动查询，效率高；查询全面，不会遗漏；方便跟踪和记录兼容性问题；开发者根据汇总的浏览器兼容性问题进行优化前端工程，提升项目运行兼容性。

[0130] 基于同一发明构思，本说明书实施例中还提供了一种前端工程样式文件兼容性检测装置，如下面的实施例所述。由于前端工程样式文件兼容性检测装置解决问题的原理与前端工程样式文件兼容性检测方法相似，因此前端工程样式文件兼容性检测装置的实施可以参见前端工程样式文件兼容性检测方法的实施，重复之处不再赘述。以下所使用的，术语"单元”或者"模块”可以实现预定功能的软件和 / 或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。图4是本说明书实施例的前端工程样式文件兼容性检测装置的一种结构框图，如图4所示，包括：获取模块401、查找模块402、解析模块403和生成模块404，下面对该结构进行说明。

[0131] 获取模块401用于获取待检测的前端工程文件目录；还用于提取浏览器的兼容属性配置数据。

[0132] 查找模块402用于查找所述前端工程文件目录中的多个前端工程样式文件；所述前端工程样式文件包括多个样式规则，所述样式规则用于定义网页元素的视觉表现。

[0133] 解析模块403用于将所述多个前端工程样式文件中各前端工程样式文件解析成对应的抽象语法树，遍历所述抽象语法树，得到所述各前端工程样式文件对应的兼容性数据。

[0134] 生成模块404用于基于所述兼容属性配置数据与所述兼容性数据，生成前端工程兼容性检测报告。

[0135] 其中，所述多个前端工程样式文件包括以下至少之一：CSS文件、内联样式文件和内联样式表；相应的，所述查找模块具体用于：采用模式匹配方式匹配所述前端工程文件目录中的CSS文件的文件路径，并读取所述CSS文件；选取所述前端工程文件目录中的DOM元素节点，得到节点列表对象；所述节点列表对象中包含页面上的多个DOM元素节点；遍历所述节点列表对象中的各DOM元素；确定所述各DOM元素是否有内联样式设置，得到内联样式文件；和 / 或，查找所述前端工程文件目录中的多个样式标签，遍历所述多个样式标签并提取样式内容，得到内联样式表。

[0136] 在本说明书一些实施例中，所述多个前端工程样式文件包括以下至少之一：CSS文件、内联样式文件和内联样式表；相应的，所述解析模块具体用于：读取所述CSS文件、所述内联样式文件和 / 或所述内联样式表的文件内容，得到CSS文本；解析所述CSS文本，得到对应的抽象语法树。

[0137] 在本说明书一些实施例中，遍历所述抽象语法树，得到所述各前端工程样式文件对应的兼容性数据，可以包括：遍历所述抽象语法树中的节点；判断遍历到的节点是否为规则节点；对于规则节点，提取属性名和属性值，得到对应的兼容性数据。

[0138] 在本说明书一些实施例中，所述方法由VS Code插件实现。

[0139] 在本说明书一些实施例中，所述VS Code插件通过以下方式实现：初始化插件项目，以设置插件项目信息；安装插件依赖以支持编写插件；定义插件贡献点，以在执行特定命令时激活插件；实现插件逻辑，所述插件逻辑用于实现所述前端工程样式文件兼容性检测方法；打包和发布所述插件。

[0140] 本说明书实施方式还提供了一种计算机设备，具体可以参阅图5所示的基于本说明书实施例提供的前端工程样式文件兼容性检测方法的计算机设备组成结构示意图，所述计算机设备具体可以包括输入设备51、处理器52、存储器53。其中，所述存储器53用于存储处理器可执行指令。所述处理器52执行所述指令时实现上述任意实施例中所述的前端工程样式文件兼容性检测方法的步骤。

[0141] 在本实施方式中，所述输入设备具体可以是用户和计算机系统之间进行信息交换的主要装置之一。所述输入设备可以包括键盘、鼠标、摄像头、扫描仪、光笔、手写输入板、语音输入装置等；输入设备用于把原始数据和处理这些数的程序输入到计算机中。所述输入设备还可以获取接收其他模块、单元、设备传输过来的数据。所述处理器可以按任何适当的方式实现。例如，处理器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程逻辑控制器和嵌入微控制器的形式等等。所述存储器具体可以是现代信息技术中用于保存信息的记忆设备。所述存储器可以包括多个层次，在数字系统中，只要能保存二进制数据的都可以是存储器；在集成电路中，一个没有实物形式的具有存储功能的电路也叫存储器，如RAM、FIFO等；在系统中，具有实物形式的存储设备也叫存储器，如内存条、TF卡等。

[0142] 在本实施方式中，该计算机设备具体实现的功能和效果，可以与其它实施方式对照解释，在此不再赘述。

[0143] 本说明书实施方式中还提供了一种基于前端工程样式文件兼容性检测方法的计算机存储介质，所述计算机存储介质存储有计算机程序指令，在所述计算机程序指令被处理器执行时实现上述任意实施例中所述前端工程样式文件兼容性检测方法的步骤。

[0144] 在本实施方式中，上述存储介质包括但不限于随机存取存储器(Random AccessMemory,RAM)、只读存储器(Read-Only Memory,ROM)、缓存(Cache)、硬盘(Hard DiskDrive,HDD)或者存储卡(Memory Card)。所述存储器可以用于存储计算机程序指令。网络通信单元可以是依照通信协议规定的标准设置的，用于进行网络连接通信的接口。

[0145] 在本实施方式中，该计算机存储介质存储的程序指令具体实现的功能和效果，可以与其它实施方式对照解释，在此不再赘述。

[0146] 本说明书实施例还提供一种计算机程序产品，包括计算机程序 / 指令，所述计算机程序 / 指令被处理器执行时实现上述任意实施例中所述的前端工程样式文件兼容性检测方法的步骤。

[0147] 显然，本领域的技术人员应该明白，上述的本说明书实施例的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本说明书实施例不限制于任何特定的硬件和软件结合。

[0148] 应该理解，以上描述是为了进行图示说明而不是为了进行限制。通过阅读上述描述，在所提供的示例之外的许多实施方式和许多应用对本领域技术人员来说都将是显而易见的。因此，本说明书的范围不应该参照上述描述来确定，而是应该参照前述权利要求以及这些权利要求所拥有的等价物的全部范围来确定。

[0149] 以上所述仅为本说明书的优选实施例而已，并不用于限制本说明书，对于本领域的技术人员来说，本说明书实施例可以有各种更改和变化。凡在本说明书的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本说明书的保护范围之内。< / style>

Claims

1. A front-end engineering style file compatibility detection method, characterized in that: include: Get the front-end engineering file directory to be tested; Extract browser compatible attribute configuration data; Searching for a plurality of front-end engineering style files in the front-end engineering file directory; the front-end engineering style files include a plurality of style rules, and the style rules are used to define the visual performance of web page elements; Parsing each of the plurality of front-end engineering style files into a corresponding abstract syntax tree, traversing the abstract syntax tree, and obtaining compatibility data corresponding to each of the front-end engineering style files; Based on the compatible attribute configuration data and the compatibility data, generating a front-end engineering compatibility detection report; The plurality of front-end engineering style files include at least one of the following: a CSS file, an inline style file, and an inline style sheet; Accordingly, multiple front-end engineering style files in the front-end engineering file directory are searched, including: Match the file path of the CSS file in the front-end engineering file directory using a pattern matching method, and read the CSS file; Selecting a DOM element node in the front-end project file directory to obtain a node list object; the node list object includes multiple DOM element nodes on the page; traversing each DOM element in the node list object; determining whether each DOM element has an inline style setting, and obtaining an inline style file; and / or, Search for multiple style tags in the front-end engineering file directory, traverse the multiple style tags and extract style content to obtain an inline style sheet.

2. The front-end engineering style file compatibility detection method according to claim 1 is characterized in that: Get the front-end project file directory to be tested, including: Obtain a front-end project directory; extract a construction directory of the front-end project from the front-end project directory and display it to the user; the construction directory is a directory output after the front-end project is built; In response to the user's selection operation, the construction directory selected by the user is used as the front-end project file directory.

3. The front-end engineering style file compatibility detection method according to claim 1 is characterized in that: Parsing each of the plurality of front-end engineering style files into a corresponding abstract syntax tree includes: Read the file content of the CSS file, the inline style file and / or the inline style sheet to obtain the CSS text; The CSS text is parsed to obtain a corresponding abstract syntax tree.

4. The front-end engineering style file compatibility detection method according to claim 1, characterized in that: Traversing the abstract syntax tree to obtain compatibility data corresponding to each front-end engineering style file, including: Traversing the nodes in the abstract syntax tree; Determine whether the traversed node is a regular node; For rule nodes, extract attribute names and attribute values ​​to obtain corresponding compatibility data.

5. The front-end engineering style file compatibility detection method according to claim 1 is characterized in that: The method is implemented by a VS Code plugin.

6. The front-end engineering style file compatibility detection method according to claim 5 is characterized in that: The VSCode plugin is implemented in the following ways: Initialize the plug-in project to set the plug-in project information; Install plugin dependencies to support writing plugins; Define plugin contribution points to activate plugins when executing specific commands; Implementing plug-in logic, wherein the plug-in logic is used to implement the front-end engineering style file compatibility detection method; Package and publish said plugin.

7. A front-end engineering style file compatibility detection device, characterized in that: include: The acquisition module is used to obtain the front-end engineering file directory to be detected; It is also used to extract browser compatibility attribute configuration data; A search module, used to search for a plurality of front-end engineering style files in the front-end engineering file directory; the front-end engineering style files include a plurality of style rules, and the style rules are used to define the visual expression of web page elements; A parsing module, used for parsing each front-end engineering style file among the plurality of front-end engineering style files into a corresponding abstract syntax tree, traversing the abstract syntax tree, and obtaining compatibility data corresponding to each front-end engineering style file; A generating module, used for generating a front-end engineering compatibility detection report based on the compatible attribute configuration data and the compatibility data; Among them, the multiple front-end engineering style files include at least one of the following: CSS files, inline style files and inline style sheets; the search module is specifically used to: match the file path of the CSS file in the front-end engineering file directory using a pattern matching method, and read the CSS file; select the DOM element node in the front-end engineering file directory to obtain a node list object; the node list object contains multiple DOM element nodes on the page; traverse each DOM element in the node list object; determine whether each DOM element has an inline style setting to obtain an inline style file; and / or search for multiple style tags in the front-end engineering file directory, traverse the multiple style tags and extract style content to obtain an inline style sheet.

8. A computer device, characterized in that: The method comprises a processor and a memory for storing processor-executable instructions, wherein the processor implements the steps of the method according to any one of claims 1 to 6 when executing the instructions.

9. A computer-readable storage medium having computer instructions stored thereon, characterized in that: When the instructions are executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.

10. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instructions are executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.

Images