Babel等编译器插件无法处理HTML文件，因其设计仅支持JS/TS，硬塞HTML会因AST结构不兼容导致path.node undefined等错误；可行方案是用parse5+cheerio批量重构或Prettier浏览器版在线格式化。
不能靠编译器插件处理 HTML AST——Clang、Babel、TS Compiler 都不认 .html 文件，硬塞进去只会报 path.node is undefined 或直接跳过解析。真正能落地的路径只有两条：用专用 HTML 解析器做批量重写，或用 Prettier 浏览器版做在线格式化。
为什么 Babel 插件无法处理 HTML 文件
Babel 的设计边界非常明确：transformSync() 默认拒绝非 JS/TS 文件；即使你手动注册 @prettier/parser-html，它返回的也不是 Babel 能识别的 File 类型 AST，后续 traverse 会因缺少 path.scope 或 path.parentPath 直接崩溃。HTML 没有作用域、没有变量提升、没有 TDZ，Babel 的大部分核心逻辑（比如 scope.hasBinding()）在 HTML 上根本无意义。
常见错误现象包括：
-
Error: path.node is undefined—— 因 parser 返回结构与 Babel 预期不符 - 属性被漏替换（如
<div class="foo"> 中换行导致正则匹配失败）<li>自闭合标签（<code><img>）被错误补全为<img> - 别手写正则去改
class——<div class="a b"> 和 <code><div class="a b"> 结构等价，但正则极易漏掉空格和换行<li>用 <code>cheerio.load(html, { xmlMode: false, recognizeSelfClosing: true })初始化，避免把<input>当成普通标签处理 - 修改后调用
$.html({ decodeEntities: false })输出，防止&被二次转义 - 若需保留原始缩进风格，别依赖 cheerio 自动打印——它只保证语法合法，不维护空格/换行
- 从
https://unpkg.com/prettier@3.3.3/esm/standalone.mjs加载浏览器版 - 显式传入
plugins: [parserHtml]（同样从 unpkg 加载parser-html.mjs） - 配置项走
tabWidth、useTabs、singleAttributePerLine，别试图在 AST 节点上硬编码缩进逻辑 - 关掉编辑器内置的
html.format.enable，它不走 AST，规则不可配且容易和 Prettier 冲突 -
@vue/compiler-dom.parse()返回的 AST 包含type: NodeTypes.ELEMENT、type: NodeTypes.INTERPOLATION等语义节点，能准确区分{{ count }}和纯文本 - 指令参数（如
v-bind:href="url"）会被解析为DirectiveNode，附带exp（表达式 AST）和arg（参数名），方便做表达式重写 - 直接操作这些 AST 节点比正则替换安全得多，但代价是体积大、仅限对应框架模板
用 parse5 + cheerio 做轻量级批量重构
这是 Node 环境下最稳的组合：parse5 提供符合 HTML 标准的解析（支持可选闭合标签、CDATA、注释嵌套），cheerio 提供 jQuery 风格 API，适合做 class 重命名、属性迁移、语义化标签替换等任务。
实操建议：
在线编辑器里该用 Prettier，而不是自己遍历 AST
Monaco 或 CodeMirror 里所谓“基于 AST 的格式化”，实际就是调 prettier.format()。自己解析 HTML → 构建 AST → 手动拼字符串，不仅 bundle 多出 200KB+，还会踩一堆边界坑：比如 <p>hello<br>world</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="overflowclass">Wechat Article Html</a>
<p class="overflowclass">将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 是否该在 <br> 后换行、<script></script> 里的 JS 是否参与缩进、注释里含 <!-- <div> --> 怎么处理。
正确做法是：
Vue/Angular 模板重构必须用框架专属 AST
如果 HTML 里混了 v-if、*ngIf 或插值表达式，parse5 和 cheerio 就不够用了——它们把指令当普通属性，无法识别绑定上下文或表达式合法性。这时得切到 @vue/compiler-dom 或 @angular/compiler。
关键差异在于：
HTML 重构真正的难点不在遍历本身，而在边界判定：哪些标签必须闭合、哪些可以省略、CDATA 里能不能执行 JS 替换、注释是否含嵌套 HTML 片段——这些都不是 AST 遍历能自动解决的，得靠解析器本身的规范兼容性兜底。
