因为Babel和TypeScript编译器均不原生支持HTML文件解析：@babel/parser默认只识别JS/TS语法，遇到HTML标签会抛出SyntaxError；tsc --noEmit虽跳过输出但仍需合法TS语法，纯HTML非TS代码直接报错。
为什么不能用 Babel 或 TypeScript 编译器处理 HTML 组件
直接把 HTML 模板丢给 @babel/parser 或 tsc --noEmit 会立刻报错：SyntaxError: Unexpected token 。这不是配置问题，而是设计边界——Babel 只认 JS/TS/JSX，TS 编译器只处理类型和语法转换，两者根本不解析 HTML 标签。强行塞入会导致 AST 构建失败，后续所有重构逻辑都无从谈起。
常见错误包括：在 Vite 插件里调用 transformSync() 处理 .vue 或 .html 文件却没注册 HTML parser；或误以为 typescript-eslint 能校验模板中的 class 名拼写。这些场景下，工具链根本没走到 AST 阶段，就已在输入层被拒绝。
该用哪个 HTML AST 解析器：parse5 vs. htmlparser2 vs. @vue/compiler-dom
选错解析器会导致节点不可写、属性丢失或序列化崩坏：
-
parse5：浏览器/Node 兼容性好，AST 结构稳定，attrs是{ key: string, value: string | null }[]数组，适合批量重写 class、data-* 属性；但遍历时需手动过滤node.nodeType === ELEMENT_NODE，否则对文本节点调用getAttribute会报错 -
htmlparser2：快，但不校验嵌套合法性（比如<p></p> <div></div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5117" title="HTML Extract"><img src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5117" title="HTML Extract">HTML Extract</a> <p>使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p> </div> <a href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>不报错），attrs是扁平对象，容易覆盖已有属性；不适合做语义化替换 -
@vue/compiler-dom：如果你重构的是 Vue SFC 中的<template>，它暴露的 AST 包含指令（v-if、v-for）、作用域信息和绑定表达式节点，能安全重写:class绑定而非硬编码 class 字符串
不要混用：用 parse5 解析 Vue 模板却不剥离 v- 指令，会导致指令被当作文本节点忽略；用 @vue/compiler-dom 处理纯 HTML，则无法识别自闭合标签（如 <img>）的 isSelfClosing 标志，生成时可能补出 </img>。
重构复杂交互组件的关键节点操作模式
复杂组件往往含动态 class、条件渲染、事件绑定和 slot 分发，仅靠字符串替换必然出错。必须基于 AST 做结构感知操作：
- 替换
<button>为<div role="button">时，要保留原有onclick、disabled、class等所有属性，并显式设置tabIndex="0"；不能只改 tag 名 - 升级
class="menu-item active"到 BEM：class="menu__item menu__item--active"，需用classList工具函数提取原值再合并，避免覆盖或重复 - 将内联
style提取为 CSS 类时，必须检查是否含 JS 动态拼接（如style="width: ${w}px"），这类不能硬提，应标记为人工审查项 - 处理
<slot>或<ng-content>时，不能移动其父容器，否则破坏插槽分发逻辑；需检查parentNode是否为具有slot属性的元素
为什么 HTML AST 重构比 JS 更容易“修坏”
JS 重构失败通常表现为语法错误或运行时报错，而 HTML 重构失败是静默的：标签闭合错位、属性值被截断、自闭合标签多出闭合符、空格与换行丢失导致 CSS 选择器失效——这些都不会让构建失败，但会让页面布局或交互当场崩溃。
真正难的不是遍历节点，而是边界判定：<input type="text"> 和 <input type="text"></input> 在浏览器中表现一致，但后者是非法 HTML；<p>hello<br>world</p> 中 <br> 是自闭合，但若你把它当普通元素加子节点，序列化后就会变成 <br></br>。这些细节没有统一标准，全靠所选解析器的实现约定，稍有不慎，生成的 HTML 就不再合法。
