简介
Sonar-CLI 是一个由 @arso-project 开发的命令行工具，用于分析前端项目的性能并提供优化建议。这个 npm 包允许开发者通过配置文件来运行 Sonar-CLI，并将分析结果输出到控制台、文件或第三方平台。
安装
在终端中输入以下命令来安装 @arso-project/sonar-cli：
--- ------- ----------------------- ----------
使用
在项目的根目录下，创建一个名为 sonarcli.config.json 的配置文件，例如：
-
------- ------------------------
--------- ----------
---------- --------- ------------------------- ------------
---------- -
-------------------- -
-------- ---
------------------------- -----
----------- ----
--
----------------------- ----
-
-以上配置文件将对 https://example.com 进行分析，输出分析结果到控制台，并且只分析指定的性能指标（分数，首次内容呈现时间和 DOM 大小）。此外，还可以配置性能预算和禁用无障碍性分析。
在终端中输入以下命令来运行 Sonar-CLI：
--- -----
这将自动读取 sonarcli.config.json 文件并执行分析，并将分析报告输出到控制台，示例输出如下：
----- ------ --- -------------------- ------ ------ ----- ---------- ------ ----- -- --- ----- -- -- ----- ---- ------ --- --- ------- ------------- ---------
集成
除了控制台输出外，Sonar-CLI 还可以将分析报告输出到文件或某些第三方平台，如 GitHub Actions 或 Slack。以下是一些常见的集成配置示例：
输出到文件
将 output 配置为文件路径即可将分析报告输出到文件中：
- ------- ------------------------ --------- --------------------- ---------- --------- ------------------------- ----------- -
GitHub Actions 集成
在配置文件中设置 output 和 reportId 选项来在 GitHub Actions 中输出分析报告。首先，使用 Sonar-CLI 生成一个 JSON 格式的报告：
- ----- ----------- -------- ---- --- ----- -------- -----------------
接下来，使用 GitHub 提供的 Actions 可以将分析报告注入到特定的 Pull Request 中。在你的 GitHub Actions 的工作流程中，添加以下步骤：
- ----- ------ ---- ------
----- --------------------------
-----
----- ------------
----- -----------------
- ----- ------- -- --
----- ----------------------
-----
---- -
-- ----- ------
---- -- --- ----- ------ --- ---- -------
---
- --- -----------------
- ----- ---- -------- ------------------- -------- -------------------
---Slack 集成
要将分析报告输出到 Slack，请使用 @slack/bolt 包。首先，在 Slack 上创建一个新的机器人，然后将以下代码添加到你的项目中：
----- - --- - - -----------------------
----- - -------------- - - -----------------------------------
----- --- - --- -----
------ ----------------------------
-------------- --------------------------------
---
--------------------- ----- -- -------- ---- --- -- -- -
----- ------
----- - ----- -------- ------- - - -----------------------------------------
----- ------ - ----------------------------------- -------- ---------
-----
----- ------------------
------- --------------- -- -- ----- ---------- ----- - ----- --------- ---- - ---
---
---
-------------------------- - ----- -------- -------- -- -
----- ------ - ------- ------ --- ----------
--- ------ ------ -- -------- -
-- ----------------------------------- -
-- ---------------------------------- - ---------------- -
-------------- ---------- ------------------ -------- ----------------------------------------
- ---- -
-------------- ---------- ------------------ -------- ----------------------------------------
-
- ---- -
----------------------- ---------------------
-
-
-- ------------------------------ -
------------------ ---- ------ --- --- ------- ------------- ------------
-
------ -------
--接下来，将以下代码添加到你的 sonarcli.config.json 文件中：
-
------- ------------------------
--------- -------
---------- --------- -------------- -----------------------
---------- -
-------------------- -
-------- ---
-------------- -----
---------------------- ---
-
-
-现在，当在 Slack 中使用 /sonar 命令时，就可以获取到一个类似以下的分析报告：
----- ------ --- -------------------- - ------ ------ -------- --- - ------------ ----- -- -------- ------ - -------------------- --- -- -------- ----
结论
Sonar-CLI 是一个非常实用的前端性能分析工具，并且可以在控制台、文件或第三方平台上输出分析报告。可以使用 @arso-project/sonar-cli npm 包轻松配置和使用 Sonar-CLI，来提高前端项目的性能优化。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/arso-project-sonar-cli