0

我已经编写了自己的模块，该模块将 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，将其放入我的函数中并将其转换为函数的返回

我怎样才能做到这一点？谢谢

4

1 回答 1

1

我已经想通了，原来你可以用 获取节点的代码path.toString()，例如声明这样的访问者：

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

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

于 2020-04-10T03:00:30.890 回答