Vue反编译dist包到源码

winty~~

于 2024-06-14 09:58:03 发布

阅读量383

点赞数

文章标签： vue.js 前端 javascript ecmascript 前端框架

原文链接：https://mp.weixin.qq.com/s?__biz=MzI0MzIyMDM5Ng==&mid=2649861149&idx=1&sn=942b0cc1736865fedfcfaf45eec57196&chksm=f0ec9c36145d02ea319d6d50888a1e005d823d0f0c184f0c1e459ef51a76e223fca0020b7edf&scene=126&sessionid=0

版权

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

最近由于公司老项目上的问题，由于项目很老，之前交接的源码包中缺少了很大一部分模块，但是现在线上的环境和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)  })});