如何创建自己的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 in React.createElement是由某些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.createElement文件中设置一个选项来使用任何您喜欢的实用程序( .babelrc是默认的语用)：

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

除了pragma之外，还有pragmaFrag来设置<>...</> JSX结构的输出。(默认为React.Fragment。)

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

~5年前，我使用了一个不同的JSX到JavaScript编译器，它运行得很好，但我现在找不到它。这是有道理的: JavaScript在过去五年中已经发生了很大的变化，让编译器在这些变化中保持最新的时间承诺将是非常重要的。考虑到巴贝尔的成功，很容易看到一个开发人员决定不去追求它。

我知道有一种选择：蔗糖酶。它只编译JSX，TypeScript和Flow，没有Babel的插件结构。(因此，它是非常快的。)