javascript - Acorn / JSX - 具有特定类型的遍历节点

Question

我正在解析 JSX（React 组件）以查找所有节点：

• 属于JSXText类型
• 节点没有空参数text

这是我第一次尝试解析组件源文件，测试如何获取Literalnode.js。

const acorn = require("acorn")
const jsx = require("acorn-jsx")
const cf = require("acorn-class-fields")
const walk = require("acorn-walk")

let s = acorn.Parser.extend(cf).extend(jsx()).parse(cnt, {ecmaVersion: "latest", sourceType: "module"});
 walk.simple(s, {
Literal(node) {
                        console.log(`Literal: ${node.value}`)
                    }
})

问题

• 我在这里找到了节点类型，但没有 JSX 节点类型——在哪里可以找到？
• 如何过滤text参数不为空的节点？

标签： javascriptacorn

Answer 1

我相信您可以扩展acorn-walk以包含额外的类型。

这个插件对我有用：https ://github.com/sderosiaux/acorn-jsx-walk

在撰写本文时，以下是我将如何实现它：

const acorn = require("acorn");
const jsx = require("acorn-jsx");
const walk = require("acorn-walk");
const { extend } = require('acorn-jsx-walk')

// setup
const parser = acorn.Parser.extend(jsx());
extend(walk.base);

// parse
const ast = parser.parse(cnt, { ecmaVersion: "latest", sourceType: 'module' });


// analys
walk.simple(ast, {
    JSXText(node) {
        console.log(node.expression)
    }
});