Bun运行本地HTML服务教程

本文详解了如何用 Bun 正确启动 HTML 本地开发服务，指出直接运行 `bun run index.html` 会失败的根本原因——Bun 作为运行时默认只加载 JS/TS 模块，不支持直接执行或托管 HTML 文件；进而对比两种实用方案：一是手写仅 3 行的 `Bun.serve` 静态服务（需手动处理路由、文件存在性与 Content-Type），二是更推荐的零配置方式——利用 Bun 内置的 esbuild 执行 `bun run esbuild --servedir=. --port=3000`，自动支持标准 MIME 类型、缓存头和范围请求，真正开箱即用；同时澄清常见误区，如不存在 `bun create http-server`、`bun dev` 依赖 package.json 等，帮助开发者避开坑、高效开启本地 HTML 开发。

用 bun run 直接打开 HTML 文件行不通

HTML 文件本身不是可执行脚本，bun run index.html 会报错 Error: Cannot find module 'index.html' —— Bun 默认只识别 JS/TS 模块，不内置静态文件服务能力。

真正能跑起来的，是用 Bun 写一个极简 HTTP 服务，把当前目录当静态资源根来 serve。核心就两步：写个 server.ts，再 bun run server.ts。

• bun create http-server 不是官方命令，别搜这个，Bun 没预置模板
• 不要试图用 bun run --watch index.html，watch 对纯 HTML 无效
• 浏览器直接双击打开 file:// 协议的 HTML，会因跨域限制让 fetch、import 等失效，必须走 http://

用 Bun 写个 3 行静态服务（支持热更新）

新建 server.ts，内容如下：

import { serve } from "bun";
serve({
  port: 3000,
  fetch: (req) => new Response(Bun.file("./index.html")),
});

这只能返回固定 index.html，不处理 CSS/JS 路径。要真正支持整个项目（比如 /style.css、/script.js），得加路由逻辑：

• 用 new URL(req.url) 解析路径，避免硬编码
• 对根路径 / 返回 index.html，其他路径尝试读取对应文件（如 /main.js → ./main.js）
• 加 if (!file.exists) 判断，否则 404 会崩掉进程
• 注意：Bun 默认不自动设置 Content-Type，CSS/JS 会被当成 text/plain，需手动塞 headers: { "Content-Type": "..."}

更稳的选择：bun run 启动 esbuild 或 vite

Bun 自带 esbuild，能一键起 dev server，比手写 serve 更靠谱：

bun add -d esbuild

然后运行：

bun run esbuild --servedir=. --port=3000

这等价于 Python 的 python -m http.server，但支持现代 MIME 类型和缓存头。优势很明显：

• 不用写任何代码，--servedir=. 就指定当前为根目录
• 自动处理 .html、.js、.css、.png 的 Content-Type
• 支持 Accept-Ranges，视频/大文件拖动没问题
• 不支持 HMR（热模块替换），但纯 HTML + 静态资源开发完全够用

为什么不用 bun install 或 bun dev？

这些命令只在有 package.json 且定义了 "scripts": { "dev": "..." } 时才有效。Bun 不像 Node.js 生态默认绑定某个 bundler —— 它只是个更快的运行时 + 工具链，没有“开箱即用的 HTML 开发服务器”概念。

容易被忽略的一点：Bun 的 fetch 在服务端（serve 回调里）默认不支持 file:// 协议读取，所以 await fetch("file://./data.json") 会失败；必须用 Bun.file() 或 await Bun.file().text()。

以上就是《Bun运行本地HTML服务教程》的详细内容，更多关于的资料请关注golang学习网公众号！