前端 DSL 实践:Babel 语法插件与 Vue SFC 解析器的设计逻辑

@babel/plugin-syntax-jsx和 Vue 的 SFC 解析器做的是同一件事——把非标准语法转换成标准 AST。前者是“插入式扩展”，后者是“整体式拆解”。

前端 DSL 的形态多种多样：JSX 是在 JavaScript 里写 XML，Vue SFC 是在 HTML 里写 JavaScript 和 CSS，babel-plugin-macros 是在编译时执行 JS 代码生成新的 AST。它们不是标准 JavaScript 语法，但通过编译工具，它们被转换成了标准语法。

@babel/plugin-syntax-jsx只是“告诉 Babel：我遇到了 JSX 语法，先别报错，让后续插件来处理”。而 Vue SFC 解析器做的是“把 .vue 文件拆成三块，分别交给不同的处理器”。

一、Babel 的语法插件：在标准语法上“开一道口子”

Babel 的核心工作流程是：源码 → 解析器（@babel/parser）→ AST → 转换器 → 生成新代码。

@babel/parser 默认只解析标准 JavaScript 语法。遇到 JSX、Flow、TypeScript 等非标准语法时，就会报错。语法插件的作用是：扩展解析器，让它能识别这些非标准语法，并生成对应的 AST 节点。

@babel/plugin-syntax-jsx 只做了“告诉解析器 JSX 长什么样”。它不负责把 JSX 转成 React.createElement——那是 @babel/plugin-transform-react-jsx 的工作。这种“识别”和“转换”的分离，是 Babel 插件体系的一个核心设计：语法插件只负责让解析器理解语法，转换插件负责把新语法变成标准 JavaScript。

类似的插件还有 @babel/plugin-syntax-typescript、@babel/plugin-syntax-flow、@babel/plugin-syntax-decorators 等。每个都在 parser 的插件列表里加一个名字，让解析器知道“遇到这种语法时，按这个规则生成 AST 节点”。

如果想让 Babel 认识新语法，比如自定义的模板语法 {{ expr }}，可以写一个类似的插件，把{{ expr }} 映射成 ExpressionStatement 节点，然后交给 transform 插件做进一步转换。

二、Vue SFC 解析器：把单文件组件拆成三块

Vue 的单文件组件（.vue）是一种更激进的 DSL——它在一个文件里包含了三种完全不同的语言：HTML（模板）、JavaScript（逻辑）、CSS（样式）。Vue 的解析器需要做的是：把这三块拆出来，分别交给对应的处理器。

Vue SFC 解析器的核心工作流程是这样的：读入 .vue 文件内容 → 用 @vue/compiler-sfc 的 parse 方法拆分出 template、script、style 三部分 → 分别交给对应的编译器处理（模板编译器、脚本编译器、样式编译器）→ 输出浏览器可运行的 JS 代码。

@vue/compiler-sfc的核心是parse 函数：它扫描文件内容，根据<template>、<script>、<style> 标签把内容拆成三块，同时提取每个块上的属性（如 scoped、lang="ts"、setup），生成一个包含三块信息及其在文件中位置范围的对象（SFCDescriptor）。

Babel 语法插件和 Vue SFC 解析器的核心差异在于：Babel 插件扩展的是“语言层面”的语法；Vue SFC 解析器处理的是“文件组织层面”的结构。前者让解析器认识新语法，后者让构建工具认识新文件格式。

三、JSX 的另一种处理方式：Vue 模板编译器的设计差异

JSX 和 Vue 模板都是“在 JS 里描述 UI”的 DSL，但它们的处理路径完全不同。

JSX 是 JavaScript 语法的扩展，Babel 把它转换成 React.createElement 调用，整个过程在 JS 解析器内部完成。

Vue 模板是 HTML 语法的扩展，它不经过 JS 解析器，而是被独立的模板编译器解析成一个 render 函数。@vue/compiler-dom 会先把模板字符串解析成 AST（模板 AST，不是 JS AST），然后做静态提升、补丁标记等优化，最后生成 render 函数的代码字符串。

两种设计各有考虑：JSX 的灵活性在模板编译器里难以实现，但 Vue 模板在编译时的优化空间更大。Vue 3 的模板编译器能在编译时标记静态节点、静态属性、动态节点，在运行时跳过不必要的对比。JSX 无法做这种优化，因为它本质上就是 JS，在进入 JS 解析器时已经失去了“这是模板”的语义信息。

最后

Babel 语法插件和 Vue SFC 解析器，代表了前端 DSL 处理的两种不同路径。Babel 通过 manipulateOptions 把新语法注入到 JS 解析器中，让它生成标准 AST；Vue 则用独立的解析器把 .vue 文件拆成三个部分，分别处理。

理解这种差异后，如果你要支持一种新的前端 DSL——比如在 JavaScript 里加一种新的模板语法，或者在项目中引入一种新的文件格式，思路就很清晰了：前者适合做 Babel 插件，后者适合做独立的文件解析器。

如果这篇文章对你有帮助，欢迎点赞、在看、转发。