制作app免费网站模板下载,免费企业邮箱申请,图片制作微信表情包,wordpress 搜索引擎收录前端开发中#xff0c;重复性任务如新建文件、配置路由、生成组件等#xff0c;往往耗时且容易出错。借助 Node.js 的强大能力#xff0c;我们可以实现开发过程中的自动化操作#xff0c;提高效率。 文章目录 自动生成 router 配置文件自动生成组件模板动态构建导航菜单自…前端开发中重复性任务如新建文件、配置路由、生成组件等往往耗时且容易出错。借助 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 templatediv class${routeName}h1${routeName} 页面/h1/div
/templatescript
export default {name: ${routeName}
};
/scriptstyle 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});
使用方法
将脚本文件放置在 scripts 文件夹中。在项目的 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
templatediv class${componentName}Hello ${componentName}/div
/templatescript
export default {name: ${componentName},
};
/scriptstyle 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
