开发中经常会有这样的时刻:你 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);
在上面的这段代码当中,有以下三个变量,其中:
- directoryPath 是你想要处理的.tsx 文件所在的目录。
- codeToInsertAtStart 是将要添加到每个文件顶部的注释。
- codeToInsertBeforeFunction 是在每个函数组件声明之前插入的注释。
processFile 函数是一个异步函数,他的主要工作用于处理单个 tsx 文件。
使用 fs.readFile 异步读取文件内容。通过正则表达式,替换掉所有的 console.log 语句。将 codeToInsertAtStart 添加到文件内容的开头。
使用一系列正则表达式来定位不同形式的函数组件声明,包括那些使用 export default 导出的。如果找到匹配的函数声明,就在其前面插入 codeToInsertBeforeFunction。修改完成后,用 fs.writeFile 将新内容写回文件。
processFiles 是另一个异步函数,用于处理整个目录:
- 使用 fs.readdir 读取目录下的所有文件。
- 遍历这些文件,对于文件扩展名为 .tsx 的文件:计算文件的完整路径。并调用 processFile 函数来处理每个文件。
最后,processFiles(directoryPath) 调用开始执行脚本,处理指定目录下的所有文件。
这是运行前的代码,如下图所示:
最终代码运行的效果如下所示:
总结
通过本篇文章,我们可以认识到通过 nodejs 的文件模块,并且使用正则来处理文件,可以大大减少我们对于一些公共逻辑的处理,简短了没必要的时间浪费。