每个模块一个文件
每个 webpack/rspack 模块写入 modules/<id>.js。ES 模块分块放入 chunks/,原始源码放入 sources/。
开源 Node CLI
将 JavaScript bundle 解包为真实可运行的模块
Packscope 把单个已发布的 bundle —— 来自 webpack、rspack、rollup、esbuild 或 Vite —— 转换成可浏览的项目树,让你能阅读、检索、编辑与运行。
terminal
$ npx packscope ./dist/app.js ./out
# webpack/rspack output
out/
├── header.js
├── webpack-runtime.js
├── runtime.js
├── index.js
├── modules/<id>.js
├── manifest.json
├── rebuild.js
└── package.json
$ node out/index.js --version
2.106.4功能特性
Packscope 带给你什么
默认即可执行
加载器用真实的 UMD 头与 webpack 运行时重建原始 bundle 形态,使解包后的树以相同方式运行。
编辑与重建
修改任意模块,然后运行 node out/rebuild.js bundle-edited.js 重新生成单个可运行 bundle。
从 URL 解包
传入 http:// 或 https:// URL。Packscope 会下载 bundle、解析分块,并将导入重写为本地路径。
清单与依赖图
manifest.json 包含模块 ID、体积、依赖边、推断名称与已下载资源,便于进一步分析。
可选的美化与重命名
使用 --beautify 与 --rename 获得可读输出。默认保留原始切片以保证可执行。
内部原理
工作原理
1
解析 bundle
Acorn 定位 webpack 模块字典,并映射每个模块边界。
2
忠实提取函数体
每个模块体从 bundle 中原样切片。不做 AST 改写,避免语句顺序意外。
3
重建加载器
runtime.js 重建原始表达式:头 + 填充了委托的模块 + 原始运行时。
4
连接外部依赖
chokidar 等外部依赖从 shim 模式中识别,并经由与原始相同的 UMD 路径接入。
快速开始
用法
安装
npm install解包本地 bundle
npx packscope ./dist/app.js ./out从 URL 解包
npx packscope https://example.com/app.js ./out运行解包后的树
node out/index.js --version
node out/index.js --help选项
--beautify— pretty-print output (best-effort)--decompose— extract classes / services / wrappers for navigation (ES modules)--rename— rename wrapper params tomodule/exports/require--fetch-assets/--no-fetch-assets— control source-map / asset downloads--entry <N>— force entry module id
编辑后重建
echo "// patched" >> out/modules/92367.js
node out/rebuild.js bundle-patched.js
node bundle-patched.js --version