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，将其放入我的函数中并将其转换为函数的 return

我该怎么做？谢谢

Answer 1

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

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

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

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

Babel plugin - How to transform JSX without react

javascript

jsx

babeljs

babel-plugin