如何在运行时恢复UglifyJs混淆压缩后的变量原名？附fabric.js代码示例

嘿，针对你遇到的UglifyJS压缩后变量名丢失、需要在运行时恢复原始名称的问题，结合你那段和fabric.js交互的代码，我给你整理了几个实用的解决方案：

一、调试时快速恢复：用Source Maps自动映射 #

这是最省心的调试方案，不用改代码就能让浏览器帮你还原原始变量名：

• 压缩代码的时候给UglifyJS加上--source-map参数，生成对应的source map文件（比如your-bundle.js.map）。
• 在压缩后的JS文件末尾加一行注释：//# sourceMappingURL=your-bundle.js.map，让浏览器知道去哪里找映射文件。
• 打开浏览器开发者工具，确保「Enable JavaScript source maps」选项是开启的（Chrome在Sources面板的设置里就能找到）。
• 之后断点调试时，你看到的就会是原始的object、minDim这些变量名，而不是压缩后的s、e、t了。

二、运行时业务逻辑需要：主动恢复原始变量名 #

如果你的代码本身需要在运行时知道压缩变量对应的原始名称（比如日志输出、动态逻辑判断），可以试试这两种方法：

方法1：手动注入变量名映射表 #

UglifyJS不会混淆字符串字面量，所以我们可以在原代码里提前埋一个映射对象，把关键变量和它的原始名称绑定起来：

export function cropToCircle(object) {
  // 提前定义映射表，字符串键会保留原始名称
  const varNameMap = {
    object: object,
    minDim: null,
    ctx: null
  };
  
  let minDim = Math.min(object.width, object.height);
  varNameMap.minDim = minDim;
  window.lastMinDim = minDim;
  
  return object.set('clipTo', ctx => {
    varNameMap.ctx = ctx;
    if (typeof minDim === 'undefined') minDim = window.lastMinDim || 1000;
    ctx.arc(0, 0, minDim / 2, 0, Math.PI * 2, true);
    
    // 运行时就能通过原始名称拿到变量值
    console.log('Original variable "minDim" current value:', varNameMap.minDim);
  });
}

压缩后，varNameMap里的"object"、"minDim"这些字符串不会变，你可以通过这个映射表轻松关联原始名称和压缩后的变量值。

方法2：解析Source Map批量恢复 #

如果有大量变量需要处理，可以在运行时加载并解析source map文件，用代码自动匹配压缩名和原始名：

1. 确保UglifyJS生成的source map包含names数组（默认配置会包含）。
2. 用source-map库来解析映射文件（浏览器或Node.js环境都能用）：

import { SourceMapConsumer } from 'source-map';

async function getOriginalVariableName(compressedName, sourceMapUrl) {
  const response = await fetch(sourceMapUrl);
  const sourceMapData = await response.json();
  
  const consumer = await new SourceMapConsumer(sourceMapData);
  // 遍历映射关系找到匹配的原始名称
  const mappings = consumer._generatedMappings;
  for (const mapping of mappings) {
    if (mapping.name === compressedName) {
      return mapping.originalName;
    }
  }
  return compressedName; // 找不到就返回压缩后的名称
}

// 示例：假设压缩后的变量名是't'，找它的原始名称
getOriginalVariableName('t', './your-bundle.js.map').then(originalName => {
  console.log(`压缩后的变量"t"对应的原始名称是：${originalName}`);
});

不过这种方法会有一定性能开销，更适合调试或日志场景，不建议在生产核心逻辑里用。

方法3：让UglifyJS保留特定变量名 #

如果你不想让某些关键变量被混淆，可以在UglifyJS的配置里添加保留规则：

// uglifyjs.config.js
module.exports = {
  mangle: {
    reserved: ['object', 'minDim', 'ctx'] // 这些变量名将不会被混淆
  }
};

这样压缩后这些变量名会保持原样，但会稍微降低压缩率，适合对变量名有强依赖的代码片段。

针对你那段fabric.js的裁剪代码，最推荐的是调试用Source Maps，运行时需要的话用手动映射表的方法，简单高效还没额外依赖。

内容的提问来源于stack exchange，提问作者Marco Faustinelli