拓冰网站定制 
react-scanner 原理揭秘AST 解析与 JSX 组件扫描是如何工作的【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scanner如果你想快速摸清一个 React 项目里组件到底被用了多少次、每个 prop 的使用频率如何react-scanner 是一个非常趁手的静态分析工具。它并不运行你的代码而是从源码层面解析出组件与 props 的使用情况输出一份结构化的 JSON 报告。这篇文章将带你深入它的内部实现一步步拆解AST 解析与JSX 组件扫描的完整工作流程让即使是新手也能看懂这套扫描魔法背后的原理。先认识 react-scanner静态分析的思路react-scanner 的核心能力是Extract React components and props usage from code从代码中提取 React 组件和 props 的使用情况它天然支持 TypeScript。整个过程不依赖浏览器、不执行 JSX而是通过**抽象语法树AST**来读代码。它的工作可以概括为三步流水线步骤做什么对应源码① 爬取文件按 glob 规则找出所有待扫描的源文件src/run.js② 解析扫描把代码解析成 AST识别组件与 propssrc/scan.js③ 处理报告用处理器把原始报告加工成统计结果src/processors/整个入口很简单无论是命令行还是编程式调用最终都会走进 src/scanner.js 的run方法先做配置校验再触发扫描流程。第一步如何精准爬取目标文件扫描开始前react-scanner 要先确定扫哪些文件。在 src/run.js 中它借助fdir这个高性能目录爬取库配合 glob 规则过滤出目标文件const files new fdir() .glob(...globs) .exclude(getExcludeFn(config.exclude)) .withFullPaths() .crawl(crawlFrom) .sync();默认的 glob 是**/!(*.test|*.spec).(js|ts)?(x)也就是自动跳过测试文件只扫描.js、.jsx、.ts、.tsx。exclude配置则可以在 src/utils.js 的getExcludeFn中看到既支持字符串/正则数组也支持自定义函数灵活排除node_modules之类的目录。第二步AST 解析让机器看懂代码这是最核心的一环。机器没法直接理解字符串形式的 JSX所以需要先把它解析成抽象语法树。react-scanner 选择的解析器是typescript-eslint/typescript-estree——它能把 TypeScript 和 JSX 代码都转换成标准的 ESTree 节点树。在 src/scan.js 中可以看到解析选项const parseOptions { loc: true, // 记录每个节点的行列位置 jsx: true, // 开启 JSX 语法支持 };loc: true非常重要它让报告能够精确到某个组件出现在哪个文件的第几行第几列这为后续的代码审计提供了精确坐标。第三步JSX 组件扫描遍历 AST 找答案解析出 AST 之后react-scanner 使用astray这个轻量遍历库只对两类节点感兴趣ImportDeclaration记录 import 信息来源模块、本地别名JSXOpeningElement发现组件被使用的位置这部分逻辑在 src/scan.js 中。每当遇到一个 JSX 开始标签getComponentNameFromASTsrc/scan.js就会解析出它的完整名称JSXIdentifier普通名称如ButtonJSXMemberExpression成员表达式如Footer.Content.Legal会递归拼接成带点的完整路径同时importsMapsrc/scan.js维护着本地名 → 导入来源的映射。这样即使你写了import { Link as BasisLink } from basis扫描器也能准确还原出它实际指向的组件名而不是被别名迷惑。属性提取JSXAttribute 与展开属性组件实例上的 props 是怎么被记录的看 src/scan.js 的getInstanceInfo它会遍历node.attributesJSXAttribute普通属性比如Text margin4属性名和值都会被提取JSXSpreadAttribute{...props}形式的展开属性无法静态确定具体键值所以标记propsSpread: true每个使用实例最终会记录下导入信息、props 键值对、是否展开、以及文件位置。深入 getPropValue字面量与表达式一个有趣的细节是 prop 值如何被翻译成报告内容这由getPropValuesrc/scan.js完成AST 节点类型报告中的值Literal字符串/数字/布尔字面量本身如4JSXExpressionContainer内的字面量表达式的实际值其他表达式变量、函数等AST 类型名如(Identifier)所以静态分析有其天然边界传的是变量时它只能告诉你这里传了一个 Identifier 类型的表达式。不过你可以通过配置getPropValue自定义处理把表达式还原成真实代码比如在 README.md 中就有用escodegen生成表达式源码的例子。报告结构一棵嵌套的组件树扫描完成后所有实例会聚合进一个嵌套的 report 对象数据结构大致如下组件名 └── instances[] 每次使用实例 ├── importInfo 导入来源信息 ├── props prop 名 → 值 ├── propsSpread 是否使用了展开 └── location 文件与行列位置子组件如Footer.Content会嵌套在父组件之下而forEachComponentsrc/utils.js提供了递归遍历这棵树的辅助方法方便处理器逐层访问。处理器把原始报告变成有用统计原始报告是过程数据直接看比较繁琐所以 react-scanner 内置了三个处理器src/processors/processors.jsoncount-components统计每个组件被使用的次数输出{ Text: 17 }见 count-components.jscount-components-and-props默认统计组件实例数 各 prop 的使用频次见 count-components-and-props.jsraw-report原样输出原始 JSON 报告见 raw-report.js处理器还可以自由组合、串联执行支持异步函数例如先把统计结果算出来再通过自定义处理器把数据发给你的监控系统这正是设计系统团队做组件健康度评估的常用玩法。写在最后静态扫描的适用场景理解了 AST 解析与 JSX 组件扫描的原理你就能明白 react-scanner 的价值所在✅ 统计设计系统组件的使用热度决定哪些组件值得继续维护✅ 追踪某个 prop 的取值分布为废弃旧用法提供数据支撑✅ 在大型代码库中快速盘点组件引用关系无需手动搜索由于是纯静态分析它不会执行你的业务代码速度快且无副作用而 AST 方案又比正则匹配更可靠能正确处理别名、展开属性、嵌套子组件等复杂情况。如果你正在为组件库的家底发愁不妨 clone 下来动手跑一跑亲眼看看这份报告是如何一步步生成的。【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scanner创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 react-scanner 原理揭秘：AST 解析与 JSX 组件扫描是如何工作的
react-scanner 原理揭秘AST 解析与 JSX 组件扫描是如何工作的【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scanner如果你想快速摸清一个 React 项目里组件到底被用了多少次、每个 prop 的使用频率如何react-scanner 是一个非常趁手的静态分析工具。它并不运行你的代码而是从源码层面解析出组件与 props 的使用情况输出一份结构化的 JSON 报告。这篇文章将带你深入它的内部实现一步步拆解AST 解析与JSX 组件扫描的完整工作流程让即使是新手也能看懂这套扫描魔法背后的原理。先认识 react-scanner静态分析的思路react-scanner 的核心能力是Extract React components and props usage from code从代码中提取 React 组件和 props 的使用情况它天然支持 TypeScript。整个过程不依赖浏览器、不执行 JSX而是通过**抽象语法树AST**来读代码。它的工作可以概括为三步流水线步骤做什么对应源码① 爬取文件按 glob 规则找出所有待扫描的源文件src/run.js② 解析扫描把代码解析成 AST识别组件与 propssrc/scan.js③ 处理报告用处理器把原始报告加工成统计结果src/processors/整个入口很简单无论是命令行还是编程式调用最终都会走进 src/scanner.js 的run方法先做配置校验再触发扫描流程。第一步如何精准爬取目标文件扫描开始前react-scanner 要先确定扫哪些文件。在 src/run.js 中它借助fdir这个高性能目录爬取库配合 glob 规则过滤出目标文件const files new fdir() .glob(...globs) .exclude(getExcludeFn(config.exclude)) .withFullPaths() .crawl(crawlFrom) .sync();默认的 glob 是**/!(*.test|*.spec).(js|ts)?(x)也就是自动跳过测试文件只扫描.js、.jsx、.ts、.tsx。exclude配置则可以在 src/utils.js 的getExcludeFn中看到既支持字符串/正则数组也支持自定义函数灵活排除node_modules之类的目录。第二步AST 解析让机器看懂代码这是最核心的一环。机器没法直接理解字符串形式的 JSX所以需要先把它解析成抽象语法树。react-scanner 选择的解析器是typescript-eslint/typescript-estree——它能把 TypeScript 和 JSX 代码都转换成标准的 ESTree 节点树。在 src/scan.js 中可以看到解析选项const parseOptions { loc: true, // 记录每个节点的行列位置 jsx: true, // 开启 JSX 语法支持 };loc: true非常重要它让报告能够精确到某个组件出现在哪个文件的第几行第几列这为后续的代码审计提供了精确坐标。第三步JSX 组件扫描遍历 AST 找答案解析出 AST 之后react-scanner 使用astray这个轻量遍历库只对两类节点感兴趣ImportDeclaration记录 import 信息来源模块、本地别名JSXOpeningElement发现组件被使用的位置这部分逻辑在 src/scan.js 中。每当遇到一个 JSX 开始标签getComponentNameFromASTsrc/scan.js就会解析出它的完整名称JSXIdentifier普通名称如ButtonJSXMemberExpression成员表达式如Footer.Content.Legal会递归拼接成带点的完整路径同时importsMapsrc/scan.js维护着本地名 → 导入来源的映射。这样即使你写了import { Link as BasisLink } from basis扫描器也能准确还原出它实际指向的组件名而不是被别名迷惑。属性提取JSXAttribute 与展开属性组件实例上的 props 是怎么被记录的看 src/scan.js 的getInstanceInfo它会遍历node.attributesJSXAttribute普通属性比如Text margin4属性名和值都会被提取JSXSpreadAttribute{...props}形式的展开属性无法静态确定具体键值所以标记propsSpread: true每个使用实例最终会记录下导入信息、props 键值对、是否展开、以及文件位置。深入 getPropValue字面量与表达式一个有趣的细节是 prop 值如何被翻译成报告内容这由getPropValuesrc/scan.js完成AST 节点类型报告中的值Literal字符串/数字/布尔字面量本身如4JSXExpressionContainer内的字面量表达式的实际值其他表达式变量、函数等AST 类型名如(Identifier)所以静态分析有其天然边界传的是变量时它只能告诉你这里传了一个 Identifier 类型的表达式。不过你可以通过配置getPropValue自定义处理把表达式还原成真实代码比如在 README.md 中就有用escodegen生成表达式源码的例子。报告结构一棵嵌套的组件树扫描完成后所有实例会聚合进一个嵌套的 report 对象数据结构大致如下组件名 └── instances[] 每次使用实例 ├── importInfo 导入来源信息 ├── props prop 名 → 值 ├── propsSpread 是否使用了展开 └── location 文件与行列位置子组件如Footer.Content会嵌套在父组件之下而forEachComponentsrc/utils.js提供了递归遍历这棵树的辅助方法方便处理器逐层访问。处理器把原始报告变成有用统计原始报告是过程数据直接看比较繁琐所以 react-scanner 内置了三个处理器src/processors/processors.jsoncount-components统计每个组件被使用的次数输出{ Text: 17 }见 count-components.jscount-components-and-props默认统计组件实例数 各 prop 的使用频次见 count-components-and-props.jsraw-report原样输出原始 JSON 报告见 raw-report.js处理器还可以自由组合、串联执行支持异步函数例如先把统计结果算出来再通过自定义处理器把数据发给你的监控系统这正是设计系统团队做组件健康度评估的常用玩法。写在最后静态扫描的适用场景理解了 AST 解析与 JSX 组件扫描的原理你就能明白 react-scanner 的价值所在✅ 统计设计系统组件的使用热度决定哪些组件值得继续维护✅ 追踪某个 prop 的取值分布为废弃旧用法提供数据支撑✅ 在大型代码库中快速盘点组件引用关系无需手动搜索由于是纯静态分析它不会执行你的业务代码速度快且无副作用而 AST 方案又比正则匹配更可靠能正确处理别名、展开属性、嵌套子组件等复杂情况。如果你正在为组件库的家底发愁不妨 clone 下来动手跑一跑亲眼看看这份报告是如何一步步生成的。【免费下载链接】react-scannerExtract React components and props usage from code.项目地址: https://gitcode.com/gh_mirrors/re/react-scanner创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考