不能用Babel或TypeScript插件处理HTML AST，因其仅支持JS/TS语法，遇<div>会抛SyntaxError；HTML需专用解析器如parse5或cheerio，它们轻量、双端兼容、API直观，适合批量重构class、移动节点等操作。
为什么不能用 Babel 或 TypeScript 插件处理 HTML AST
因为 Babel 的 transformSync() 默认拒绝 .html 文件，即使强行注册 parser，返回的 AST 也不是 Babel 的 File 类型——后续调用 traverse() 会直接报错 path.node is undefined。TypeScript transformer 同理，只接收 .ts/.js 输入，不解析标签结构；Clang 更是完全不碰 HTML。HTML 是标记语言，没有变量作用域、TDZ、闭包这些概念，path.scope.hasBinding() 这类 API 在 HTML 上毫无意义。
该用哪个 HTML 解析器做自动化重构
选 parse5 或 cheerio：轻量、Node/浏览器双兼容、API 直观，适合批量改 class、移动节点、重写 data-* 属性。避免手写正则——<div class="foo"> 和 <div\n class="foo"> 结构等价，但正则极易漏匹配换行或空格。若需处理框架模板（如 Vue 指令、Angular 绑定），必须用 @vue/compiler-dom 或 @angular/compiler 提供的 AST，它们才暴露语义化节点类型（如 DirectiveNode、TextCall），支持安全替换绑定表达式。
重构时最容易被忽略的 HTML 边界问题
HTML 重构真正的复杂点不在遍历 AST，而在边界判定：
- 自闭合标签是否加斜杠（
<img />vs<img>）——不同渲染引擎容忍度不同，生产环境建议统一不加 -
<p>标签隐式闭合行为：修改子节点时若删掉最后一个文本节点，可能意外触发浏览器自动补全</p>，导致 DOM 结构偏移 - 属性顺序和引号风格：单引号/双引号混用、
class与id顺序颠倒，虽不影响运行，但会破坏 diff 可读性，CI 中建议用htmlnano统一标准化
如何把 AI 识别出的技术债落地为 HTML 重构动作
AI 工具（如 CodeGuru、Copilot Enterprise）能标出“重复模板片段”“冗余 class”“未使用的 data 属性”，但不会生成可执行代码。你需要把它转成具体操作：
立即学习“前端免费学习笔记（深入）”；
- 对“重复模板片段”，用
cheerio提取所有匹配script[type="text/template"]节点，计算 MD5 比较内容相似度，合并后注入公共 partial - 对“冗余 class”，遍历所有
[class]元素，用className.split(/\s+/)拆解，查 CSS 文件确认哪些 class 实际未定义，再用el.removeClass()移除 - 对“未使用的
data-属性”，需先静态分析 JS 侧是否引用了对应dataset键，不能仅靠 HTML 扫描——否则会误删服务端渲染依赖的字段
最后一步常被跳过：改完 HTML 必须跑一次 Puppeteer 端到端快照对比，验证 DOM 结构、事件绑定、CSS 选择器匹配结果是否一致。否则看似安全的重构，可能让某个隐藏的 document.querySelector('[data-track="submit"]') 失效。
