Babel插件-如何在没有反应的情况下转换JSX

Question

我已经编写了自己的模块，它将JSX字符串作为参数，并将其转换为javascript对象，所以我这样调用它：

import parser from 'own-parser'
console.log(parser("<h1>Hello world</h1>"))

这是可行的，但我实际需要的是在编译时将JSX转换为对象，这样我就可以像编写普通的JSX表达式一样编写它：

var jsx = <h1>Hello World</h1>

并从我的函数中获得结果作为输出，如下所示：

var jsx = {element: 'h1', children:[/*...*/]}

我不知道有很多像"babel-plugin-transform-jsx"这样的babel插件可以实现这一点，但我想了解babel插件以及它们是如何工作的，这样我就可以自己制作了。

我试图分析上面提到的插件的代码，但仍然无法理解事情是如何工作的，例如，插件如何知道他正在使用JSXElement？

我唯一想做的就是提取JSX，把它放在我的函数中，并把它转换成函数的返回

我该怎么做？感谢

Answer 1

我已经弄清楚了，原来你可以用path.toString()获得节点的代码，例如声明一个访问者：

JSXElement(path, state) {
if (path.parentPath.type != "JSXElement") {
const parsed = parser(path.toString())
path.replaceWithSourceString(JSON.stringify(parsed))
}
}

这并没有出现在babel插件手册中，我想这是一个糟糕的做法，但无论如何，这是一种快速的解决方案，以防有人想知道