javascript - 自定义babel插件-无法遍历(访问)JSXElement

我正在尝试编写自定义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);
            }
          }
        };
      },
    ]
  });

如果有帮助，我将transform.test.js放入弹出的create-react-app项目中。 CRA带有内置预设react-app。

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

我使用命令jest transform.test.js运行测试，并且默认情况下在CRA jest安装程序中应用了babel-jest转换。

最佳答案

我认为您是将组件传递给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);
            }
          }
        };
      },
    ]
  });```