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

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

article 2024/12/27 17:39:38

前端开发中，重复性任务如新建文件、配置路由、生成组件等，往往耗时且容易出错。借助 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.kler.cn/a/453850.html

相关文章：

  • mysql返回N/A
  • 嵌入式单片机中Flash存储器控制与实现
  • 使用Grafana中按钮插件实现收发HTTP请求
  • 2024国赛A问题5
  • 118.【C语言】数据结构之排序(堆排序和冒泡排序)
  • 【ES6复习笔记】解构赋值（2）
  • 【数据结构与算法】数据结构与算法的基本概念
  • Ubuntu安装Apache Airflow详细指南
  • 汽车配套行业的软件许可证资源管理实践与技术解析
  • MySQL数据库(基础篇)
  • bash 中 ${-#*i} 是什么意思?
  • Java基于SSM框架的无中介租房系统小程序【附源码、文档】
  • 【C语言】判断是不是闰年
  • 遇到duilib.dll丢失怎么办？解决duilib.dll文件丢失问题的全面指南
  • 07.string类
  • AppAgent 源码 (self_explore.py)
  • 访谈积鼎科技总经理：国产CFD软件发展与未来趋势展望
  • 【运维】文件存储公共盘升级及数据迁移
  • 分布式专题(9)之Mysql高可用方案
  • Unity中实现人物残影效果
  • YashanDB 23.2 YAC -单库多实例架构多活共享集群安装部署指南
  • 【redis面试题】缓存击穿
  • mavlink移植到单片机stm32f103c8t6，实现接收和发送数据
  • 笔记：一次oracle 集群日志维护
  • AdaptFormer：用2%参数，实现视觉Transformer的高效迁移学习，性能超越全量微调（SSv2提升10%，HMDB51提升19%）
  • springboot492基于java线上历史馆藏系统(论文+源码)_kaic