在前端工程化的漫漫长路上，我们总会遇到一些让人头疼的历史遗留问题。尤其是当项目规模膨胀到一定程度，那些曾经kan似“方便”的代码写法，往往会变成阻碍我们前行的沉重包袱。Zui近，我们就不得不面对这样一个棘手的挑战：对项目中的常量模块进行一次彻底的“大手术”。这不仅仅是一次简单的代码重构，geng是一场关于如何利用 AST技术实现自动化迁移的深度探索。

一、 痛点分析：当“方便”变成“负担”

回溯项目的早期阶段，我们对于常量的管理策略显得颇为粗放，主要依赖一种集中式的导出模式。那时候，为了图省事，我们将所有的常量dou塞进了一个对象里然后使用 `export default` 将其抛出。代码长这个样子：

// Constants_expert.ts
export default {
  STATUS_PENDING: 1,
  STATUS_APPROVED: 2,
  // ... 数十个常量
};

而在业务代码中，这些常量通过一个“万Neng”的 `@/locales` 模块统一导入，并以一种极其冗长的形式被使用：

import { Constants_expert } from '@/locales';
if  {
  // ...
}

这种写法在初期或许还Neng忍受，但随着业务量的激增，它的弊端暴露无遗：

代码冗余，阅读困难每次引用一个常量，dou要带上长长的 `Constants_expert.default` 前缀，严重干扰了代码阅读的流畅性。

Tree-shaking 极其低效由于是默认导出一个大对象，打包工具hen难精准地剔除未使用的常量，导致Zui终包体积中包含了许多死代码。

类型提示不友好虽然 TypeScript Neng提供一定的提示，但这种层层嵌套的结构总是让开发体验大打折扣。

为了彻底解决这些问题，我们决定进行两项重构：将常量文件从 `export default` 转换为 `export const` 具名导出；将业务代码中冗长的引用替换为直接引用常量名，并自动生成对应的具名导入语句。

然而现实是骨感的。项目涉及 50+ 个常量文件 和 300+ 个业务文件，Ru果靠人工去一个个修改、查找、替换，不仅耗时漫长，而且极易出错。于是我们开发了两个基于 AST 的自动化迁移脚本，实现了零人工干预的平滑过渡。

二、 核心武器：AST 与 Babel 的强强联合

在介绍具体步骤之前，必须先聊聊我们的核心武器——AST。简单来说AST 将源代码转换成了树状结构，每一个节点dou代表了代码中的一种结构。有了这棵树，我们就Neng像Zuo外科手术一样，精准地定位到代码的每一个“器官”，进行切除或移植。

为了实现这次转换，我们使用了 Babel 全家桶，包括 `@babel/parser`、`@babel/traverse`、`@babel/types`以及 `@babel/generator`。

三、 第一阶段：源头治理——将默认导出拆解为具名常量

整个迁移流程分为两个独立的阶段，必须严格按顺序执行。第一阶段的目标是“清理源头”，即扫描 `src/constants/*.ts`，将每个文件中的 `export default` 对象转换为多个 `export const` 语句。

这一步的核心逻辑在于：找到 `ExportDefaultDeclaration` 节点，判断其声明是否是一个对象表达式。Ru果是我们就遍历这个对象的每一个属性，将其拆解成独立的变量声明。

traverse(ast, {
  ExportDefaultDeclaration {
    if ) {
      defaultExportObject = path.node.declaration;
      path.remove; // 移除整个 export default
    }
  },
});
defaultExportObject.properties.forEach => {
  const propName = prop.key.name;
  const propValue = prop.value;
  // 构建新的具名导出节点
  const exportDecl = t.exportNamedDeclaration(
    t.variableDeclaration('const', )
  );
  // 保留注释，这hen重要，别把文档弄丢了
  if  exportDecl.leadingComments = prop.leadingComments;
  exportConstNodes.push;
});

易错点与防御策略

在编写脚本时我们时刻提醒自己要防御性编程。代码世界里充满了意外比如：

非对象默认导出某些常量文件可NengYi经是 `export const` 格式，或者导出一个函数。脚本会检测并跳过避免破坏Yi有代码。

属性名非标识符Ru果对象的键是字符串字面量，则无法转换为合法的变量名，脚本会给出警告并跳过该属性。

文件备份转换前自动创建 `.bak` 文件，防止误操作导致代码丢失。这是我们的安全网。

经过这一步，原本臃肿的默认导出对象，就变成了一排排整洁的具名常量导出：

export const STATUS_PENDING = 1;
export const STATUS_APPROVED = 2;

四、 第二阶段：全网搜索——业务代码的智Neng迁移

这是整个方案中Zui复杂的部分，需要同时处理 JavaScript/TypeScript 和 Vue SFC 文件，并且要保证转换后的代码语法正确、依赖完整。我们的目标是把 `Constants_expert.default.STATUS` 变成 `STATUS`，并在文件顶部加上 `import { STATUS } from '@/constants/Constants_expert'`。

1. 构建常量白名单

在开始修改业务代码之前，我们得先知道“弹药库”里dou有什么。第一阶段完成后`src/constants` 下的每个 `.ts` 文件dou导出了一批具名常量。我们需要知道每个常量文件导出了哪些变量名，以便在第二阶段验证引用的有效性。

我们编写了一个函数来加载所有常量文件，提取出导出的变量名集合：

function loadAllConstantFiles {
  const constantFiles = glob.sync, { absolute: true });
  const constantMap = new Map; // key: 文件名, value: { filePath, exportedNames }
  for  {
    const ast = parser.parse, { plugins:  });
    const exportedNames = new Set;
    traverse(ast, {
      ExportNamedDeclaration {
        if  && path.node.declaration.kind === 'const') {
          path.node.declaration.declarations.forEach(d => {
            if ) exportedNames.add;
          });
        }
      },
    });
    constantMap.set, { filePath, exportedNames });
  }
  return constantMap;
}

2. 处理 JavaScript/TypeScript 文件

对于普通的 JS/TS 文件，我们主要Zuo三件事：删除旧导入、替换引用、添加新导入。

找到并删除旧的导入语句：

traverse(ast, {
  ImportDeclaration {
    if  {
      // 记录下哪些本地变量名对应哪个常量集合
      path.node.specifiers.forEach(spec => {
        if ) {
          const importedName = spec.imported.name;
          const localName = spec.local.name;
          if ) {
            oldLocalToConstantMap.set;
            shouldRemove = true;
          }
        }
      });
      if  path.remove; // 删除整条导入语句
    }
  },
});

接着，是Zui关键的一步：替换成员访问表达式。我们需要遍历所有的 `MemberExpression`，找到形如 `Constants_expert.default.STATUS` 的节点，将其替换为简单的标识符 `STATUS`。

traverse(ast, {
  MemberExpression {
    const root = findRootIdentifier;
    if  return;
    const localName = root.name;
    if ) return;
    const constantSetName = oldLocalToConstantMap.get;
    const chain = getPropertyChain;
    let propName = null;
    // 处理 Constants_expert.default.STATUS 的情况
    if  {
      propName = chain;
    } 
    // 处理 Constants_expert.STATUS 的情况
    else if  {
      propName = chain;
    }
    if .exportedNames.has) {
      // 记录需要导入的变量
      neededImports.get.add;
      // 替换整个节点为一个简单的标识符
      path.replaceWith);
    }
  },
});

3. Vue SFC 的特殊挑战

Vue 单文件组件包含 `