Vue反编译dist包到源码

 
 
大厂技术  高级前端  Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群

最近由于公司老项目上的问题,由于项目很老,之前交接的源码包中缺少了很大一部分模块,但是现在线上的环境和dist包是正常运行的,领导希望能够手动将这部分补全,由于前期项目的不规范,缺少接口文档以及原型图,因此无法知道到底该如何补全,因此,我想着能不能通过dist包去反编译源码包呢,经过多方面探索发现是可行的,但是只能编译出vue文件,但是也满足基本需要了。

1,如何反编译

1.首先需要在管理员模式下打开cmd

2.找到需要编译的dist/static/js的目录下 执行完成后在该目录会看到目录下存在下面的文件名:

0.7ab7d1434ffcc747c1ca.js.map,这里以0.7ab7d1434ffcc747c1ca.js.map为例,如下图:

7eecf7b8b49fda5a520dc0f14da4857b.png
图片

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)  })});
1729bcaaa6fa657d305e470984954619.png
图片

3,最终结果展示图

fba534a9b85488c4a5fb074e8bd09301.png

Node 社群

 
 

我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

891037894d6e9bcdcae50175811df631.png

“分享、点赞、在看” 支持一下
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一款优秀的Web前端开发框架,它使用了许多流行的技术来构建用户界面,例如HTML,CSS和JavaScript语言。Vue.js的主要优点之一是其易于使用和可扩展性,它允许您进行组件化开发并在需要时进行快速打包。 Vue.js的一个显着特性是 它可以生成优化的生产代码。您可以使用Vue.js的打包工具来生成dist文件夹(目录),其中包含应用程序的所有生成代码。当您准备将应用程序投入生产环境时,dist目录是您需要部署的所有内容。 首先,您需要确保已经在本地安装了Vue.js和Node.js。在Vue.js项目根目录下,您需要通过运行以下命令来生成dist目录中的代码: ```bash npm run build ``` 这将创建一个名为“dist”的目录,并且其中包含了与您的Vue.js应用程序相关的所有生成代码。这些代码是根据您的应用程序中包含的组件、指令和其他元素生成的。该目录还包含一个命名为“index.html”的文件,它是您的Vue.js应用程序的入口点。 在您的Vue.js应用程序已经生成的过程中,您应该已经安装了所有必需的依赖项,并在您的应用程序中包含了Vue.js的主文件和其他必需的组件。您的应用程序应该已经成功构建,并在浏览器中运行。有两种方法可以运行Vue.js应用程序dist目录中生成的代码: 1.使用本地Web服务器:您可以使用许多不同的Web服务器来托管您的Vue.js应用程序的dist目录。这将使您能够像运行任何其他Web应用程序一样,在浏览器中访问您的Vue.js应用程序。您可以使用Apache、Nginx等Web服务器。 2.在CDN上托管:CDN是一组分布在全球各地的Web服务器,它可通过Internet公开访问并用于托管常规Web内容和应用程序。您可以将dist目录中的内容上传到CDN上,从而使您的Vue.js应用程序在全球范围内更快速、可靠地运行。 总之,通过Vue.js将应用程序打包成dist可以使您更轻松地部署和运行您的Vue.js应用程序。您可以将您的Vue.js应用程序托管在本地Web服务器或CDN上,以获得更快的速度和更广泛的可靠性。同时,Vue.js使得组件化开发和快速打包成为可能,这对于大型团队和快速迭代的应用程序的开发非常重要。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值