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

V2EX = way to explore

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

已注册用户请登录

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

这是一个创建于 245 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

有哪个大佬做过. 求分享

第 1 条附言 245 天前

使用 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 条附言 245 天前

第 3 条附言 245 天前

使用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 条附言 244 天前

依然想通过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