如何看懂 Fallow 代码分析工具Vue、Svelte、Astro 解析的 extract 层内部机制完整指南【免费下载链接】fallowCodebase intelligence for TypeScript and JavaScript. Free static analysis of code and styles: unused code, duplication, circular deps, complexity hotspots, architecture boundaries, design-system drift. Optional paid runtime layer (Fallow Runtime): hot-path review and cold-path deletion evidence from real production traffic.项目地址: https://gitcode.com/gh_mirrors/fa/fallowFallow 是一款面向 TypeScript 与 JavaScript 代码库的免费静态分析工具能检测未使用代码、重复代码、循环依赖、复杂度热点和架构边界。很多前端工程师都好奇一个以 JS/TS 为核心的分析器凭什么能读懂 Vue 单文件组件、Svelte 组件和 Astro 页面答案就藏在它的 extract 提取层里——本文带你快速看懂 Fallow 是如何把这三类框架文件拆解成可分析的代码事实的。上面这张动图展示了 Fallow 扫描一个真实代码库时的样子几十个文件被逐一解析依赖边、未使用导出等问题被聚合呈现。而这一切的第一步就是 extract 层把每个文件读透。extract 层在 Fallow 架构中的位置可以把 Fallow 的管线想象成一条流水线发现discover扫描仓库找出所有源文件提取extract解析每个文件产出事实imports、exports、成员访问、模板中的用法等图graph把事实连成模块依赖图检测detect在图上运行各种规则报出问题。extract 层位于 crates/extract/是整条流水线的第一道门。它的模块划分在 crates/extract/src/lib.rs 的头部文档里一目了然JS/TS 走 Oxc 解析器Vue/Svelte 走 SFC 提取Astro 走 frontmatter 提取还有 MDX、CSS Module、HTML 资产引用等。官方内部机制参考文档 docs/reference/extract-internals.md 也明确列出了每个子模块的所有权边界非常适合作为阅读源码的地图。Vue 与 Svelte先用外科手术切出 script 和 style.vue和.svelte文件本身并不是合法的 JavaScript直接丢给 JS 解析器会直接报错。Fallow 的做法在 crates/extract/src/sfc.rs 中思路很直白切块用一组精心设计的正则把script、style块连同其属性lang、src、setup、contextmodule、module、generic等完整抠出来。正则特意处理了属性值里包含字符的坑比如 Vue 泛型组件的genericT extends FooBar过滤噪声!-- HTML 注释 --会被整体过滤防止注释里的代码被误当成真实代码区分脚本作用域Vue 的script setup与 Svelte 的模块级script contextmoduleSvelte 4或script moduleSvelte 5在模板里的可见性各不相同Fallow 会为每个脚本块建立独立的事实流再按 SFC 维度合并外部引用也是边script src...、style里的import/use/forward都被记录为依赖边避免把组件旁的样式文件误报为unused-files。切出来的脚本内容随后交给和纯 TS 文件完全相同的 Oxc 解析管线享受同一套 import/export/成员访问提取能力——这就是 Fallow 能把框架组件还原成普通模块图节点的关键一步。模板扫描让 JS 解析器看不见的引用显形只解析script是不够的组件在模板里渲染Header /、在v-for里循环、在on:click里调用函数这些引用都发生在 JS AST 之外。Fallow 在 crates/extract/src/sfc_template/ 下实现了启发式模板扫描器其设计哲学在 crates/extract/src/sfc_template/mod.rs 顶部文档里写得很清楚只可靠地分析常见模板构造不假装是完整的框架编译器。Vue 扫描器crates/extract/src/sfc_template/vue.rs会精确定位template根节点——注意 Vue 根模板里常有嵌套的template #slot非贪婪正则会在此腰斩正文Fallow 通过深度跟踪找到真正的结束位置解析v-for循环把循环变量类型化到迭代源的元素类型上这样{{ item.method() }}能正确归因到类成员连style块也不放过v-bind()会把脚本绑定缝进 CSSFallow 会扫描这些引用避免变量因此被误报未使用检测到v-bind$attrs这类整体透传写法时会主动弃权abstain而非冒险误报。Svelte 扫描器crates/extract/src/sfc_template/svelte.rs则维护一套块状态机覆盖{#if}、{#each}、{#await}、{#snippet}等语法并区分组件事件on:myEvent与 DOM 事件on:click把前者喂给unused-svelte-event检测器。Astrofrontmatter 模板 完整性守卫Astro 文件的结构是三段式---包围的 frontmatterTypeScript、HTML 模板、以及模板里可选的内联script。提取逻辑在 crates/extract/src/astro.rsfrontmatter 提取正则匹配文件开头的---分隔块把里面的 TS 代码交给标准解析管线模板用法收集只有两类位置算真实使用——组件标签根Header、ui.Card和{ ... }表达式区域内的标识符。正文里恰好拼出组件名的普通文字不算使用掩码机制script、style块和 HTML 注释先被计算成掩码区间build_masked_ranges扫描时按区间二分查找跳过——这样 client 脚本的局部变量绝不会污染 frontmatter 的 import 归因define:vars特判该指令把 frontmatter 值传入被掩码的style/script其中的标识符是真实使用会被单独扫描补记。为什么 Fallow 很少误报完整性守卫extract 层文档中最精妙的一条不变量是模板管线必须保证所有提及都已被结构上解释。为此 crates/extract/src/template_expression_scan.rs 实现了record_unexplained_mentions守卫扫描的每个 pass 都要报告自己解释了哪些字节区间凡落在区间之外、又与某个 import 绑定同名的标识符提及比如被拒绝解析的区域、误判的代码块一律记为整体对象使用。这个宁可多记、不可漏记的策略让 Fallow 在面对复杂模板时宁可少报一个未使用项也绝不把正在用的代码标记成死代码——这对一个每天要跑在 CI 里的静态分析工具来说至关重要。新手阅读源码的最佳路线 如果你想亲手验证这些机制建议按这条路线走顺序文件看什么1crates/extract/src/lib.rs模块总览与导出 API2crates/extract/src/sfc.rsVue/Svelte 切块正则与作用域区分3crates/extract/src/sfc_template/mod.rs四个模板扫描器的分派设计4crates/extract/src/astro.rsfrontmatter 提取与掩码构建5crates/extract/src/template_expression_scan.rs完整性守卫实现6docs/reference/extract-internals.md官方不变量清单防回归必读每个机制都配有对应的测试与 fixtures例如 tests/fixtures/unrendered-component/ 覆盖了 Vue 组件未被渲染的 17 个场景tests/fixtures/issue-2227-svelte-snippets/ 则验证了 Svelte 5 片段的边界情况。运行cargo test -p fallow-extract即可回归验证整个提取层。小结Fallow 解析 Vue、Svelte、Astro 的核心思路可以总结为三句话先用正则做外科手术切出脚本块再复用统一的 Oxc 解析管线最后用保守的模板扫描器补齐 AST 看不见的引用并以完整性守卫兜底把误报率压到最低。理解了这个 extract 层你就读懂了 Fallow 静态分析大厦的地基。【免费下载链接】fallowCodebase intelligence for TypeScript and JavaScript. Free static analysis of code and styles: unused code, duplication, circular deps, complexity hotspots, architecture boundaries, design-system drift. Optional paid runtime layer (Fallow Runtime): hot-path review and cold-path deletion evidence from real production traffic.项目地址: https://gitcode.com/gh_mirrors/fa/fallow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考