如何创建自己的babel处理器来代替`React` [英] How to create your own babel processor alternative to `React`

问题描述

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

When you use JSX in a JS file, you have to import React or else the generated code won't compile. This is because this:

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?

So the React in React.createElement is getting generated by some babel or webpack tooling somewhere, and it is specified somewhere which I don't remember. My question is first where is this specified that it translates the JSX into React.createElement?

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

Second, and main question, is how can I customize this to instead translate the JSX into MyThing.create? I remember seeing this a long time ago with the virtual-dom library, but I've since forgotten. Wondering what it takes to do this.

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

What I would like to do is create an API something like this

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

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

推荐答案

负责JSX处理的Babel插件是

The Babel plugin responsible for JSX processing is @babel/plugin-transform-react-jsx. Despite its React-specific name, you can use any pragma you like (React.createElement is the default pragma) by setting an option in your .babelrc file:

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

除了pragma，还有pragmaFrag可以设置<>...</> JSX结构的输出. (默认值为React.Fragment.)

In addition to pragma, there's pragmaFrag to set what the output should be for <>...</> JSX structures. (The default is React.Fragment.)

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

For example, Mithril.js uses "pragma": "m" and "pragmaFrag": "'['". Preact uses "pragma": "Preact.h" and "pragmaFrag": "Preact.Fragment".

〜5年前，我使用了另一种效果很好的JSX-to-JavaScript编译器，但现在找不到了.这是有道理的:JavaScript在过去五年中发生了很大的变化，并且使编译器及时了解这些变化的时间承诺将是不平凡的.鉴于Babel的成功，很容易看到开发人员决定不采用它.

~5 years ago I played with a different JSX-to-JavaScript compiler which worked quite well, but I can't find it now. Which makes sense: JavaScript has changed a lot in the last five years, and the time commitment to keep the compiler up-to-date with those changes would be non-trivial. It's easy to see a dev deciding not to pursue it given the success of Babel.

我知道一种替代方法: Sucrase .它仅 即可编译JSX，TypeScript和Flow，而无需Babel的插件结构. (因此，它 非常 非常快.)

There is one alternative I know of: Sucrase. It only compiles JSX, TypeScript, and Flow, without Babel's plugin structure. (As a result, it's very fast.)

这篇关于如何创建自己的babel处理器来代替`React`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！