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

6 天前
 hanxu317138

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

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

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

有哪个大佬做过. 求分享

1097 次点击
所在节点    程序员
16 条回复
murmur
6 天前
你这个东西应该去看各种代码混淆的插件或者工具，人家可以把字符串量转成\x0000\x1111 这样的东西，肯定能解析字符串
ltaoo1o
6 天前
https://astexplorer.net/ 先用这个看 AST 结构，然后写一个 babel 插件，能获取到 AST 结构，后面就随便你想怎么做都行
duowb
6 天前
用 ast 来解析吧，列举出所有的"Literal" 节点。
yishibakaien
6 天前
使用 glob 或 fs.readFile 读取文件，去到文件后，使用正则表达式，获取出文件中你需要的字符串
xuld
6 天前
小白：我想学做饭
大师：用电饭煲啊，先去网上看看电饭煲的广告，给你推荐个下单地址，然后买过来，使用做饭功能，就可以做饭了
n18255447846
6 天前
你这不是 webpack 做的事。解析 ast 后再处理，babel 插件和 acorn 都能做到
leokun
6 天前
用 babel-loader 配合一个自定义 babel 插件就可以很轻松完成 (就是附言中那样)
jchnxu
6 天前
我一般是找现成的 replace 系插件。print 之后魔改

这个确实是目前 gpt 搞不定的东西。。
hanxu317138
6 天前
@jchnxu chatGpt 是工具用于提升生产力的. 太细致的需求, 还得是自己动手.
hanxu317138
6 天前
@n18255447846 去看了一下 terser 的仓库, 也是看半天也没看懂.

https://github.com/webpack-contrib/terser-webpack-plugin/blob/master/src/index.js
n18255447846
6 天前
@hanxu317138 找 terser 源码，插件只是调用了 terser 库。插件用 worker 执行 minify ，而 minify 调用了 options.minimizer.implementation
zhwithsweet
6 天前
都是 vite/rspack 了 老哥赶紧迁移吧
hanxu317138
5 天前
@n18255447846 耐心看了一下午. 看懂了~~感谢指导~
hanxu317138
5 天前
@zhwithsweet 公司历史债务, 我倒是愿意拥抱新变化~~~
lisongeee
5 天前
webpack api 不如 rollupjs 现代化，看得脑壳痛

建议使用 https://github.com/unjs/unplugin ，看你的场景只需要使用 transform hooks 即可

使用 https://github.com/acornjs/acorn 解析得到 ast 后

使用 https://github.com/acornjs/acorn/tree/master/acorn-walk/ 快捷方便遍历节点

替换节点使用 https://github.com/rich-harris/magic-string
hanxu317138
5 天前
@lisongeee 感觉 webpack 虽然呆. 但是很稳定. 常见问题可以一站式解决~

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/1109401

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX