自定義 babel 插件 - 無法遍歷（訪問）JSXElement

Question

我正在嘗試編寫一個自定義 babel 轉換插件。 在astxplorer.net中查看 React 組件的 AST 時，我將樹中的 JSXElement 視為節點。

但是當我嘗試記錄訪問者JSXElement的路徑時，控制台沒有任何記錄。

反應組件

const HelloWorld = () => <span>Hello World</span>

訪問時轉換組件並記錄JSXElement的代碼

transform.test.js

const { code, ast } = transformSync(HelloWorld, {
    ast: true,
    plugins: [
      function myOwnPlugin() {
        return {
          visitor: {
            JSXElement(path) {
              // nothing logs to the console
              console.log("Visiting: " + path);
            }
          }
        };
      },
    ]
  });

如果有幫助，我在彈出的create-react-app項目中有transform.test.js 。 CRA 帶有內置的預設react-app 。

"babel": {
    "presets": [
      "react-app"
    ]
  }

我使用命令jest transform.test.js運行測試，並且在 CRA jest 設置中默認應用了babel-jest轉換。

Answer 1

我認為您將組件傳遞給 Babel 而不是組件的代碼，您需要將實際代碼轉換為字符串，例如，如下所示：

const { code, ast } = transformSync(`const HelloWorld = () => <span>Hello World</span>`, {
    ast: true,
    plugins: [
      function myOwnPlugin() {
        return {
          visitor: {
            JSXElement(path) {
              // nothing logs to the console
              console.log("Visiting: " + path);
            }
          }
        };
      },
    ]
  });```