百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

使用NodeJs删除项目中多余的 console

ztj100 2024-11-07 13:39 24 浏览 0 评论


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


使用NodeJs删除项目中没有的所有 console
原文链接:https://juejin.cn/post/7305632746108878888

相关推荐

Jquery 详细用法

1、jQuery介绍(1)jQuery是什么?是一个js框架,其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成一个jQuery对象。封装成jQuery对象的目的有...

前端开发79条知识点汇总

1.css禁用鼠标事件2.get/post的理解和他们之间的区别http超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信。HTTP的工作方式是客户机与服务器之间的请求-应答协议。...

js基础面试题92-130道题目

92.说说你对作用域链的理解参考答案:作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的。...

Web前端必备基础知识点,百万网友:牛逼

1、Web中的常见攻击方式1.SQL注入------常见的安全性问题。解决方案:前端页面需要校验用户的输入数据(限制用户输入的类型、范围、格式、长度),不能只靠后端去校验用户数据。一来可以提高后端处理...

事件——《JS高级程序设计》

一、事件流1.事件流描述的是从页面中接收事件的顺序2.事件冒泡(eventbubble):事件从开始时由最具体的元素(就是嵌套最深的那个节点)开始,逐级向上传播到较为不具体的节点(就是Docu...

前端开发中79条不可忽视的知识点汇总

过往一些不足的地方,通过博客,好好总结一下。1.css禁用鼠标事件...

Chrome 开发工具之Network

经常会听到比如"为什么我的js代码没执行啊?","我明明发送了请求,为什么反应?","我这个网站怎么加载的这么慢?"这类的问题,那么问题既然存在,就需要去解决它,需要解决它,首先我们得找对导致问题的原...

轻量级 React.js 虚拟美化滚动条组件RScroll

前几天有给大家分享一个Vue自定义滚动条组件VScroll。今天再分享一个最新开发的ReactPC端模拟滚动条组件RScroll。...

一文解读JavaScript事件对象和表单对象

前言相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScrip...

Python函数参数黑科技:*args与**kwargs深度解析

90%的Python程序员不知道,可变参数设计竟能决定函数的灵活性和扩展性!掌握这些技巧,让你的函数适应任何场景!一、函数参数设计的三大进阶技巧...

深入理解Python3密码学:详解PyCrypto库加密、解密与数字签名

在现代计算领域,信息安全逐渐成为焦点话题。密码学,作为信息保护的关键技术之一,允许我们加密(保密)和解密(解密)数据。...

阿里Nacos惊爆安全漏洞,火速升级!(附修复建议)

前言好,我是threedr3am,我发现nacos最新版本1.4.1对于User-Agent绕过安全漏洞的serverIdentitykey-value修复机制,依然存在绕过问题,在nacos开启了...

Python模块:zoneinfo时区支持详解

一、知识导图二、知识讲解(一)zoneinfo模块概述...

Golang开发的一些注意事项(一)

1.channel关闭后读的问题当channel关闭之后再去读取它,虽然不会引发panic,但会直接得到零值,而且ok的值为false。packagemainimport"...

Python鼠标与键盘自动化指南:从入门到进阶——键盘篇

`pynput`是一个用于控制和监控鼠标和键盘的Python库...

取消回复欢迎 发表评论: