企业官网建设流程全解析

react-scanner 编程式 API 指南：将组件使用分析无缝集成到构建流程

【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scanner

react-scanner 是一款面向 React 项目的组件使用分析工具，能静态扫描 JS/TS 代码并提取所有被渲染的组件及其 props 使用情况。本指南将带你掌握它的编程式 API，让你用最少的代码，把组件使用分析无缝集成到构建流程、CI 流水线与内部监控系统中，从"手动跑命令"升级为"全自动出报告"。

为什么要用编程式 API？先理解 CLI 与 API 的分工

大多数教程只教你用命令行：

npx react-scanner -c /path/to/react-scanner.config.js

CLI 方式适合一次性查看结果，但它在终端里"打印完就结束"，结果很难被其他程序消费。而编程式 API的核心优势在于：run函数返回一个 Promise，你能拿到完整的结果对象，想怎么处理就怎么处理——写文件、发请求、存入数据库都行。

最快上手方式：三行代码完成组件使用分析

安装依赖后，在任意 Node.js 脚本中引入即可：

import scanner from "react-scanner"; const output = await scanner.run(config); console.log(output);

入口函数定义在 src/scanner.js 中，它会先校验配置（src/utils.js 中的validateConfig），再调用 src/run.js 执行扫描、运行处理器并返回最后一个处理器的结果。整个过程完全异步，天然适合放在构建脚本里。

核心配置项详解：一次配置，处处复用

编程式 API 的参数就是一个普通的配置对象，主要选项如下：

• crawlFrom：扫描起点目录，必填。
• rootDir：项目根目录，用于解析输出路径。
• importedFrom：只统计从指定模块导入的组件，例如设计系统包名。
• components：只报告你关心的组件白名单。
• includeSubComponents：是否统计Footer.Content这类子组件。
• globs：自定义扫描文件范围，默认排除*.test、*.spec文件。
• processors：结果处理器，默认是["count-components-and-props"]。

三种内置处理器：按需挑选你的报告格式

内置处理器定义在 src/processors/ 目录下，用字符串引用即可：

• count-components：输出最简单的组件使用次数，例如{"Text": 10, "Button": 5}。
• count-components-and-props（默认）：在次数基础上，再统计每个 props 的使用频率，最适合评估设计系统组件的 API 使用分布。
• raw-report：输出最原始的完整报告，包含每个组件实例的 props、位置、import 信息等，适合做深度分析。

自定义处理器：把分析结果写进你的业务系统

内置处理器不够用时，可以直接传一个函数作为处理器，它还支持异步：

processors: [ "count-components-and-props", async ({ prevResult }) => { await fetch("https://your-api.example.com/report", { method: "POST", body: JSON.stringify(prevResult), }); }, ];

处理器回调会收到report、prevResult、forEachComponent、sortObjectKeysByValue、output等工具。其中output(data, destination)可以把结果输出到控制台、文件或直接返回，三个处理器实现（count-components.js、count-components-and-props.js、raw-report.js）就是最好的学习范例。

无缝集成构建流程的两种实战模式

模式一：写入 npm scripts，生成静态报告文件

在package.json中新建脚本，配合outputTo选项把报告落地成 JSON，团队成员无需安装任何额外工具就能查看：

// 配置片段 processors: [["count-components-and-props", { outputTo: "./reports/usage.json" }]]

模式二：接入 CI，让组件使用分析成为质量门禁

把编程式 API 写成独立脚本，在 CI 的构建阶段运行。当某个组件的使用次数骤降、或某个 props 出现频率异常时，脚本可以直接让流水线失败，及时提醒团队关注组件 API 的废弃风险。

常见问题：配置校验与结果输出

• 配置写错了怎么办？配置校验失败时，scanner.run会向控制台输出错误列表并退出，错误信息非常明确，照着修即可。
• 结果去哪了？output的默认目标是：CLI 模式输出到控制台，编程式模式则作为 Promise 的返回值——这正是编程式 API 便于集成的原因。
• 想控制 prop 值的展示方式？通过getPropValue配置项可以自定义非字面量 props 的取值逻辑，参考扫描器实现 src/scan.js 中getInstanceInfo的调用方式。

掌握 react-scanner 的编程式 API 后，组件使用分析就不再是一次性的手工命令，而是一条持续运转的数据管道。从今天起，让每一次构建都自动生成组件使用报告吧 🚀

【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scanner