什么是 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
执行完命令,我们便可以在浏览器访问文档网站!
启动服务主要分为两步:
- 创建 Vite 服务;
- 执行 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