react-scanner 快速上手：5 分钟完成首次 React 组件使用率统计

react-scanner 快速上手5 分钟完成首次 React 组件使用率统计【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scannerreact-scanner 是一款专注于 React 组件使用率统计的开源静态分析工具。它能够自动爬取你的项目目录、扫描每一个源码文件提取所有被渲染的 React 组件及其 props 使用情况最终生成结构清晰的 JSON 报告。无论你是设计系统维护者还是想清理冗余组件的前端开发者本文都能带你用 5 分钟完成 react-scanner 的安装、配置与首次运行让组件使用率统计从此不再靠人肉数代码。为什么需要统计 React 组件使用率在真实项目中哪些组件最常用往往是拍脑袋猜的。有了客观数据你能指导设计系统演进使用率最高的组件值得优先打磨 API 与文档。发现僵尸组件长期无人使用的组件可以纳入废弃计划。辅助 props 决策例如某个取值只出现 1 次就可以考虑移除它减小组件体积。react-scanner 解决的正是这类问题——它用静态分析替代人工统计全程不运行你的应用安全又快速。react-scanner 是什么核心功能一览react-scanner 的扫描原理可以概括为三步爬取目录遍历指定目录收集待扫描的源码文件列表。扫描文件解析每个文件的 JSX / TSX 语法原生支持 TypeScript。生成报告把每个组件实例及其 props 汇总成 JSON。整个工作流由 src/scanner.js 驱动爬取与解析逻辑、报告生成器都沉淀在src/目录下代码量不大适合想深入研究的开发者。第一步react-scanner 安装步骤一条命令搞定确保你的 Node.js 版本不低于 14然后在项目根目录执行npm install --save-dev react-scanner安装完成后无需任何额外配置即可使用。如果你想阅读源码或参与贡献也可以直接克隆仓库git clone https://gitcode.com/gh_mirrors/re/react-scanner第二步编写 react-scanner 配置文件react-scanner 的所有行为都由一个配置文件控制。在项目根目录新建react-scanner.config.js写入下面的最小配置module.exports { crawlFrom: ./src, // 从 src 目录开始爬取 importedFrom: basis, // 只统计从 basis 导入的组件 processors: [count-components-and-props], };三个关键选项的含义配置项作用crawlFrom扫描的起始目录绝对路径或相对路径均可importedFrom只报告从指定模块导入的组件省略则统计全部组件processors告诉工具如何处理原始报告默认就是count-components-and-props项目中test/configs/目录下有多个现成示例配置如singleProcessor.config.js安装后可以直接对照参考。第三步运行 react-scanner 并查看统计结果保存配置文件后执行npx react-scanner -c ./react-scanner.config.js几秒钟后控制台就会输出类似下面的统计报告{ Text: { instances: 17, props: { margin: 6, color: 4 } }, Button: { instances: 10, props: { width: 10, variant: 5 } } }这意味着Text组件被使用了 17 次其中marginprop 出现了 6 次。数据已经能直接支撑你的组件治理决策了。读懂统计报告组件实例数与 props 使用率count-components-and-props是默认处理器它的输出以组件名为 key包含两部分信息instances该组件在项目中被渲染的总次数。props每个 prop 被使用的次数按出现频率从高到低排序。如果你只想知道谁最常用可以改用更轻量的count-components处理器输出会简化为一行一个数字的映射表{ Text: 17, Button: 10, Link: 3 }两种处理器的实现都在src/processors/目录下count-components.js与count-components-and-props.js想定制统计逻辑可以直接参考。3 个内置处理器按需挑选你的报告形态处理器输出内容适合场景count-components每个组件的使用次数快速盘点组件热度count-components-and-props默认次数 各 props 使用次数常规统计需求raw-report最原始的完整报告含位置、导入信息需要逐实例分析时处理器还可以通过outputTo选项把结果写入文件便于归档与对比processors: [ [count-components, { outputTo: ./reports/components.json }], ]进阶技巧4 个让统计更精准的配置项exclude排除不需要扫描的目录例如[node_modules]可传字符串或正则。globs只扫描匹配模式的文件默认已自动跳过*.test.js、*.spec.tsx这类测试文件。includeSubComponents设为true时Footer.Content这类子组件也会被单独统计。编程式调用不满足于命令行可以直接在代码里调用import scanner from react-scanner; const output await scanner.run(config);小结从安装到拿到第一份 React 组件使用率统计报告全程只需 5 分钟一条命令安装、一个配置文件、一行命令运行。react-scanner 的静态分析方式安全无副作用JSON 报告既直观又易于二次加工无论是组件治理、props 设计还是代码清理它都是值得放进工具箱的利器。现在就动手跑一次扫描看看你的项目里哪些组件才是真正的主角吧【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scanner创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考