能否在无React/Preact框架依赖下将JSX直接转译为原生HTML字符串？

该需求完全可落地，不需要强制在业务代码中直接书写原生HTML模板字符串，最终打包产物也不会残留任何React/Preact框架相关的createElement类实现。
该场景的本质，是需要在编译期将JSX结构静态转换为原生HTML字符串，和常规“JSX转虚拟DOM”的React式转换逻辑完全独立。

1. 现成轻量Babel插件方案 #

可直接使用面向静态HTML字符串转换场景的专用插件babel-plugin-transform-jsx-to-html，完全匹配使用预期：

• 插件核心为编译期遍历所有JSX节点，直接拼接生成对应HTML字符串，不会插入任何运行时虚拟DOM生成逻辑
• 自动处理JSX属性映射：将JSX语法中的className自动转换为HTML原生的class属性，和示例中的输出格式完全对齐
• 支持动态插值：JSX中嵌入的变量、表达式，会自动转换为模板字符串的插值语法，例如<div>{username}</div>编译后直接生成`<div>${username}</div>`
• 零框架依赖：整个转换过程不需要引入任何前端框架的运行时代码，打包产物中不会出现createElement、h、虚拟节点构造这类实现代码

参考Babel配置：

{
  "plugins": [
    ["transform-jsx-to-html", {
      "classToHtmlClass": true,
      "removeJsxComments": true
    }]
  ]
}

2. 自定义转换插件方案 #

如果需要适配特殊的转换规则，可以基于Babel API编写仅几十行代码的自定义转换插件，核心实现逻辑非常简单：

• 遍历语法树中所有JSX节点（开标签、闭标签、文本内容）
• 对每个节点直接生成对应的HTML字符串片段，拼接为完整的模板字符串结构
• 规则完全自主可控，不依赖第三方插件，从根源上避免打包产物混入不必要的框架代码

• 禁止启用通用JSX转换预设（如@babel/preset-react）：这类预设默认转换目标是生成React.createElement调用，会在产物中残留不想要的框架相关代码，仅单独配置静态转HTML的插件即可
• 无需在业务代码中导入任何框架依赖：整个转换链路完全独立，从代码层面就不会打包React、Preact这类框架的相关代码

内容的提问来源于stack exchange，提问作者Bastian Fießinger