当前位置： 首页 > news >正文

Node.js 助力前端开发：自动化操作实战

news 2025/7/5 3:33:20

前端开发中，重复性任务如新建文件、配置路由、生成组件等，往往耗时且容易出错。借助 Node.js 的强大能力，我们可以实现开发过程中的自动化操作，提高效率。

文章目录

  • 自动生成 router 配置文件
  • 自动生成组件模板
  • 动态构建导航菜单
  • 自动检测并删除未使用的文件
  • 前端性能报告生成

自动生成 router 配置文件

以下是脚本需要实现的主要功能：

  • 读取命令行参数（如路由名称）。

  • 根据模板文件生成路由配置和组件文件。

  • 自动更新 router/index.js 文件。

    脚本文件：generateRoute.js

const fs = require('fs');
const path = require('path');// 获取命令行参数
const args = process.argv.slice(2);
const [routeName] = args;if (!routeName) {console.error('请提供路由名称！');process.exit(1);
}// 定义文件路径
const routerPath = path.resolve(__dirname, '../src/router/index.js');
const componentPath = path.resolve(__dirname, `../src/views/${routeName}`);
const componentFile = `${componentPath}/index.vue`;// 路由模板
const routeTemplate = `
{path: '/${routeName}',name: '${routeName}',component: () => import('@/views/${routeName}/index.vue')
},
`;// 组件模板
const componentTemplate = `<template><div class="${routeName}"><h1>${routeName} 页面</h1></div>
</template><script>
export default {name: '${routeName}'
};
</script><style scoped>
.${routeName} {
}
</style>`;// 创建组件文件夹及文件
if (!fs.existsSync(componentPath)) {fs.mkdirSync(componentPath, { recursive: true });
}
fs.writeFileSync(componentFile, componentTemplate);
console.log(`组件文件已创建: ${componentFile}`);// 更新路由文件
let routerContent = fs.readFileSync(routerPath, 'utf-8');
const insertPosition = routerContent.lastIndexOf(']');
routerContent =routerContent.slice(0, insertPosition) + routeTemplate + routerContent.slice(insertPosition);
fs.writeFileSync(routerPath, routerContent);
console.log(`路由配置已更新: ${routerPath}`);

使用方法：

  1. 将脚本文件放置在 scripts 文件夹中。
  2. 在项目的 package.json 文件中添加命令：
{"scripts": {"generate:route": "node scripts/generateRoute.js"}
}

运行以下命令，自动生成路由及组件：

npm run generate:route <路由名称>

自动生成组件模板

生成 Vue/React 组件模板文件夹，包括 index.vue/index.jsx、style.scss 等文件。
支持命令行参数指定组件类型（页面组件、通用组件）。

// generateComponent.js
const fs = require('fs');
const path = require('path');function generateComponent(componentName, type = 'common') {const baseDir = type === 'page' ? '../src/pages/' : '../src/components/';const dirPath = path.resolve(__dirname, `${baseDir}${componentName}`);const filePath = `${dirPath}/index.vue`;const template = `
<template><div class="${componentName}">Hello ${componentName}</div>
</template><script>
export default {name: '${componentName}',
};
</script><style scoped>
.${componentName} {
}
</style>`;if (!fs.existsSync(dirPath)) {fs.mkdirSync(dirPath, { recursive: true });fs.writeFileSync(filePath, template);console.log(`组件模板已生成：${filePath}`);} else {console.error('组件已存在！');}
}
generateComponent(process.argv[2], process.argv[3]);

命令：

node generateComponent.js MyComponent page

动态构建导航菜单

用途：根据文件结构动态生成菜单配置（如侧边栏、顶部导航）
读取项目的文件夹结构，自动生成导航菜单的 JSON 配置。
支持递归扫描，动态构建多层菜单。

const fs = require('fs');
const path = require('path');function generateMenu(dir, baseRoute = '') {const files = fs.readdirSync(dir);return files.map((file) => {const fullPath = path.join(dir, file);const isDir = fs.lstatSync(fullPath).isDirectory();return {path: `${baseRoute}/${file}`,name: file,...(isDir ? { children: generateMenu(fullPath, `${baseRoute}/${file}`) } : {})};});
}const menu = generateMenu(path.resolve(__dirname, '../src/pages'));
fs.writeFileSync('./menu.json', JSON.stringify(menu, null, 2));
console.log('导航菜单配置已生成：menu.json');

自动检测并删除未使用的文件

扫描项目中的所有代码文件，提取其中引用的资源路径。
对比项目中的实际文件，标记为未使用的文件，并提示是否删除。
代码实现：

const fs = require('fs');
const path = require('path');
const glob = require('glob');const projectDir = path.resolve(__dirname, '../src'); // 项目源码目录
const assetsDir = path.resolve(__dirname, '../src/assets'); // 静态资源目录// 扫描源码中的引用资源
function getUsedFiles() {const files = glob.sync(`${projectDir}/**/*.{js,vue,html}`, { nodir: true });const usedFiles = new Set();files.forEach((file) => {const content = fs.readFileSync(file, 'utf-8');const regex = /['"]?assets\/([^'"]+\.(png|jpg|jpeg|svg|gif|webp|ico))['"]?/g;let match;while ((match = regex.exec(content)) !== null) {usedFiles.add(match[1]);}});return usedFiles;
}// 检测未使用的文件
function getUnusedFiles() {const usedFiles = getUsedFiles();const allFiles = glob.sync(`${assetsDir}/**/*`, { nodir: true }).map((file) =>path.relative(assetsDir, file));const unusedFiles = allFiles.filter((file) => !usedFiles.has(file));return unusedFiles;
}// 删除未使用的文件
function deleteUnusedFiles(files) {files.forEach((file) => {const fullPath = path.join(assetsDir, file);fs.unlinkSync(fullPath);console.log(`删除文件：${fullPath}`);});
}const unusedFiles = getUnusedFiles();
if (unusedFiles.length > 0) {console.log('未使用的文件：', unusedFiles);// 提示用户是否删除const readline = require('readline').createInterface({input: process.stdin,output: process.stdout,});readline.question('是否删除未使用的文件？(y/n): ', (answer) => {if (answer.toLowerCase() === 'y') {deleteUnusedFiles(unusedFiles);console.log('未使用的文件已删除。');} else {console.log('未使用的文件未被删除。');}readline.close();});
} else {console.log('没有未使用的文件。');
}

使用方法：
将脚本保存为 detectUnusedFiles.js。
在项目目录中运行：

node detectUnusedFiles.js

前端性能报告生成

统计 dist 目录下的文件大小并生成报告。
遍历构建后的 dist 目录，读取文件大小。
计算各类文件的总大小，并按文件类型分类统计。
输出 JSON 格式的性能报告。

const fs = require('fs');
const path = require('path');
const glob = require('glob');const distDir = path.resolve(__dirname, '../dist'); // 构建目录// 获取文件大小
function getFileSize(filePath) {return fs.statSync(filePath).size;
}// 生成性能报告
function generatePerformanceReport() {const files = glob.sync(`${distDir}/**/*`, { nodir: true });const report = {totalSize: 0,fileTypeStats: {},files: [],};files.forEach((file) => {const size = getFileSize(file);const ext = path.extname(file).slice(1) || 'unknown';report.totalSize += size;if (!report.fileTypeStats[ext]) {report.fileTypeStats[ext] = 0;}report.fileTypeStats[ext] += size;report.files.push({file: path.relative(distDir, file),size: `${(size / 1024).toFixed(2)} KB`,});});const reportFile = path.join(distDir, 'performance-report.json');fs.writeFileSync(reportFile, JSON.stringify(report, null, 2));console.log(`性能报告已生成：${reportFile}`);
}generatePerformanceReport();

性能报告示例输出：

{"totalSize": 3502876,"fileTypeStats": {"js": 1203456,"css": 452876,"png": 145000,"html": 1000},"files": [{"file": "index.html","size": "1.00 KB"},{"file": "js/app.js","size": "1175.38 KB"}]
}

使用方法：
将脚本保存为 generatePerformanceReport.js。
在项目目录中运行：

node generatePerformanceReport.js
http://www.lryc.cn/news/510391.html

相关文章：

  • HuggingFace peft LoRA 微调 LLaMA
  • 记-编译magisk_v22
  • 前端登录业务
  • 项目2路由交换
  • 易语言 OCR 文字识别
  • 云手机+YouTube：改变通信世界的划时代技术
  • C++-----------映射
  • 清空DNS 缓存
  • 计算机网络习题( 第3章 物理层 第4章 数据链路层 )
  • UE5 崩溃问题汇总！！！
  • 基于ArcGIS Pro的SWAT模型在流域水循环、水生态模拟中的应用及案例分析；SWAT模型安装、运行到结果读取全流程指导
  • Docker下TestHubo安装配置指南
  • AWS、Google Cloud Platform (GCP)、Microsoft Azure、Linode和 桔子数据 的 价格对比
  • 基础优化方法
  • v语言介绍
  • Ubuntu安装Apache Airflow详细指南
  • 【数据可视化复习方向】
  • CentOS下安装RabbitMQ
  • 探究音频丢字位置和丢字时间对pesq分数的影响
  • 音视频入门基础：MPEG2-TS专题（23）——通过FFprobe显示TS流每个packet的信息
  • Bert各种变体——RoBERTA/ALBERT/DistillBert
  • Go入门篇：（一）golang的安装和编辑工具安装
  • 【技术实战】R语言统计分析与可视化从入门到精通
  • 【Lua之·Lua与C/C++交互·Lua CAPI访问栈操作】
  • LabVIEW实现LoRa通信
  • 【数字化】华为数字化转型架构蓝图-2
  • 【Agent】AutoGen Studio2.0开源框架-UI层环境安装+详细操作教程（从0到1带跑通智能体AutoGen Studio）
  • Linux 网络配置基础
  • 科技创新 数智未来｜清科·沙丘投研院走进竹云
  • Java 常见面试算法题汇总与解析