使用NodeJs删除项目中没有的所有 console

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

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

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

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

功能接收

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

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

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

具体实现

js 复制代码
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 的文件模块,并且使用正则来处理文件,可以大大减少我们对于一些公共逻辑的处理,简短了没必要的时间浪费。

相关推荐
好开心3311 分钟前
axios的使用
开发语言·前端·javascript·前端框架·html
Domain-zhuo21 分钟前
Git常用命令
前端·git·gitee·github·gitea·gitcode
菜根Sec1 小时前
XSS跨站脚本攻击漏洞练习
前端·xss
0zxm1 小时前
06 - Django 视图view
网络·后端·python·django
m0_748257181 小时前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工1 小时前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
小_太_阳2 小时前
Scala_【1】概述
开发语言·后端·scala·intellij-idea
百万蹄蹄向前冲2 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
智慧老师2 小时前
Spring基础分析13-Spring Security框架
java·后端·spring
Anlici2 小时前
three.js建立3D模型展示地球+高亮
前端·数据可视化·canvas