react-scanner 内置处理器详解count-components 与 count-components-and-props 使用教程【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scanner在开发 React 设计系统或大型组件库时你是否常常想知道某个组件到底被用了多少次哪些 props 最受欢迎哪些 props 可能已经没人用了这就是 react-scanner 内置处理器的用武之地。react-scanner 会静态分析你的 React 代码支持 TypeScript自动提取组件与 props 的使用情况而内置处理器则负责把扫描结果加工成你真正关心的统计报告。本教程将带你从零掌握 count-components 与 count-components-and-props 两个最常用的内置处理器。为什么需要内置处理器react-scanner 的工作流程分为两步扫描阶段遍历目录、解析每个文件生成一份包含每个组件实例、props、位置的原始 JSON 报告。处理阶段把原始报告交给处理器输出对你有用的统计结果。也就是说处理器决定了你最终看到什么。好消息是react-scanner 内置了 3 个开箱即用的处理器全部定义在 src/processors/ 目录下处理器名称作用输出类型count-components统计每个组件的使用次数简单的键值对count-components-and-props统计组件次数 每个 prop 的使用次数嵌套对象raw-report输出原始 JSON 报告完整原始数据其中count-components-and-props还是默认处理器不配置 processors 时就会使用它。count-components 处理器使用教程快速统计组件使用次数如果你只想知道哪些组件被用了多少次count-components 是最佳选择。它遍历原始报告中的每一个组件实例把统计结果整理成一份简单的键值对对象。典型输出示例{ Text: 10, Button: 5, Link: 3 }一眼就能看出Text 被用了 10 次、Button 用了 5 次、Link 用了 3 次。这种输出特别适合 评估设计系统各组件的受欢迎程度 找出几乎没人用的僵尸组件考虑是否废弃 追踪组件使用量的长期变化趋势配置方法在配置文件如react-scanner.config.js中把处理器名称作为字符串写进processors数组即可module.exports { crawlFrom: ./src, processors: [count-components], };count-components-and-props 处理器使用教程组件 Props 双重统计如果你还想知道每个组件里哪些 props 用得最多就要用到 count-components-and-props。它在统计组件实例数的同时还会逐个统计每个 prop 出现的次数是分析 props 使用习惯的神器。典型输出示例{ Text: { instances: 17, props: { margin: 6, color: 4, textStyle: 1 } }, Button: { instances: 10, props: { width: 10, variant: 4, type: 2 } }, Footer: { instances: 1, props: {} } }每个组件下都有两个关键字段instances组件被使用的总次数props各 prop 的使用次数按使用频率降序排列方便你一眼锁定高频 props它的实用场景包括 分析某个组件 prop 的使用分布例如发现某个 prop 从没人传过值 为废弃某个 prop 值提供数据依据 了解设计系统 API 的真实使用情况指导后续版本迭代配置方法同样简单默认配置下无需任何改动即可生效module.exports { crawlFrom: ./src, processors: [count-components-and-props], };最快配置方法一条命令 一个配置文件安装 react-scanner首先安装工具npm install --save-dev react-scanner运行扫描然后通过命令行指定配置文件运行npx react-scanner -c /path/to/react-scanner.config.js处理器配置的三种写法内置处理器的配置支持三种形式形式一字符串最常用processors: [count-components]形式二元组携带选项如指定输出文件processors: [ [count-components, { outputTo: /path/to/my-report.json }], ]形式三多个处理器组合processors: [count-components, count-components-and-props]完整的配置校验逻辑可以在 src/utils.js 中查看官方测试配置示例见 singleProcessor.config.js 和 multipleProcessors.config.js。把统计结果输出到文件outputTo 选项详解默认情况下处理器会把结果打印到控制台。如果你想把报告保存成 JSON 文件只需使用元组形式通过outputTo指定输出路径module.exports { crawlFrom: ./src, processors: [ [count-components-and-props, { outputTo: ./reports/usage.json }], ], };路径可以是绝对路径也可以相对于根目录。这样你就可以把报告纳入版本管理或交给其他工具做进一步分析 。count-components 与 count-components-and-props一图看懂区别对比维度count-componentscount-components-and-props组件使用次数✅ 统计✅ 统计props 使用次数❌ 不统计✅ 统计输出结构扁平键值对嵌套对象适合场景快速了解组件热度深入分析 props 使用习惯代码位置count-components.jscount-components-and-props.js简单来说只看组件热度用 count-components想连 props 一起分析就用 count-components-and-props。你也可以在 processors 数组里同时配置两者结果互不干扰。动手试一试完整示例演示假设你的项目里有这样的代码参考官方测试用例 test/code/index.jsimport React from react; import { BasisProvider, defaultTheme } from basis; import Home from ./Home; function App() { return ( BasisProvider theme{defaultTheme} Home / /BasisProvider ); }运行默认的 count-components-and-props 处理器后你会得到类似这样的统计结果{ BasisProvider: { instances: 1, props: { theme: 1 } }, Home: { instances: 1, props: {} } }进阶提示处理器也支持自定义扩展 内置处理器满足 80% 的需求剩下 20% 的场景你可以编写自定义处理器。处理器本质就是一个函数还支持异步会接收到report、prevResult、output等工具函数。比如你可以把 count-components-and-props 的统计结果自动推送到自己的存储系统processors: [ count-components-and-props, ({ prevResult }) { return axios.post(/my/storage/solution, prevResult); }, ],如果你想深入了解处理器的底层实现可以直接阅读 count-components.js 和 count-components-and-props.js 的源码代码非常简洁全部加起来不过几十行。其中用到的forEachComponent递归遍历报告和sortObjectKeysByValue按值排序两个辅助函数定义在 src/utils.js 中。总结react-scanner 内置处理器让React 组件使用情况统计变得极其简单count-components轻量统计组件使用次数适合快速摸底count-components-and-props组件 props 双重统计适合深入分析通过processors数组一行代码即可启用配合outputTo还能自动保存报告无论你是想优化设计系统 API、清理废弃组件还是追踪组件使用趋势这两个内置处理器都能帮你把枯燥的代码分析变成清晰的统计数据。现在就动手试试让 react-scanner 内置处理器成为你的 React 项目健康检查利器吧【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scanner创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
react-scanner 内置处理器详解：count-components 与 count-components-and-props 使用教程
react-scanner 内置处理器详解count-components 与 count-components-and-props 使用教程【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scanner在开发 React 设计系统或大型组件库时你是否常常想知道某个组件到底被用了多少次哪些 props 最受欢迎哪些 props 可能已经没人用了这就是 react-scanner 内置处理器的用武之地。react-scanner 会静态分析你的 React 代码支持 TypeScript自动提取组件与 props 的使用情况而内置处理器则负责把扫描结果加工成你真正关心的统计报告。本教程将带你从零掌握 count-components 与 count-components-and-props 两个最常用的内置处理器。为什么需要内置处理器react-scanner 的工作流程分为两步扫描阶段遍历目录、解析每个文件生成一份包含每个组件实例、props、位置的原始 JSON 报告。处理阶段把原始报告交给处理器输出对你有用的统计结果。也就是说处理器决定了你最终看到什么。好消息是react-scanner 内置了 3 个开箱即用的处理器全部定义在 src/processors/ 目录下处理器名称作用输出类型count-components统计每个组件的使用次数简单的键值对count-components-and-props统计组件次数 每个 prop 的使用次数嵌套对象raw-report输出原始 JSON 报告完整原始数据其中count-components-and-props还是默认处理器不配置 processors 时就会使用它。count-components 处理器使用教程快速统计组件使用次数如果你只想知道哪些组件被用了多少次count-components 是最佳选择。它遍历原始报告中的每一个组件实例把统计结果整理成一份简单的键值对对象。典型输出示例{ Text: 10, Button: 5, Link: 3 }一眼就能看出Text 被用了 10 次、Button 用了 5 次、Link 用了 3 次。这种输出特别适合 评估设计系统各组件的受欢迎程度 找出几乎没人用的僵尸组件考虑是否废弃 追踪组件使用量的长期变化趋势配置方法在配置文件如react-scanner.config.js中把处理器名称作为字符串写进processors数组即可module.exports { crawlFrom: ./src, processors: [count-components], };count-components-and-props 处理器使用教程组件 Props 双重统计如果你还想知道每个组件里哪些 props 用得最多就要用到 count-components-and-props。它在统计组件实例数的同时还会逐个统计每个 prop 出现的次数是分析 props 使用习惯的神器。典型输出示例{ Text: { instances: 17, props: { margin: 6, color: 4, textStyle: 1 } }, Button: { instances: 10, props: { width: 10, variant: 4, type: 2 } }, Footer: { instances: 1, props: {} } }每个组件下都有两个关键字段instances组件被使用的总次数props各 prop 的使用次数按使用频率降序排列方便你一眼锁定高频 props它的实用场景包括 分析某个组件 prop 的使用分布例如发现某个 prop 从没人传过值 为废弃某个 prop 值提供数据依据 了解设计系统 API 的真实使用情况指导后续版本迭代配置方法同样简单默认配置下无需任何改动即可生效module.exports { crawlFrom: ./src, processors: [count-components-and-props], };最快配置方法一条命令 一个配置文件安装 react-scanner首先安装工具npm install --save-dev react-scanner运行扫描然后通过命令行指定配置文件运行npx react-scanner -c /path/to/react-scanner.config.js处理器配置的三种写法内置处理器的配置支持三种形式形式一字符串最常用processors: [count-components]形式二元组携带选项如指定输出文件processors: [ [count-components, { outputTo: /path/to/my-report.json }], ]形式三多个处理器组合processors: [count-components, count-components-and-props]完整的配置校验逻辑可以在 src/utils.js 中查看官方测试配置示例见 singleProcessor.config.js 和 multipleProcessors.config.js。把统计结果输出到文件outputTo 选项详解默认情况下处理器会把结果打印到控制台。如果你想把报告保存成 JSON 文件只需使用元组形式通过outputTo指定输出路径module.exports { crawlFrom: ./src, processors: [ [count-components-and-props, { outputTo: ./reports/usage.json }], ], };路径可以是绝对路径也可以相对于根目录。这样你就可以把报告纳入版本管理或交给其他工具做进一步分析 。count-components 与 count-components-and-props一图看懂区别对比维度count-componentscount-components-and-props组件使用次数✅ 统计✅ 统计props 使用次数❌ 不统计✅ 统计输出结构扁平键值对嵌套对象适合场景快速了解组件热度深入分析 props 使用习惯代码位置count-components.jscount-components-and-props.js简单来说只看组件热度用 count-components想连 props 一起分析就用 count-components-and-props。你也可以在 processors 数组里同时配置两者结果互不干扰。动手试一试完整示例演示假设你的项目里有这样的代码参考官方测试用例 test/code/index.jsimport React from react; import { BasisProvider, defaultTheme } from basis; import Home from ./Home; function App() { return ( BasisProvider theme{defaultTheme} Home / /BasisProvider ); }运行默认的 count-components-and-props 处理器后你会得到类似这样的统计结果{ BasisProvider: { instances: 1, props: { theme: 1 } }, Home: { instances: 1, props: {} } }进阶提示处理器也支持自定义扩展 内置处理器满足 80% 的需求剩下 20% 的场景你可以编写自定义处理器。处理器本质就是一个函数还支持异步会接收到report、prevResult、output等工具函数。比如你可以把 count-components-and-props 的统计结果自动推送到自己的存储系统processors: [ count-components-and-props, ({ prevResult }) { return axios.post(/my/storage/solution, prevResult); }, ],如果你想深入了解处理器的底层实现可以直接阅读 count-components.js 和 count-components-and-props.js 的源码代码非常简洁全部加起来不过几十行。其中用到的forEachComponent递归遍历报告和sortObjectKeysByValue按值排序两个辅助函数定义在 src/utils.js 中。总结react-scanner 内置处理器让React 组件使用情况统计变得极其简单count-components轻量统计组件使用次数适合快速摸底count-components-and-props组件 props 双重统计适合深入分析通过processors数组一行代码即可启用配合outputTo还能自动保存报告无论你是想优化设计系统 API、清理废弃组件还是追踪组件使用趋势这两个内置处理器都能帮你把枯燥的代码分析变成清晰的统计数据。现在就动手试试让 react-scanner 内置处理器成为你的 React 项目健康检查利器吧【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scanner创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
