   
         
      
     
大廠技術(shù)  高級前端  Node進階
點擊上方 程序員成長指北，關(guān)注公眾號
回復1，加入高級Node交流群
    
     最近由于公司老項目上的問題，由于項目很老，之前交接的源碼包中缺少了很大一部分模塊，但是現(xiàn)在線上的環(huán)境和dist包是正常運行的，領(lǐng)導希望能夠手動將這部分補全，由于前期項目的不規(guī)范，缺少接口文檔以及原型圖，因此無法知道到底該如何補全，因此，我想著能不能通過dist包去反編譯源碼包呢，經(jīng)過多方面探索發(fā)現(xiàn)是可行的，但是只能編譯出vue文件，但是也滿足基本需要了。

1，如何反編譯

1.首先需要在管理員模式下打開cmd

2.找到需要編譯的dist/static/js的目錄下執(zhí)行完成后在該目錄會看到目錄下存在下面的文件名：

0.7ab7d1434ffcc747c1ca.js.map，這里以0.7ab7d1434ffcc747c1ca.js.map為例，如下圖:

3.全局安裝reverse-sourcemap資源

npm install --global reverse-sourcemap4.反編譯執(zhí)行：reverse-sourcemap --output-dir source

0.7ab7d1434ffcc747c1ca.js.map

2，腳本反編譯

上面的方式執(zhí)行完畢，確實在source中會出現(xiàn)源碼，那么有沒有可能用腳本去執(zhí)行呢，通過node的child_process模塊中的exec方式便可以執(zhí)行reverse-sourcemap --output-dir source這個命令，那么只需要拿到當前文件夾中包含.map文件即可，那么可以借助node中fs模塊，遞歸讀取文件名，并使用正則將所有.map的文件提取出來放在一個集合或數(shù)組中，在對數(shù)組進行遞歸循環(huán)執(zhí)行reverse-sourcemap --output-dir source這個命令

2.1 根據(jù)child_process模塊編寫執(zhí)行函數(shù)

function executeReverseSourceMap(outputDir) {    // 構(gòu)建 reverse-sourcemap 命令    const command = `reverse-sourcemap --output-dir source ${outputDir}`;    // 執(zhí)行命令    exec(command, (error, stdout, stderr) => {      if (error) {        console.error(`執(zhí)行命令時出錯：${error.message}`);        return;      }      if (stderr) {        console.error(`命令輸出錯誤：${stderr}`);        return;      }      console.log(`命令輸出結(jié)果：${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) {      // 如果匹配成功，將文件名存入數(shù)組      targetFiles.push(match[0]);    }  });  // 輸出目標文件名數(shù)組  targetFiles.forEach(file=>{    executeReverseSourceMap(file)  })});

2.3完整的執(zhí)行代碼

const fs = require('fs');const path = require('path');const { exec } = require('child_process');// 文件夾路徑const folderPath = '../js';// 存放目標文件名的數(shù)組const targetFiles = [];function executeReverseSourceMap(outputDir) {    // 構(gòu)建 reverse-sourcemap 命令    const command = `reverse-sourcemap --output-dir source ${outputDir}`;    // 執(zhí)行命令    exec(command, (error, stdout, stderr) => {      if (error) {        console.error(`執(zhí)行命令時出錯：${error.message}`);        return;      }      if (stderr) {        console.error(`命令輸出錯誤：${stderr}`);        return;      }      console.log(`命令輸出結(jié)果：${stdout}`);    });  }// // 讀取文件夾中的文件fs.readdir(folderPath, (err, files) => {  if (err) {    console.error('讀取文件夾時出錯：', err);    return;  }  // 遍歷文件  files.forEach(file => {    // 使用正則表達式匹配特定格式的文件名    const match = /^(\d+)\..+\.js\.map$/.exec(file);    if (match) {      // 如果匹配成功，將文件名存入數(shù)組      targetFiles.push(match[0]);    }  });  // 輸出目標文件名數(shù)組  targetFiles.forEach(file=>{    executeReverseSourceMap(file)  })});