今天封装了一个用于自动生成VitePress 侧边栏的npm包，分享一下，求求帮忙Star。
github
vitepress-plugin-autobar
这应该是目前最简洁好用的生成VitePress 侧边栏的工具了。
VitePress
VitePress 是基于 Vite构建的文档网站框架，是 VuePress 的升级版本。
Vue3的文档就是用VitePress搭建的。
安装
代码语言：javascript复制npm install -D vitepress-plugin-autobar使用
代码语言：javascript复制import { getSideBar } from 'vitepress-plugin-autobar'
module.exports = {
// ...
themeConfig: {
// ...
sidebar: getSideBar("./docs"),
},
};How it work？
如果你的目录是下面这样的。
代码语言：javascript复制.
├─ docs
│ ├─ .vitepress
│ │ └─ config.js
│ ├─ 01.Introduction
│ │ └─ START.md
│ ├─ 02.Utils
│ │ └─ dateUtil.md
│ │ └─ storeUtil.md
│ └─ index.md调用 getSideBar 会生成下面这样的侧边栏数据。
文件的编号会被用于排序，并被自动去除。
代码语言：javascript复制[
{
"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质量评分的项目，不要偷懒不做。
参考资料
vuepress-plugin-autobar
制作一个同时支持 ESM, CJS, Browser 的 Package
