javascript - 如何创建自己的 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 的，但您可以通过在 React.createElement 中设置一个选项来使用您喜欢的任何 pragma(.babelrc 是默认的 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 在过去五年中发生了很大的变化，让编译器与这些变化保持同步的时间 promise 是非常重要的。鉴于 Babel 的成功，很容易看到开发人员决定不追求它。

我知道有一种选择:Sucrase .它仅编译 JSX、TypeScript 和 Flow，没有 Babel 的插件结构。 (因此，它非常很快。)