前端依赖治理：代码分析工具开发实战

这门课解决什么问题

做业务开发久了，谁都会遇到这种场景：老项目里堆满历史包袱，想重构却不敢动；不同业务线各自封装 API，导致重复调用、错误调用防不胜防；微前端架构下，子应用之间的依赖关系像一团乱麻，根本没法靠肉眼 Code Review 搞清楚。这门课不教怎么写页面，而是解决“代码已经写出来了、甚至已经堆成山了，怎么用工程化手段去管它”的问题。它的核心是带你开发一个针对 TypeScript 和 Vue 的静态分析工具，把人工排查依赖、拦截脏调用的活儿，变成 CI 流水线里的自动化环节。比起单纯教你怎么配 ESLint，它更注重底层原理和工具自研，适合需要给团队做基建、想沉淀工程化能力的同学。

适合什么基础与建议学习顺序

课程需要你写过一段时间的 TypeScript，对编译和构建有基本概念，但不要求你懂编译原理。资料的组织是按实现顺序走的，建议你先看开篇和基础知识这两块，把 AST 抽象语法树到底怎么遍历、怎么从一段 TS 代码里提取节点搞明白，这是后续所有分析的地基。接着直接跳到“架构设计与分析范式”以及“扫描与解析 TS 文件”部分，跟着把扫描器跑通。等理解了整体骨架，再去看 Import 节点分析、API 用法判定这些具体实现。最后再看微前端全应用分析和 CI 自动化拦截，这两块是落地场景，能帮你对齐实际工作中的痛点。

学完能独立做什么与资料怎么配合

学完后，你能独立写出一个可发布到 NPM 的代码分析工具，并且支持自定义插件机制。这意味着以后团队要查“哪些代码偷偷用了某全局变量”“哪些子应用违规引入了特定库”，你不用去写一堆正则去硬匹配，而是能基于 AST 写出精准的规则插件。看资料时，强烈建议开两个窗口：一边看实现思路，一边把配套的源码拉到本地跑。看到分析 Import 节点和提取 Vue 文件中 TS 代码的部分，自己改改规则，试着去解析你手头业务项目里的一个真实页面。不要只停留在看懂概念，必须自己写一个针对特定 API 调用的分析插件跑通一遍，这套静态分析的通用能力才算真正长进你的工程化肌肉记忆里。