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

相关推荐
练习两年半的工程师25 分钟前
使用vite构建一个react网站,并部署到Netlify上
前端·react.js·前端框架
大叔是90后大叔1 小时前
go生成4位随机数字
开发语言·后端·golang
天农学子1 小时前
input file检验成功之后才可以点击
javascript·html·easyui
2401_857617621 小时前
共享汽车管理:SpringBoot框架的创新应用
spring boot·后端·汽车
王哲晓1 小时前
第三十六章 Vue之路由重定向/404页面设置/路径模式设置
前端·vue.js
Fan_web2 小时前
Node.js——fs模块-相对路径的bug与解决
开发语言·前端·node.js·bug
mit6.8242 小时前
[Docker#3] LXC | 详解安装docker | docker的架构与生态
linux·运维·后端·docker·容器
2401_857439692 小时前
汽车共享管理:SpringBoot技术的应用与挑战
spring boot·后端·汽车
拼图2092 小时前
Vue中箭头函数和普通函数的区别
前端·javascript·vue.js
A5资源网2 小时前
wordpress实用功能A5资源网同款 隐藏下载框 支付框 需要登录才能查看隐藏的内容
开发语言·javascript·ecmascript