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

相关推荐
Yaml42 分钟前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事3 分钟前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 分钟前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo5 分钟前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v8 分钟前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫8 分钟前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.14 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
小码编匠1 小时前
一款 C# 编写的神经网络计算图框架
后端·神经网络·c#
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
AskHarries1 小时前
Java字节码增强库ByteBuddy
java·后端