Babel 插件 - 如何在不做出反应的情况下转换 JSX答案

【问题标题】：Babel plugin - How to transform JSX without reactBabel 插件 - 如何在不做出反应的情况下转换 JSX
【发布时间】：2020-07-22 14:10:25
【问题描述】：

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

我该怎么做？谢谢

【问题讨论】：

您可以查看现有的 Babel JSX 转换，但您的输入和输出都不匹配 JSX 的处理方式。
@jonrsharpe 我的输入和输出怎么不匹配 JSX 处理？如果我使用现有的 babel jsx 转换，我上面的代码将转换成类似的东西，我只是尝试复制相同的功能，这样我就可以理解 babel 插件是如何工作的，我可以举一个不同的例子，而不仅仅是 jsx 转换跨度>
那我建议从babeljs.io/docs/en/plugins#plugin-development开始

标签： javascript babeljs jsx babel-plugin

【解决方案1】：

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

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

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

【讨论】：