如何用JS正则replace给含primereact的import语句添加.cjs后缀？

要实现给包含primereact的import语句添加指定的.cjs后缀路径，你需要构造精准捕获路径片段的正则表达式，结合JavaScript的replace函数完成替换。

核心思路 #

1. 匹配符合格式的import语句，精准捕获两个关键片段：
   • 完整的primereact/xxx（或多层路径如primereact/xxx/yyy）导入路径
   • 路径的最后一段文件名（如button、item）
2. 通过replace的回调函数，将原路径替换为原路径/最后一段文件名.cjs

代码实现 #

基础版（适配单层路径，如primereact/button） #

// 示例代码文本
const originalCode = `
import { Button } from "primereact/button";
import { InputText } from 'primereact/inputtext';
import { Card } from "primereact/card";
`;

// 执行替换
const updatedCode = originalCode.replace(
  // 正则：匹配import语句，捕获完整路径和最后一段文件名
  /import\s+.*?from\s+["'](primereact\/([^\/"']+))["'];/g,
  (match, fullPath, fileName) => {
    // 将原路径替换为 原路径/文件名.cjs
    return match.replace(fullPath, `${fullPath}/${fileName}.cjs`);
  }
);

console.log(updatedCode);

输出结果：

import { Button } from "primereact/button/button.cjs";
import { InputText } from 'primereact/inputtext/inputtext.cjs';
import { Card } from "primereact/card/card.cjs";

进阶版（适配多层路径，如primereact/menu/item） #

如果需要支持多层嵌套的导入路径，只需调整正则表达式，确保能捕获到最后一段文件名：

const originalCode = `
import { MenuItem } from "primereact/menu/item";
import { TabPanel } from 'primereact/tabview/tabpanel';
`;

const updatedCode = originalCode.replace(
  // 正则：支持捕获多层路径下的最后一段文件名
  /import\s+.*?from\s+["'](primereact\/(?:.*\/)?([^\/"']+))["'];/g,
  (match, fullPath, fileName) => {
    return match.replace(fullPath, `${fullPath}/${fileName}.cjs`);
  }
);

console.log(updatedCode);

输出结果：

import { MenuItem } from "primereact/menu/item/item.cjs";
import { TabPanel } from 'primereact/tabview/tabpanel/tabpanel.cjs';

正则表达式解释 #

以进阶版正则为例：

• import\s+：匹配import关键字及后续空格
• .*?：非贪婪匹配import语句中间的内容（如{ Button }），避免过度匹配
• from\s+：匹配from关键字及后续空格
• ["']：匹配单引号或双引号（兼容两种引号格式）
• (primereact\/(?:.*\/)?([^\/"']+))：
  • 外层捕获组：完整的primereact开头的导入路径
  • (?:.*\/)?：非捕获组，匹配多层路径的前缀（如menu/），?:表示不捕获该组内容
  • 内层捕获组：匹配路径的最后一段文件名（[^\/"']+表示匹配除了/、引号之外的所有字符）
• ["'];：匹配结尾的引号和分号
• g：全局修饰符，处理所有符合条件的import语句

为什么原有正则无法实现 #

你之前的正则.*(import)+.*(primereact)+.*仅能模糊匹配包含import和primereact的行，但没有捕获需要修改的路径片段，无法完成精准的路径拼接替换。

内容的提问来源于stack exchange，提问作者Monkey D. Teach