如何通过正则表达式自动重写代码中的导入路径别名？

本文共计727个文字，预计阅读时间需要3分钟。

可以通過以下方式改寫：

识别 import 语句的典型模式

常见 import 形式包括：

• import React from 'react';
• import { useState } from 'react';
• import Button from '@/components/Button';
• import api from '@/api/user';
• import * as utils from './utils';

正则需覆盖 from 后的字符串（单引号、双引号、反引号），并排除行内注释（//）和块注释（/*...*/）中的内容。实际处理时建议先剥离注释，再匹配 import。

基础正则与捕获逻辑

一个安全可用的基础正则（JavaScript 环境）如下：

/(import\s+(?:[\s\S]*?as\s+)?[\s\S]*?from\s+)('([^']*)'|"([^"]*)"|`([^`]*)`)(\s*;?)/g

说明：

• 第一组 $1 捕获 import ... from 前缀（含空格和导入声明）
• 第二至四组分别对应单引号、双引号、反引号内的路径（仅一者非空），可统一用 $2 || $3 || $4 获取路径字符串
• 第五组 $5 捕获结尾分号或空白

注意：该正则不处理动态 import() 或 import.meta，也不覆盖 TypeScript 的 import type —— 如需支持，需额外分支判断。

路径映射与别名替换策略

拿到原始路径后，按预设规则重写：

• 以 @/ 开头 → 替换为 @@/ 或映射到 src/（如 @/utils → src/utils）
• 以 ~/ 开头 → 映射到 src/ 或 app/（依项目约定）
• 相对路径（./ 或 ../） → 保留原结构，或统一转为基于 src 的绝对路径（需结合当前文件位置解析）
• npm 包名（无 ./ @/ ~/） → 不重写，但可加前缀如 pkg:react 实现沙箱隔离（高级用法）

示例替换函数（JS）：

str.replace(regex, (match, prefix, s1, s2, s3, suffix) => {
  const path = s1 || s2 || s3;
  let newPath = path;
  if (path.startsWith('@/')) newPath = path.replace(/^@\//, 'src/');
  else if (path.startsWith('./') || path.startsWith('../')) newPath = path;
  return `${prefix}'${newPath}'${suffix}`;
});

工程化注意事项

正则替换只是第一步，真实项目中还需考虑：

• AST 解析更可靠（如用 acorn + estree-walker），避免正则误伤模板字符串或嵌套引号
• 保留原有缩进和换行风格，避免格式混乱
• 跳过 node_modules、.d.ts、构建产物目录
• 提供 dry-run 模式预览变更，支持白名单/黑名单路径过滤
• 与 ESLint / Prettier 配合，确保重写后代码仍符合规范