不能用Babel、TypeScript Compiler或Clang插件处理HTML的AST重构——因这些工具不解析HTML，遇<即报SyntaxError；HTML无编译器前端与插件机制，正确路径是用parse5或cheerio等专用解析器进行节点操作。
不能用 Babel、TypeScript Compiler 或 Clang 插件处理 HTML 的 AST 重构——这些工具根本不会解析 <div>，遇到第一个尖括号就报 SyntaxError: Unexpected token <。
为什么 HTML 不能塞进编译器插件里跑 AST
Clang 只认 .c/.cpp，Babel 默认拒收 .html 文件，TS 的 transformer 也只吃 .ts/.js。HTML 是标记语言，没有变量作用域、没有执行上下文、没有 IR 中间表示，更没有插件加载机制。所谓“HTML 编译器插件”，本质是混淆了构建时处理和编译时处理的边界。
- 强行注册 Babel parser 处理 HTML，返回的 AST 不是 Babel 的
File类型，后续traverse会直接崩在path.node is undefined -
clang::Rewriter只能插入 C++ token，无法保证生成合法 HTML 缩进或属性顺序 - 正则替换
<button class="btn">这类结构极易漏掉换行、空格、引号转义或注释干扰
该用什么工具做 HTML AST 重构
真正可行路径是：用专用 HTML 解析器 + 显式节点操作。选型取决于场景复杂度：
- 轻量批量改属性、增删 class、移动节点 → 用
parse5或cheerio（Node 环境友好，API 直观） - 需识别 Vue 指令（如
v-if）、Angular 模板语法 → 必须用@vue/compiler-dom或@angular/compiler提供的框架专属 AST - 混着 JSX 或 SFC（单文件组件）→ 先剥离模板部分，再交给对应解析器，不能一股脑喂给
@babel/parser
示例：用 parse5 安全替换所有 <button> 为 <div role="button">：
立即学习“前端免费学习笔记（深入）”；
const parse5 = require('parse5');
const { treeAdapter } = parse5;
function transformButton(node) {
if (node.tagName === 'button') {
return treeAdapter.createElement('div', [
...node.attrs,
{ key: 'role', value: 'button' }
], node.childNodes);
}
return node;
}
重构时最容易被忽略的三个细节
HTML AST 操作的坑不在遍历逻辑，而在边界判定和序列化一致性：
-
attrs在parse5中是数组而非对象，直接赋值会丢属性；必须重建整个{ key, value }数组 - 修改
class属性不能覆盖原值，要合并：原"a b"+ 新增c→"a b c"，建议用classList工具或安全正则提取 - 自闭合标签（
<img>、<input>）必须显式设isSelfClosing: true，否则序列化成<img></img>
历史遗留 HTML 往往嵌套深、格式乱、注释多，重构脚本跑完后务必验证输出是否仍能被浏览器正确解析，而不是只看 diff 是否干净。
