webpack 求助如何解析字符串变量

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

想通过 webpack 构建时 JavascriptParser Hooks 去解析所有的 "Literal" 节点, 获取["hello-world", "hello]

console.log("hello-world");
var name = "hello";

但是实操半天发现没有任何头绪, 各种方法文档哪怕各种 gpt 都用了. 依然没有方案~~

有哪个大佬做过. 求分享

第 1 条附言 · 5 天前

使用 babel 处理的确容易的多

```
const LiteralPlugin = function (babel) {
const { types, template } = babel;
return {
visitor: {
Literal(path, state) {
if (path.node.value === 'KEY_ABC_DEV') {
console.log('File path>>>', path.hub.file.opts.filename);
console.log('LiteralDeclaration>>>', path.node.value);
}
},
},
};
};
```

第 2 条附言 · 5 天前

第 3 条附言 · 5 天前

使用babel处理容易的多

const LiteralPlugin = function (babel) {
    const { types, template } = babel;
    return {
        visitor: {
            Literal(path, state) {
                if (path.node.value === 'KEY_ABC_DEV') {
                    console.log('File path>>>', path.hub.file.opts.filename);
                    console.log('LiteralDeclaration>>>', path.node.value);
                }
            },
        },
    };
};

第 4 条附言 · 5 天前

依然想通过webpack构建去完成功能, 经过尝试


function traverseESTreeAST(node, callback) {
  if (!node || typeof node !== "object") return;

  // 处理当前节点
  if (node.type) {
    callback(node); // 对当前节点执行自定义逻辑
  }

  // 递归遍历子节点
  for (const key in node) {
    if (key === "parent" || !node.hasOwnProperty(key)) continue; // 忽略 parent 等非子节点属性
    const child = node[key];
    if (Array.isArray(child)) {
      child.forEach((item) => traverseESTreeAST(item, callback));
    } else {
      traverseESTreeAST(child, callback);
    }
  }
}
// webpack plugin
 compiler.hooks.normalModuleFactory.tap("MyPlugin", (factory) => {
        factory.hooks.parser
          .for("javascript/auto")
          .tap("MyPlugin", (parser, options) => {
            parser.hooks.program.tap("myPlugin", (program) => {
              console.log("program", program);
              fs.writeFileSync("ast.json", JSON.stringify(program, null, 2));

              traverseESTreeAST(program, (node) => {
                if (node.type === "Literal") {
                  console.log("node  Literal", node);
                }
              });
            });
          });
      });

webpack

literal

hooks

16 条回复 • 2025-02-08 14:24:43 +08:00