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

阿智@112024-12-27 17:13

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

文章目录

自动生成 router 配置文件

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

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

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

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

    脚本文件：generateRoute.js

bash 复制代码 
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 文件中添加命令：
bash 复制代码 
{
  "scripts": {
    "generate:route": "node scripts/generateRoute.js"
  }
}

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

bash 复制代码 
npm run generate:route <路由名称>

自动生成组件模板

生成 Vue/React 组件模板文件夹，包括 index.vue/index.jsx、style.scss 等文件。

支持命令行参数指定组件类型（页面组件、通用组件）。

bash 复制代码 
// 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]);

命令：

bash 复制代码 
node generateComponent.js MyComponent page

动态构建导航菜单

用途：根据文件结构动态生成菜单配置（如侧边栏、顶部导航）

读取项目的文件夹结构，自动生成导航菜单的 JSON 配置。

支持递归扫描，动态构建多层菜单。

bash 复制代码 
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');

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

扫描项目中的所有代码文件，提取其中引用的资源路径。

对比项目中的实际文件，标记为未使用的文件，并提示是否删除。

代码实现：

bash 复制代码 
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。

在项目目录中运行：

bash 复制代码 
node detectUnusedFiles.js

前端性能报告生成

统计 dist 目录下的文件大小并生成报告。

遍历构建后的 dist 目录，读取文件大小。

计算各类文件的总大小，并按文件类型分类统计。

输出 JSON 格式的性能报告。

bash 复制代码 
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();

性能报告示例输出：

bash 复制代码 
{
  "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。

在项目目录中运行：

bash 复制代码 
node generatePerformanceReport.js
相关推荐
上海运维Q先生6 分钟前
面试题整理19----Metric的几种类型？分别是什么？
运维·服务器·面试
刺客-Andy12 分钟前
React 第十九节 useLayoutEffect 用途使用技巧注意事项详解
前端·javascript·react.js·typescript·前端框架
hao_wujing15 分钟前
现代网络负载均衡与代理导论
运维·网络·负载均衡
谢道韫66616 分钟前
今日总结 2024-12-27
开发语言·前端·javascript
朝九晚五ฺ16 分钟前
【Linux探索学习】第二十三弹——理解文件系统：认识硬件、探索文件在硬件上的存储问题
linux·运维·学习
嘤嘤怪呆呆狗27 分钟前
【插件】vscode Todo Tree 简介和使用方法
前端·ide·vue.js·vscode·编辑器
大今野32 分钟前
node.js和js
开发语言·javascript·node.js
LLLuckyGirl~34 分钟前
node.js之---单线程异步非阻塞 I/O
node.js
ᥬ 小月亮39 分钟前
Js前端模块化规范及其产品
开发语言·前端·javascript
匹马夕阳43 分钟前
容器化平台Docker初识
运维·docker·容器
热门推荐
01新手学习VR全景需要知道的几个问题02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间06HCIA-datacom数通题库和录播视频资料07docker安装启动问题解决排查08【一文读懂】NTN（非地面网络）技术介绍09支付宝短视频平台创作分成激励项目10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）