如何创建自己的 babel 处理器替代 `React`

Question

当您在 JS 文件中使用 JSX 时，您必须导入 React 否则生成的代码将无法编译。这是因为：

import React from 'react'
import ReactDOM from 'react-dom'

function Foo() { return 'hello world' }

ReactDOM.render(<Foo/>, document.body)

变成：

import React from 'react'
import ReactDOM from 'react-dom'

function Foo() { return 'hello world' }

ReactDOM.render(React.createElement(Foo), document.body)

所以React.createElement 中的React 是由某处的某些 babel 或 webpack 工具生成的，它在某处指定，我不记得了。我的问题首先是在哪里指定它将 JSX 转换为 React.createElement？

第二个也是主要的问题是，我如何自定义它以将 JSX 转换为 MyThing.create？我记得很久以前在virtual-dom 库中看到过这个，但我已经忘记了。想知道这样做需要什么。

我想做的是创建一个类似这样的 API

<Foo/>
<Bar/>
<Baz/>

MyThing.create('Foo')
MyThing.create('Bar')
MyThing.create('Baz')

Answer 1

负责 JSX 处理的 Babel 插件是@babel/plugin-transform-react-jsx。尽管它的名称是特定于 React 的，但您可以通过在 .babelrc 文件中设置一个选项来使用您喜欢的任何 pragma（React.createElement 是默认的 pragma）：

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/plugin-transform-react-jsx", {
            "pragma": "MyThing.create"
        }]
    ]
}

除了pragma，还有pragmaFrag 用于设置<>...</> JSX 结构的输出。 （默认为React.Fragment。）

例如，Mithril.js 使用 "pragma": "m" 和 "pragmaFrag": "'['"。 Preact 使用 "pragma": "Preact.h" 和 "pragmaFrag": "Preact.Fragment"。

~5 年前我使用了一个不同的 JSX-to-JavaScript 编译器，它工作得很好，但我现在找不到它。这是有道理的：JavaScript 在过去五年中发生了很大变化，而让编译器与这些变化保持同步的时间承诺将是非常重要的。鉴于 Babel 的成功，很容易看到开发人员决定不追求它。

我知道有一种选择：Sucrase。它只编译 JSX、TypeScript 和 Flow，没有 Babel 的插件结构。 （因此，它非常快。）