一个脚本实现批量修改文件,减少重复工作

假设有这么一个场景,我们接收一个 React 的旧项目,该项目使用的是 js 开发的,按照正常来说,该文件的结尾应该是使用 jsx 来进行开发的,但是项目中使用的是 js 文件结尾来进行编写。

我们想要更改一下所有的文件,那么我们有什么办法去修改到这些文件,又能实现节省时间呢,通过这篇文章我们将来学习一下怎么通过这个脚本来实现这个功能。

实现

具体代码实现如下所示:

js 复制代码
const fs = require("fs");
const path = require("path");

const srcDirectory = "./src";

// 正则表达式匹配JSX标签
const jsxRegex = /<\w+(\s+[^>]*)*>/;

// 递归地遍历文件夹
function walkDir(dir, callback) {
  fs.readdirSync(dir).forEach((f) => {
    let dirPath = path.join(dir, f);
    let isDirectory = fs.statSync(dirPath).isDirectory();
    isDirectory ? walkDir(dirPath, callback) : callback(dirPath);
  });
}

// 检查文件内容是否包含JSX代码
function checkAndRename(filePath) {
  const content = fs.readFileSync(filePath, "utf8");
  if (jsxRegex.test(content)) {
    const newPath = filePath.replace(/\.js$/, ".jsx");
    fs.renameSync(filePath, newPath);
    console.log(`Renamed: ${filePath} -> ${newPath}`);
  }
}

// 开始遍历src目录
walkDir(srcDirectory, (filePath) => {
  if (path.extname(filePath) === ".js") {
    checkAndRename(filePath);
  }
});

这段代码的核心是一个递归函数,遍历所有文件夹和文件。对于每个.js 文件,脚本读取其内容并使用正则表达式检测是否存在 JSX 模式。如果检测到 JSX,脚本就会将文件重命名为.jsx。

为什么要检测他是否有写 jsx 代码,而不是是否有引入 React 的依赖包呢?答案是在 nextjs 中,你可以不导入 react 依赖包的情况下可以直接编写 jsx 代码,因为在项目中,src 目录下我们不仅要 jsx 代码,还包括了一些工具函数,这些函数是不需要 jsx 文件结尾的。

接下来我们看看该代码的运行结果,首先创建如下文件:

执行代码,最终结果如下图所示:

代码执行完成,只有 index.js 文件发送了变化,utils.js 并没有发生变化。

这个过程是自动的,可以在几秒钟内处理整个项目。

总结

自动化工具和脚本是现代软件开发的重要组成部分,能够显著提高开发效率和代码质量。通过使用简单但强大的脚本,如本文介绍的 JS 到 JSX 的转换器,开发团队可以更加专注于创造价值,而不是重复的、机械的任务。

相关推荐
eric*16886 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼22 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路43 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
whhhhhhhhhw1 小时前
Node.js核心API(fs篇)
node.js
qq_589568101 小时前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端