Babel 插件 - 如何在不做出反應的情況下轉換 JSX

Question

我已經編寫了自己的模塊，該模塊將 JSX 字符串作為參數並將其轉換為 javascript object，所以我這樣稱呼它：

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

這行得通，但我真正需要的是在編譯時將 JSX 轉換為 object，所以我可以像普通的 JSX 表達式一樣編寫它：

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

並從我的 function 作為 output 得到結果，如下所示：

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

我不明白有很多像“babel-plugin-transform-jsx”這樣的 babel 插件可以做到這一點，但是我想了解 babel 插件以及它們是如何工作的，這樣我就可以自己制作了。

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

我唯一想做的就是提取該 JSX，將其放入我的 function 並將其轉換為函數的返回

我怎樣才能做到這一點？ 謝謝

Answer 1

我已經想通了，原來你可以使用path.toString()獲取節點的代碼，例如聲明這樣的訪問者：

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

這在 babel 插件手冊中不存在，我認為這是一個不好的做法，但無論如何它是一個快速的解決方案，以防有人想知道