HTML 和静态站点 – Bundler | Bun 文档

Bun 的 bundler 对 HTML 具有一流的支持。零配置构建静态站点、着陆页和 Web 应用程序。只需将 Bun 指向您的 HTML 文件，它会处理其他一切。

index.html
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./app.ts" type="module"></script>
  </head>
  <body>
    <img src="./logo.png" />
  </body>
</html>




    
    

要开始使用，请将 HTML 文件传递给 bun。

bun ./index.html

Bunv1.2.5准备就绪，耗时6.62毫秒

https://127.0.0.1:3000/

按h+Enter显示快捷键

Bun 的开发服务器提供强大的功能，且无需任何配置

自动打包 - 打包并服务您的 HTML、JavaScript 和 CSS
多入口点支持 - 处理多个 HTML 入口点和 glob 入口点
现代 JavaScript - 开箱即用的 TypeScript 和 JSX 支持
智能配置 - 读取 tsconfig.json 以获取路径、JSX 选项、实验性装饰器等
插件 - 用于 TailwindCSS 和更多的插件
ESM 和 CommonJS - 在您的 JavaScript、TypeScript 和 JSX 文件中使用 ESM 和 CommonJS
CSS 打包和压缩 - 从 <link> 标签和 @import 语句中打包 CSS
资源管理
- 自动复制和哈希处理图像和资源
- 重写 JavaScript、CSS 和 HTML 中的资源路径

单页应用 (SPA)

当您将单个 .html 文件传递给 Bun 时，Bun 会将其用作所有路径的后备路由。这使其非常适合使用客户端路由的单页应用程序

bun index.html

Bunv1.2.5准备就绪，耗时6.62毫秒

https://127.0.0.1:3000/

按h+Enter显示快捷键

您的 React 或其他 SPA 将开箱即用 - 无需配置。所有路由（如 /about、/users/123 等）都将服务于相同的 HTML 文件，让您的客户端路由器处理导航。

index.html
<!doctype html>
<html>
  <head>
    <title>My SPA</title>
    <script src="./app.tsx" type="module"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>




    My SPA - Bun 中文
    

多页应用 (MPA)

某些项目有多个单独的路由或 HTML 文件作为入口点。为了支持多个入口点，请将它们全部传递给 bun

bun ./index.html ./about.html

Bunv1.2.5准备就绪，耗时6.62毫秒

https://127.0.0.1:3000/

路由

/./index.html

/about./about.html

按h+Enter显示快捷键

这将服务于

index.html 在 /
about.html 在 /about

Glob 模式

要指定多个文件，您可以使用以 .html 结尾的 glob 模式

bun ./**/*.html

Bunv1.2.5准备就绪，耗时6.62毫秒

https://127.0.0.1:3000/

路由

/./index.html

/about./about.html

按h+Enter显示快捷键

路径规范化

基本路径是从所有文件之间最长的公共前缀中选择的。

bun ./index.html ./about/index.html ./about/foo/index.html

Bunv1.2.5准备就绪，耗时6.62毫秒

https://127.0.0.1:3000/

路由

/./index.html

/about./about/index.html

/about/foo./about/foo/index.html

按h+Enter显示快捷键

JavaScript、TypeScript 和 JSX

Bun 的 transpiler 原生实现了 JavaScript、TypeScript 和 JSX 支持。了解更多关于 Bun 中加载器的信息。

Bun 的 transpiler 也用于运行时。

ES 模块和 CommonJS

您可以在 JavaScript、TypeScript 和 JSX 文件中使用 ESM 和 CJS。Bun 将自动处理转译和打包。

没有预构建或单独的优化步骤。所有操作同时完成。

了解更多关于 Bun 中的模块解析。

CSS

Bun 的 CSS 解析器也是原生实现的（大约 58,000 行 Zig 代码）。

它也是一个 CSS bundler。您可以在 CSS 文件中使用 @import 来导入其他 CSS 文件。

例如

styles.css
@import "./abc.css";

.container {
  background-color: blue;
}

abc.css
body {
  background-color: red;
}

这会输出

styles.css
body {
  background-color: red;
}

.container {
  background-color: blue;
}

在 CSS 中引用本地资源

您可以在 CSS 文件中引用本地资源。

styles.css
body {
  background-image: url("./logo.png");
}

这会将 ./logo.png 复制到输出目录，并重写 CSS 文件中的路径以包含内容哈希。

styles.css
body {
  background-image: url("./logo-[ABC123].png");
}

在 JavaScript 中导入 CSS

要将 CSS 文件与 JavaScript 文件关联，您可以在 JavaScript 文件中导入它。

app.ts
import "./styles.css";
import "./more-styles.css";

这会在输出目录中生成 ./app.css 和 ./app.js。从 JavaScript 导入的所有 CSS 文件都将被捆绑到每个入口点的单个 CSS 文件中。如果您从多个 JavaScript 文件导入同一个 CSS 文件，它将仅包含在输出 CSS 文件中一次。

插件

开发服务器支持插件。

Tailwind CSS

要使用 TailwindCSS，请安装 bun-plugin-tailwind 插件

# Or any npm client
bun install --dev bun-plugin-tailwind

然后，将插件添加到您的 bunfig.toml

[serve.static]
plugins = ["bun-plugin-tailwind"]

然后，通过 <link> 标签、CSS 中的 @import 或 JavaScript 中的 import 在您的 HTML 中引用 TailwindCSS。

index.html

styles.css

app.ts

index.html
<!-- Reference TailwindCSS in your HTML -->
<link rel="stylesheet" href="tailwindcss" />

styles.css
/* Import TailwindCSS in your CSS */
@import "tailwindcss";

app.ts
/* Import TailwindCSS in your JavaScript */
import "tailwindcss";

只需要其中一种方式，不必全部三种。

键盘快捷键

当服务器运行时

o + Enter - 在浏览器中打开
c + Enter - 清除控制台
q + Enter (或 Ctrl+C) - 退出服务器

构建生产版本

当您准备好部署时，请使用 bun build 创建优化的生产包

CLI

API

CLI
bun build ./index.html --minify --outdir=dist

API
Bun.build({
  entrypoints: ["./index.html"],
  outdir: "./dist",
  minify: {
    whitespace: true,
    identifiers: true,
    syntax: true,
  }
});

目前，插件仅通过 Bun.build 的 API 或通过带有前端开发服务器的 bunfig.toml 支持 - bun build 的 CLI 尚不支持。

监听模式

您可以运行 bun build --watch 来监听更改并自动重建。这对于库开发非常有用。

您从未见过如此快速的监听模式。

插件 API

需要更多控制？通过 JavaScript API 配置 bundler，并使用 Bun 的内置 HTMLRewriter 预处理 HTML。

await Bun.build({
  entrypoints: ["./index.html"],
  outdir: "./dist",
  minify: true,

  plugins: [
    {
      // A plugin that makes every HTML tag lowercase
      name: "lowercase-html-plugin",
      setup({ onLoad }) {
        const rewriter = new HTMLRewriter().on("*", {
          element(element) {
            element.tagName = element.tagName.toLowerCase();
          },
          text(element) {
            element.replace(element.text.toLowerCase());
          },
        });

        onLoad({ filter: /\.html$/ }, async args => {
          const html = await Bun.file(args.path).text();

          return {
            // Bun's bundler will scan the HTML for <script> tags, <link rel="stylesheet"> tags, and other assets
            // and bundle them automatically
            contents: rewriter.transform(html),
            loader: "html",
          };
        });
      },
    },
  ],
});

处理哪些内容？

Bun 自动处理所有常见的 Web 资源

脚本 (<script src>) 通过 Bun 的 JavaScript/TypeScript/JSX bundler 运行
样式表 (<link rel="stylesheet">) 通过 Bun 的 CSS 解析器和 bundler 运行
图像 (<img>, <picture>) 被复制和哈希处理
媒体 (<video>, <audio>, <source>) 被复制和哈希处理
任何带有指向本地文件的 href 属性的 <link> 标签都会被重写为新路径并进行哈希处理

所有路径都相对于您的 HTML 文件解析，使您可以轻松地按照您想要的方式组织您的项目。

这还是一个正在进行中的工作

尚无 HMR 支持
需要更多插件
需要更多配置选项来处理诸如资源处理之类的事情
需要一种配置 CORS、标头等的方法。

如果您想提交 PR，大部分代码都在这里。您甚至可以将该文件复制粘贴到您的项目中并将其用作起点。

工作原理

这是 Bun 在 JavaScript 中支持 HTML 导入的一个小型包装器。

为您的前端添加后端

要为您的前端添加后端，您可以使用 Bun.serve 中的 "routes" 选项。

在全栈文档中了解更多信息。