使用Bun客户端编译时，能否导入HTML页面/代码复用弹窗？

可以实现，以下是具体方案：

1. 配置Bun处理HTML文件 #

Bun支持通过加载器或自定义插件解析HTML文件，先在项目根目录创建bunfig.toml配置文件：

[build]
target = "browser"

[plugins]
# 注册自定义HTML加载器插件
htmlLoader = "./html-loader.ts"

接着创建html-loader.ts插件，将HTML文件内容转为字符串导出：

import type { BunPlugin } from "bun";

export const htmlLoader: BunPlugin = {
  name: "html-loader",
  setup(build) {
    build.onLoad({ filter: /\.html$/ }, async (args) => {
      const htmlContent = await Bun.file(args.path).text();
      return {
        exports: { default: htmlContent },
        loader: "object",
      };
    });
  },
};

如果需求简单，也可以直接用Bun内置的文本加载器简化配置：

[build]
target = "browser"

[loaders]
".html" = "text"

2. 导入并复用HTML内容 #

在你的TypeScript文件中直接导入HTML文件，然后插入到页面中：

// app.ts
import dialogHtml from "./dialog.html";

// 生成可复用的对话框
function renderDialog() {
  const dialog = document.createElement("dialog");
  dialog.innerHTML = dialogHtml;
  
  // 绑定基础交互逻辑
  const closeBtn = dialog.querySelector(".close-btn");
  closeBtn?.addEventListener("click", () => dialog.close());
  
  return dialog;
}

// 在多个页面中调用复用
document.body.appendChild(renderDialog());

3. 编译为客户端可用的JS #

执行Bun编译命令，将TS编译为浏览器兼容的JS：

bun build app.ts --outdir ./dist --target browser

编译后的JS文件会将HTML内容内嵌其中，直接在HTML页面中引入即可使用。

注意事项 #

• 该方式会把HTML内容打包进JS文件，适合体积较小的复用组件（如对话框）
• 若HTML包含外部资源（图片、样式），需确保资源路径正确，或通过Bun的资源加载器一并处理
• 如需更复杂的组件状态管理，可结合自定义元素（Custom Elements）进一步封装

内容的提问来源于stack exchange，提问作者1.21 gigawatts