构建流程

概述

30 秒代码构建流程使用 Astro 将 Markdown 和 YAML 文件中的原始内容（代码片段和集合）转换为完全优化的静态网站。该流程包括内容准备、搜索索引生成、资产优化和用于部署的文件生成。

构建命令

该项目使用 npm 脚本来触发不同的构建过程

命令	描述	用例
`npm run build`	完整的生产构建	部署
`npm run dev`	具有快速高亮显示的开发构建	本地开发
`npm run watch`	具有文件监视功能的开发构建	活跃的内容创建
`npm start`	标准的开发构建	本地开发
`npm run observe`	带有文件监视的标准开发	具有完整高亮显示的内容创建

来源： package.json43-55

构建管道

来源： bin/prepare28-62 package.json43-55

内容准备流程

内容准备过程是构建管道的关键部分，它将原始内容文件转换为网站的结构化数据。

准备过程包括两种高亮显示模式

快速高亮显示：在开发过程中使用 Prism 以加快构建速度
完整高亮显示：在生产环境中为更高质量的高亮显示使用 Shiki

来源： bin/prepare28-70 src/lib/contentUtils/contentUtils.js

资源处理

构建过程优化了用于生产的图片和其他资产

资产处理器

处理 /splash 和 /cover 目录中的图片
生成每张图片的多个尺寸
将图片转换为 WebP 格式以进行优化
复制静态资产（图标、插图）而不进行处理

来源： bin/prepare30 src/lib/contentUtils/assetHandler.js42-88

模块加载系统

构建过程采用模块化架构，按需加载不同的组件

来源： src/lib/loader.js1-77 bin/prepare36-45

搜索索引生成

构建过程为网站搜索功能生成搜索索引

搜索系统

创建倒排索引以进行高效搜索
处理用于全文搜索的内容标记
生成 n-gram 以进行模糊匹配
将搜索索引写入 public/search-data.json

来源： src/lib/search/documentIndex.js1-76 src/lib/preparedQueries.js77-110

输出生成

构建过程的最后阶段生成各种输出文件

输出	描述	生成器 (Generator)
Astro 内容	Astro 的页面数据	`AstroContent.generate()`
搜索索引	搜索功能数据	`SearchIndex.generate()`
重定向	URL 重定向文件	`Redirects.generate()`
RSS feed	内容 feed	`Feed.generate()`
站点地图	网站导航数据	`Sitemap.generate()`
时间戳	构建时间戳	`TimestampDump.generate()`
组件	处理后的组件	`ContentComponents.prepare()`

来源： bin/prepare49-61 src/lib/timestampDump.js1-12 src/lib/contentComponents.js1-42

组件处理

内容组件处理为网站准备脚本和样式

来源： src/lib/contentComponents.js1-42

开发版与生产版构建

构建过程针对开发和生产有不同的配置

功能	开发构建	生产构建
代码高亮	快速（Prism）	完整（Shiki）
资产处理	已跳过（除非强制）	完整处理
文件监控	可用	不可用
构建时间	针对速度进行了优化	针对质量进行了优化
输出	本地开发服务器	用于部署的静态文件

来源： bin/prepare28-96 package.json43-55

监视模式

对于活动开发，构建过程包含一个监视模式，该模式在内容更改时自动重建

来源： bin/prepare87-95 src/lib/contentUtils/fileWatcher.js1-13

Astro 构建流程

在内容准备之后，Astro 构建系统会编译网站

Astro 加载准备好的内容文件
组件使用正确的数据进行渲染
使用 Astro 模板系统生成页面
CSS 和 JavaScript 被处理和优化
静态资产包含在构建中
最终的静态站点输出到 dist 目录

来源： package.json51

构建输出

构建过程生成以下输出结构

dist/               # Main output directory
├── _astro/         # Astro-generated assets
├── assets/         # Optimized assets
│   ├── cover/      # Cover images
│   ├── icons/      # Icon files
│   ├── illustrations/ # Illustration files
│   └── splash/     # Splash images
├── components/     # Component assets
│   ├── scripts/    # Component scripts
│   └── styles/     # Component styles
├── feed.xml        # RSS feed
├── search-data.json # Search index
├── sitemap.xml     # Site map
├── _redirects      # Netlify redirects
└── index.html      # Main page (and other HTML files)

来源： .gitignore128-156

构建系统依赖项

构建系统依赖于几个关键的依赖项

Astro：静态网站生成器
Sharp：图像处理库
Sass：CSS 预处理器
Shiki/Prism：代码高亮库
Unified/Remark/Rehype：Markdown 处理生态系统
JS-YAML：用于内容文件的 YAML 解析
Glob：文件模式匹配
FS-Extra：增强的文件系统操作

来源： package.json9-33