Vue反编译dist包到源码
共 5023字,需浏览 11分钟
·
2024-06-20 13:36
大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
最近由于公司老项目上的问题,由于项目很老,之前交接的源码包中缺少了很大一部分模块,但是现在线上的环境和dist包是正常运行的,领导希望能够手动将这部分补全,由于前期项目的不规范,缺少接口文档以及原型图,因此无法知道到底该如何补全,因此,我想着能不能通过dist包去反编译源码包呢,经过多方面探索发现是可行的,但是只能编译出vue文件,但是也满足基本需要了。
1,如何反编译
1.首先需要在管理员模式下打开cmd
2.找到需要编译的dist/static/js的目录下 执行完成后在该目录会看到目录下存在下面的文件名:
0.7ab7d1434ffcc747c1ca.js.map,这里以0.7ab7d1434ffcc747c1ca.js.map为例,如下图:
3.全局安装reverse-sourcemap资源
npm install --global reverse-sourcemap4.反编译 执行:reverse-sourcemap --output-dir source
0.7ab7d1434ffcc747c1ca.js.map
2,脚本反编译
上面的方式执行完毕,确实在source中会出现源码,那么有没有可能用脚本去执行呢,通过node的child_process模块中的exec方式便可以执行reverse-sourcemap --output-dir source这个命令,那么只需要拿到当前文件夹中包含.map文件即可,那么可以借助node中fs模块,递归读取文件名,并使用正则将所有.map的文件提取出来放在一个集合或数组中,在对数组进行递归循环执行reverse-sourcemap --output-dir source这个命令
2.1 根据child_process模块编写执行函数
function executeReverseSourceMap(outputDir) { // 构建 reverse-sourcemap 命令 const command = `reverse-sourcemap --output-dir source ${outputDir}`; // 执行命令 exec(command, (error, stdout, stderr) => { if (error) { console.error(`执行命令时出错:${error.message}`); return; } if (stderr) { console.error(`命令输出错误:${stderr}`); return; } console.log(`命令输出结果:${stdout}`); }); }
2.2读取文件并匹配文件
// // 读取文件夹中的文件fs.readdir(folderPath, (err, files) => { if (err) { console.error('读取文件夹时出错:', err); return; } // 遍历文件 files.forEach(file => { // 使用正则表达式匹配特定格式的文件名 const match = /^(\d+)\..+\.js\.map$/.exec(file); if (match) { // 如果匹配成功,将文件名存入数组 targetFiles.push(match[0]); } }); // 输出目标文件名数组 targetFiles.forEach(file=>{ executeReverseSourceMap(file) })});
2.3完整的执行代码
const fs = require('fs');const path = require('path');const { exec } = require('child_process');// 文件夹路径const folderPath = '../js';// 存放目标文件名的数组const targetFiles = [];function executeReverseSourceMap(outputDir) { // 构建 reverse-sourcemap 命令 const command = `reverse-sourcemap --output-dir source ${outputDir}`; // 执行命令 exec(command, (error, stdout, stderr) => { if (error) { console.error(`执行命令时出错:${error.message}`); return; } if (stderr) { console.error(`命令输出错误:${stderr}`); return; } console.log(`命令输出结果:${stdout}`); }); }// // 读取文件夹中的文件fs.readdir(folderPath, (err, files) => { if (err) { console.error('读取文件夹时出错:', err); return; } // 遍历文件 files.forEach(file => { // 使用正则表达式匹配特定格式的文件名 const match = /^(\d+)\..+\.js\.map$/.exec(file); if (match) { // 如果匹配成功,将文件名存入数组 targetFiles.push(match[0]); } }); // 输出目标文件名数组 targetFiles.forEach(file=>{ executeReverseSourceMap(file) })});
3,最终结果展示图
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一下