不能用babel、typescript compiler或clang插件处理html的ast重构——因这些工具不解析html，遇
不能用 Babel、TypeScript Compiler 或 Clang 插件处理 HTML 的 AST 重构——这些工具根本不会解析 <div>，遇到第一个尖括号就报 <code>SyntaxError: Unexpected token 。
<h3>为什么 HTML 不能塞进编译器插件里跑 AST</h3>
<p>Clang 只认 <code>.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"></button>这类结构极易漏掉换行、空格、引号转义或注释干扰
该用什么工具做 HTML AST 重构
真正可行路径是：用专用 HTML 解析器 + 显式节点操作。选型取决于场景复杂度：
- 轻量批量改属性、增删 class、移动节点 → 用
parse5或cheerio（Node 环境友好，API 直观） - 需识别 Vue 指令（如
v-if）、Angular 模板语法 → 必须用@vue/compiler-dom或@angular/compiler提供的框架专属 AST - 混着 JSX 或 SFC（单文件组件）→ 先剥离模板部分，再交给对应解析器，不能一股脑喂给
@babel/parser
示例：用 parse5 安全替换所有 <button></button> 为 <div role="button">：
<pre class="brush:php;toolbar:false;">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;
}</pre>
<h3>重构时最容易被忽略的三个细节</h3>
<p>HTML AST 操作的坑不在遍历逻辑，而在边界判定和序列化一致性：</p>
<ul>
<li>
<code>attrs 在 parse5 中是数组而非对象，直接赋值会丢属性；必须重建整个 { key, value } 数组
class 属性不能覆盖原值，要合并：原 "a b" + 新增 c → "a b c"，建议用 classList 工具或安全正则提取<img>、<input>）必须显式设 isSelfClosing: true，否则序列化成 <img>
历史遗留 HTML 往往嵌套深、格式乱、注释多，重构脚本跑完后务必验证输出是否仍能被浏览器正确解析，而不是只看 diff 是否干净。
