技术分享｜Vitepress 的实现原理

什么是 Vitepress？

Vitepress 是由 Vite 和 Vue 驱动的静态站点生成器，通过获取 Markdown 编写的内容，并可以生成对应的静态 HTML 页面。我们经常使用 Vitepress 构建博客等静态网站，本文主要解析一下 Vitepress 的实现原理，下面就开始吧！

原理

初始化项目

根据官方文档推荐，我们执行以下命令初始化项目：

npx vitepress init

执行完命令便会进入一个设置界面，通过设置项目名等参数，最终生成一个 vitepress 项目。

我们都知道，npx vitepress init 实际上等同于：

npm i -g vitepress
vitepress init

很好理解，先全局安装 vitepress，再执行 vitepress init命令：

先通过 @clack/prompts 开启命令行 UI 界面，用户进行初始化配置：

// src/node/init/init.ts
import { group } from '@clack/prompts'
 
const options: ScaffoldOptions = await group(
    {
      root: () =>
        text({
          message: 'Where should VitePress initialize the config?',
          initialValue: './',
          validate(value) {
            // TODO make sure directory is inside
          }
        }),
    
      title: () =>
        text({
          message: 'Site title:',
          placeholder: 'My Awesome Project'
        }),
    // ...以下省略
)

再根据配置项从 template 文件夹中拉取模板文件，完成项目的初始化。

启动服务

在 Vitepress 项目中，我们通过执行以下命令启动文档服务：

vitepress dev

执行完命令，我们便可以在浏览器访问文档网站！

启动服务主要分为两步：

1. 创建 Vite 服务；
2. 执行 Vite 插件；

创建 Vite 服务

// src/node/server.ts
import { createServer as createViteServer, type ServerOptions } from 'vite'
import { resolveConfig } from './config'
import { createVitePressPlugin } from './plugin'
 
export async function createServer(
  root: string = process.cwd(),
  serverOptions: ServerOptions & { base?: string } = {},
  recreateServer?: () => Promise<void>
) {
  // 读取 vitepress 配置
  const config = await resolveConfig(root)
 
  if (serverOptions.base) {
    config.site.base = serverOptions.base
    delete serverOptions.base
  }
 
  // 创建 vit