Visual Studio打包JS报Cannot access variable before initialization如何修复？

报错是打包器自动重命名变量时出现冲突导致的：你外层存储接口返回数据的变量被重命名为t，而循环内解构BalanceYear字段的别名也被重命名为t。由于const声明的变量存在暂时性死区，当前块作用域内只要存在const/let声明的同名变量，在声明完成前访问该名称都会优先指向当前作用域未初始化的变量，屏蔽外层同名变量。因此报错行中of后面的t会被识别为循环内刚声明的const t，还未完成初始化就被调用，触发引用错误。

• 方案1：修改源代码中解构赋值的字段别名
  你在写遍历返回数据的for循环时，手动给BalanceYear指定明确的自定义别名，避免打包器自动重命名时和外层变量冲突，示例代码：

  for (const {AccountName, Amount, BalanceYear: accYear} of userData) {
    // 后续逻辑直接使用accYear代替原BalanceYear的变量即可
  }
  

• 方案2：单独声明遍历数据源变量
  在第二个for循环之前，先把要遍历的返回数据赋值给一个新的变量，再用这个新变量做遍历，打包器就不会把遍历源和解构内的变量重命名为同一个：

  const dataList = userData;
  const o = new Map;
  for (const {AccountName: n, Amount: i, BalanceYear: t} of dataList) {
    // 后续逻辑不变
  }
  

• 方案3：调整变量声明方式
  把源代码中存储接口返回数据的变量从var改为const/let，明确变量的作用域范围，减少打包器变量重命名时的冲突概率：

  // 原代码
  var userData = data;
  // 修改为
  const userData = data;
  

• 方案4（仅适用于可配置打包规则的场景）：调整打包混淆规则
  如果你的项目可以自定义打包配置，可以修改混淆插件的变量命名规则，比如增加变量名长度、避开单字符命名，从打包层面避免重名冲突。

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