基于目录为VitePress生成侧边栏
今天封装了一个用于自动生成VitePress 侧边栏的npm包，分享一下，求求帮忙Star。
github
vitepress-plugin-autobar
这应该是目前最简洁好用的生成VitePress 侧边栏的工具了。
VitePress
VitePress 是基于 Vite构建的文档网站框架，是 VuePress 的升级版本。
Vue3的文档就是用VitePress搭建的。
安装
npm install -D vitepress-plugin-autobar 复制代码
使用
import { getSideBar } from 'vitepress-plugin-autobar' module.exports = { // ... themeConfig: { // ... sidebar: getSideBar("./docs"), }, }; 复制代码How it work？
如果你的目录是下面这样的。
. ├─ docs │ ├─ .vitepress │ │ └─ config.js │ ├─ 01.Introduction │ │ └─ START.md │ ├─ 02.Utils │ │ └─ dateUtil.md │ │ └─ storeUtil.md │ └─ index.md 复制代码
调用 getSideBar 会生成下面这样的侧边栏数据。
文件的编号会被用于排序，并被自动去除。
[ { "text":"Introduction", "items":[ { "text":"START", "link":"01.Introduction/START" } ] }, { "text":"Utils", "items":[ { "text":"dateUtil", "link":"02.Utils/dateUtil" }, { "text":"storeUtil", "link":"02.Utils/storeUtil" } ] }, { "text":"Index", "items":[ { "text":"Index", "link":"index" } ] } ] 复制代码VitePress的侧边栏配置
下一步计划
如果未来VitePress支持插件，将通过插件的形式，提供自动生成侧边栏的支持。
如果你有其他需求，欢迎提issus，合理的一定会实现。
实现过程
实现过程比较简单，这里只简单贴一下流程就可以了。
新建npm包
添加TypeScript支持
添加ESLint（Quality）
代码实现：简单的遍历目录，按vitepress的配置结构生成sidebar数据。
添加rollup打包配置
添加Jest测试（Quality）
补充文档（Quality）
npm包发布
后面带Quality的流程，都是影响npm质量评分的项目，不要偷懒不做。
作者：前端lucio
链接：https://juejin.cn/post/7169108165198348302