我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

如何用node快速将路由信息导出为excel

近日在工作交接的时，领导说需要把目前所有项目的路由信息整理出来，方便他们快速定位页面文件。正好最近在学习node，这不正好对上了，嘿嘿！

创建routes.js

先将路由文件中的routes提出来存到routes.js中，然后将组件引入语句改为字符串：

• 简单的路由，直接替换下。

{
  path: "/template-list",
  name: "templateList",
  - component: () => import("@/page/template/list/index.vue"),
  + component: "src/page/template/list/index.vue",
},

• 头部引入的路由，把import替换为const,from替换为 = 。我真是个聪明的小机灵鬼🧚‍♀️

- import index from "@/page/home/index.vue";
+ const index = "src/page/home/index.vue";
{
  path: "/",
  name: "index",
  component: index,
  meta: {
    title: "XXXX"
  }
},

然后就可得到如下文件：

const index = "src/page/home/index.vue";
export const routes = [
	{
		path: "/",
		name: "index",
		component: index,
		meta: {
			title: "首页",
		},
	},
	{
		path: "/template-list",
		name: "templateList",
		component: "src/page/template/list/index.vue",
		meta: {
			title: "模板列表",
		},
	},
	{
		path: "/template-detail-list",
		name: "templateDetailList",
		component: "src/page/template/DetailList/index.vue",
		meta: {
			title: "模板详情列表",
		},
	},
	{
		path: "/enterprise",
		name: "enterprise",
		component: "src/pages/enterprise/index.vue",
		meta: {
			title: "信息维护",
		},
		children: [
			{
				path: "account",
				name: "accountSettings",
				component: "src/pages/enterprise/accountSettings/index.vue",
				meta: {
					title: "账号设置",
				},
			},
		],
	},
];

获取routes.js

routes是处理完了，那么如何在node中获取到这个文件里的内容呢？首先想到的是存储为json文件直接读，但是考虑到有参数存在这个法子就不行了。突然灵机一动，想到之前看源码时读到的await import(`xxxxx${xxx}`)。嘿嘿，就你了！💡

import { resolve } from "node:path";
import { cwd } from "node:process";
const directory = cwd();
const routeFile = resolve(directory, "routes.js");

async function run() {
	const { routes } = await import(`${routeFile}`);
	console.log(routes);
}
run().catch((err) => {
	console.log(err);
});

完美！

处理routes数据

数据拿到手了，现在就要转成方便存进excel的格式啦~

function handleRoutesData(routes, route = null) {
	const res = routes.reduce((a, item) => {
		// 如果当前路由不是/开头的，就用父路由拼接下
		if (route && item.path[0] !== "/") {
			item.path = `${route.path}/${item.path}`;
		}
		// 插入当前路由
		a.push({
			title: item?.meta?.title || "",
			url: item.path,
			route: item.component,
		});
		// 如果有子路由 递归下
		if (item.children) {
			return a.concat(handleRoutesData(item.children, item));
		}
		return a;
	}, []);
	return res;
}
const routesData = handleRoutesData(routes);

完美！✨✨

导出excel

数据有啦，现在就能开始导出了！ 因为之前没接触过excel生成的相关插件，所以我这里选择了可以极快上手使用的node-xlsx，它是基于SheetJS的。

安装一下

pnpm i node-xlsx

引入一下

import xlsx from 'node-xlsx';

导出数据生成

这个插件导入的数据是一个二维数组，像这样的：

const data = [
  [1, 2, 3],
  [true, false, null, 'sheetjs'],
  ['foo', 'bar', new Date('2014-02-19T14:30Z'), '0.3'],
  ['baz', null, 'qux'],
];

所以，我稍微改了一下处理routes的函数

		// 插入当前路由
		// a.push({
		// 	title: item?.meta?.title || "",
		// 	url: item.path,
		// 	route: item.component,
		// });
		a.push([item?.meta?.title || "", item.path, item.component]);

就得到了一个二维数组 然后再把头部标题塞进去就行啦！

const routesData = handleRoutesData(routes);
routesData.unshift(["页面", "url路径", "页面文件路径"]);

导出操作

import { writeFileSync } from "node:fs";

var buffer = xlsx.build([{ name: "routesSheet", data: routesData }]);
writeFileSync(resolve(directory, "routes.xlsx"), buffer);

jiangjiangjiang~大功告成！node运行下，目录下就会生成routes.xlsx 打开看看是不是我想要的样子： emmmmmm，应该再稍稍优化下。加个列宽。(!clos说明)

const sheetOptions = { "!cols": [{ wch: 20 }, { wch: 50 }, { wch: 200 }] };
var buffer = xlsx.build([{ name: "routesSheet", data: routesData }], { sheetOptions });

这下子就舒服多啦！

多文件导出

新的问题又出现了，因为有多个项目，所以会整理出多个routes.js。所以，再稍稍优化下：

• 创建一个routes文件夹，将所有项目出现的整理出来的routes放这里，并且在routes文件中导出excel文件名。

• 创建一个excel文件夹，用于存放excel
• 改造下代码

const routeDirectory = resolve(directory, "routes");// 路由目录
const excelDirectory = resolve(directory, "excel");// excel目录
async function run() {
  // 获取路由目录下所有文件
	const files = readdirSync(routeDirectory);
	for (const file of files) {
		const routeFile = resolve(routeDirectory, file);
    // 取得文件名
		const { routes, fileName } = await import(`${routeFile}`);
		const routesData = handleRoutesData(routes);
		routesData.unshift(["页面", "url路径", "页面文件路径"]);
		const sheetOptions = { "!cols": [{ wch: 20 }, { wch: 50 }, { wch: 200 }] };
		var buffer = xlsx.build([{ name: "routesSheet", data: routesData }], { sheetOptions });
    // 存放~
		writeFileSync(resolve(excelDirectory, `${fileName}.xlsx`), buffer);
	}
}

当文件量大的时候，可以加个spinner

结尾

至此，一个大致能用的导出工具就搞定啦！摸鱼时间+1+1+1+1🐟🐟🐟🐟🐟
完整代码