静态站点搭建指南

为什么要用 esbuild？

esbuild 用 Go 编写，打包速度比 webpack 快 10-100 倍。 它原生支持 TypeScript、JSX、CSS 等格式，配置简单，适合中小型项目。

项目结构

一个典型的 esbuild 静态站项目结构如下：

project/
├── public/          # 静态资源（HTML、图片等）
│   ├── index.html
│   ├── blog/
│   └── about/
├── src/             # 源代码
│   ├── index.ts     # JS 入口
│   └── style.css    # 样式文件
├── dist/            # 构建输出（自动生成）
├── esbuild.config.js # 构建配置
├── biome.json       # 代码检查配置
└── tsconfig.json    # TypeScript 配置

构建配置

esbuild.config.js 负责整个构建流程：

• 打包 JS/CSS：将 src/ 下的源码编译打包到 dist/
• 复制静态文件：将 public/ 下的 HTML 等文件递归复制到 dist/
• 开发服务器：使用 --watch --serve 启动开发服务器，并在文件变化时重新构建

文件复制、目录创建等辅助功能使用 Node.js 原生 API，不额外引入依赖。

为什么交互效果优先用 CSS？

现代 CSS 已经能处理大部分交互：:hover 处理悬停，transition 处理过渡，@keyframes 处理关键帧动画，@media (prefers-color-scheme: dark) 适配暗色模式。这些都不需要一行 JavaScript。

把 JS 控制在 3KB 以内，首屏加载更快、带宽消耗更低；即使 JS 加载失败，核心内容也依然可用。