transform-react-jsx中配置的"pragma: 'h'"究竟是什么？

你在Preact项目的Babel配置里看到的这个设置，其实是为了让Babel把JSX语法编译成Preact专用的虚拟DOM创建函数调用，我来给你详细拆解：

首先，先回顾一下Babel处理JSX的逻辑：JSX本身只是一种语法糖，Babel编译时会把类似 <div>Hello</div> 的JSX代码转换成对应的函数调用——默认情况下是React.createElement('div', null, 'Hello')，这也是你看到的文档里说pragma默认值是React.createElement的原因。

而在Preact这个轻量React替代库中，用来创建虚拟DOM的函数不叫createElement，而是缩写成了h（它是hyperscript的简称，这是一种简洁描述DOM结构的语法规范）。所以配置里的pragma: 'h'就是告诉Babel：“把JSX转换成h()函数调用，而不是默认的React.createElement()”。

举个实际的例子，配置生效后，Babel会把：

<div className="greeting">Hello Preact</div>

编译成：

h('div', { className: 'greeting' }, 'Hello Preact')

你提到的文档没说明h的含义，是因为pragma的作用是允许你自定义这个编译目标函数，而h是Preact这个具体库的约定，不是Babel本身的内置值——不同的库可能会用不同的函数名，比如有些库会用createElement或者其他名称，这都可以通过pragma来指定。

另外要注意，使用这个配置的前提是你的项目里已经引入了Preact的h函数，通常是通过import { h } from 'preact'来导入，或者通过Babel的相关插件自动注入这个函数。

pragma
字符串类型，默认值为React.createElement。
替换编译JSX表达式时使用的函数。
注意：@jsx React.DOM 编译指令自React v0.12起已被弃用

内容的提问来源于stack exchange，提问作者geckos