开发中经常会有这样的时刻：你 review 代码，发现了一大堆的 console.log 语句散落在各处。这些在调试时无疑非常有用，但是太多了 console.log，有时候我们会忘记删除了，这样就会导致控制台上太多无关的输出。

如果这些问题在部署生产版本时，它们就显得多余，甚至可能泄漏敏感信息。

除此之外，有时你还希望在所有组件中添加统一的注释或者特定的代码片段，以增强代码的可维护性。手动执行这些任务是极为繁琐的。

本文将通过一个 Node.js 脚本，展示如何自动化这个过程，让你的代码更干净、更一致。

功能接收

在接下来的这些代码中，我们这段代码主要做了以下两个事情：

• 移除所有 console.log 调试语句：这可以防止不必要的日志信息在生产环境中显示，也使代码看起来更清爽。
• 在文件开头和函数组件声明前添加注释：这有助于维护者了解代码的结构和特定区块的目的。

通过这两个功能，我们匹配到特定的文件进行全局替换，大大提高了我们的开发效率。

具体实现

const fs = require("fs").promises;
const path = require("path");

// 设置目录路径
const directoryPath = path.join(__dirname, "src"); // 替换为你的目录路径

// 定义要插入文件开始的代码
const codeToInsertAtStart = "// 这是新添加的第一行代码\n";
// 定义要插入函数组件声明前的代码
const codeToInsertBeforeFunction = "\n// 这是在函数组件声明前添加的代码\n";

// 处理单个文件
async function processFile(filePath) {
  try {
    // 读取文件内容
    let data = await fs.readFile(filePath, "utf8");

    // 移除所有console.log语句
    data = data.replace(/console\.log\(.*?\);?/g, "");

    // 在文件开始添加代码
    data = codeToInsertAtStart + data;

    // 构建匹配function组件声明的正则表达式，包括export default
    const functionDeclarationPatterns = [
      /export\s+default\s+function\s+\w+\s*\(.*?\)\s*{/,
      /export\s+default\s+function\s*\(.*?\)\s*{/,
      /function\s+\w+\s*\(.*?\)\s*{/,
      /const\s+\w+\s*=\s*\(.*?\)\s*=>\s*{/,
    ];

    // 遍历所有正则表达式，如果找到匹配，则在匹配项前添加代码
    for (const pattern of functionDeclarationPatterns) {
      if (pattern.test(data)) {
        data = data.replace(
          pattern,
          (match) => codeToInsertBeforeFunction + match
        );
        break; // 匹配到一个之后就不需要继续检查了
      }
    }

    // 将修改后的数据写回文件
    await fs.writeFile(filePath, data, "utf8");
  } catch (err) {
    // 打印错误信息
    console.error("Error processing file:", filePath, err);
  }
}

// 处理指定目录下所有文件
async function processFiles(directory) {
  try {
    // 读取目录中的文件列表
    const files = await fs.readdir(directory);
    // 遍历文件列表
    for (let file of files) {
      // 确保只处理.tsx文件
      if (path.extname(file) === ".tsx") {
        // 获取文件完整路径
        const filePath = path.join(directory, file);
        // 处理单个文件
        await processFile(filePath);
      }
    }
  } catch (err) {
    // 打印错误信息
    console.error("Error processing directory:", err);
  }
}

// 执行文件处理函数
processFiles(directoryPath);

在上面的这段代码当中，有以下三个变量，其中：

1. directoryPath 是你想要处理的.tsx 文件所在的目录。
2. codeToInsertAtStart 是将要添加到每个文件顶部的注释。
3. codeToInsertBeforeFunction 是在每个函数组件声明之前插入的注释。

processFile 函数是一个异步函数，他的主要工作用于处理单个 tsx 文件。

使用 fs.readFile 异步读取文件内容。通过正则表达式，替换掉所有的 console.log 语句。将 codeToInsertAtStart 添加到文件内容的开头。

使用一系列正则表达式来定位不同形式的函数组件声明，包括那些使用 export default 导出的。如果找到匹配的函数声明，就在其前面插入 codeToInsertBeforeFunction。修改完成后，用 fs.writeFile 将新内容写回文件。

processFiles 是另一个异步函数，用于处理整个目录：

1. 使用 fs.readdir 读取目录下的所有文件。
2. 遍历这些文件，对于文件扩展名为 .tsx 的文件：计算文件的完整路径。并调用 processFile 函数来处理每个文件。

最后，processFiles(directoryPath) 调用开始执行脚本，处理指定目录下的所有文件。

这是运行前的代码，如下图所示：

最终代码运行的效果如下所示：

总结

通过本篇文章，我们可以认识到通过 nodejs 的文件模块，并且使用正则来处理文件，可以大大减少我们对于一些公共逻辑的处理，简短了没必要的时间浪费。