首页 前端知识 vue反编译dist包到源码

vue反编译dist包到源码

2024-06-03 12:06:51 前端知识 前端哥 942 640 我要收藏

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

4.反编译 执行: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最终结果展示图 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10615.html
标签
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!