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

Question

我正在尝试编写一个自定义 babel 转换插件。当在 astxplorer.net 中查看 React 组件的 AST 时，我在树中看到 JSXElement 作为一个节点。

但是当我尝试记录访问者 JSXElement 的路径时，控制台没有记录任何内容。

react 组件

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);
            }
          }
        };
      },
    ]
  });```