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

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

自动生成 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