00:00:00这是 ElectroBun，一个跨平台的桌面应用框架，它生成的
00:00:05包体积比 Electron 小得多，不需要像使用 Tauri 那样编写 Rust 代码，并能为你提供
00:00:11通过 Bun 的强大功能及其自有的 C++ 封装实现的原生性能。因此无需 Node.js 或 V8。
00:00:18但是，它在所有操作系统中都使用系统原生 WebView 而不是 Chromium，
00:00:22这是否会让构建真正的跨平台应用变得困难呢？
00:00:27点击订阅，让我们一探究竟。
00:00:32自从去年 Bun 宣布支持全栈可执行文件以来，
00:00:36这让我对一个像样的 Electron 替代方案感到非常兴奋。
00:00:40但在被 Anthropic 收购后（我稍后会在视频中谈到这一点），
00:00:44Bun 团队似乎不太可能再往这个方向发展了。
00:00:49于是，来自 Blackboard 的 Yoav 创建了 ElectroBun，这是我们目前能得到的最接近 “Bun 版 Electron” 的东西，
00:00:55他已经用它构建了一些很酷的东西，比如一个名为 Colab 的混合浏览器、终端和代码编辑器工具，
00:01:01一个由 Quen 驱动的文本转语音应用，他甚至通过 WebGPU 的力量在 ElectroBun 应用上运行了《毁灭战士》。
00:01:07让我们来看看如何在一个简单的项目中使用它。
00:01:12现在，当你第一次初始化 ElectroBun 时，你会获得一堆模板，
00:01:17你可以通过这些模板了解应用的工作原理，比如这个非常基础的记事应用、多窗口应用，
00:01:22甚至还有一个可以在 Web 浏览器中打开文档的托盘应用。
00:01:26因为 ElectroBun 支持 Web 技术，你可以使用任何你想要的 JS 框架，
00:01:31从 Svelte 到 Vue，再到 Solid.js 甚至 Angular。
00:01:35但我将从头开始演示一个基础项目，以帮助你完全理解它。
00:01:40这里我有一个基础的 Bun React 应用，我们将通过 ElectroBun 的力量将其转换成
00:01:45一个原生的 Mac 应用。为了实现这一点，我已经安装了 ElectroBun，
00:01:49并且已经准备好了一个启动 ElectroBun 开发构建的脚本，
00:01:53以及一个构建 ElectroBun 应用的脚本。
00:01:55事实上，我们这里不需要这个 type module，因为我们不会用到它。
00:01:59在项目的根目录下，我创建了一个 ElectroBun 配置文件，
00:02:03目前它包含我的应用名称、标识符以及 Bun 构建的入口点。
00:02:09现在，我还没有创建这个入口点，所以让我们现在就开始吧。
00:02:12在 source 目录下，我创建了一个 Bun 文件夹，并准备新建一个 index.ts 文件，
00:02:17它会实例化浏览器窗口类，并接收一个标题作为参数，
00:02:22也就是我们在标题栏中显示的文本，还有一个 URL，
00:02:25即应用首次加载时导航到的位置。
00:02:28所以如果我们运行 Bun start，我们应该会看到应用加载并显示正确的标题，
00:02:32但这里什么也没显示。这是因为在 Bun 构建应用之后，
00:02:36即完成了 TypeScript 到 JavaScript 的转译、摇树优化（tree shaking）等一系列操作后，
00:02:41它会将文件放在一个不同的目录中，我们需要在入口点引用该目录。
00:02:46而我们在这里还没处理好。
00:02:48为了修复这个问题，我们需要打开 ElectroBun 配置文件，首先添加一个新的 views
00:02:53对象，它将包含你希望 ElectroBun 访问的新视图。
00:02:57然后我们将视图命名为 main，并将入口点设为 index.html，
00:03:02其中包含了引用应用的各种前端 JS，
00:03:06以及让它正常运行所需的所有 JavaScript 和 CSS。
00:03:09你可以在 ElectroBun 文档中找到更多关于构建配置的信息。
00:03:13现在我们的 source Bun 目录下有了主视图，
00:03:17我们可以打开 index.ts 文件并更新 URL，以利用 views 和 main 目录。
00:03:23这意味着现在当我们构建应用时，应该能看到一切都如预期般运行。
00:03:28我们甚至可以通过添加这个属性来移除标题栏，让它更有应用的感觉。
00:03:34我们还可以使用应用菜单对象来为应用提供自定义菜单。
00:03:39当我们准备就绪时，可以构建生产版本，这会生成一个 17 MB 的
00:03:44DMG 文件，并创建一个 65 MB 的应用。如果我们将它与一个 Hello World 级别的 Electron 应用相比，
00:03:50你会发现后者有 271 MB，是 ElectroBun 应用体积的四倍多。
00:03:56现在，由于 ElectroBun 应用是基于系统原生的 Web 视图构建的，即 Mac 上的 WebKit，
00:04:01Windows 上的 Edge WebView 2 以及 Linux 上的 WebKit GTK，所以你在开发
00:04:08跨平台应用时，必须考虑某些 Web 视图不支持的功能。
00:04:11尽管 ElectroBun 确实支持 Chromium 嵌入式框架（CEF），这可以实现
00:04:16跨平台的一致性，但这会把整个 Chromium 浏览器添加到你的应用中，意味着体积和
00:04:22性能都会受到影响，除了使用 Bun 之外，这让它变得和 Electron 几乎一样。
00:04:27还有一些我还没提到的酷炫 ElectroBun 功能，
00:04:32比如进程外 iframe 架构，让每个嵌入式 Web 视图都在各自独立的进程中运行，
00:04:38用于无缝进程间通信的有类型 RPC、ZSTD 压缩以及用于
00:04:44减小初始下载体积的自解压封装、代码签名等等。
00:04:48但不幸的是，在构建我之前演示的演示应用时，我也遇到了一些问题，
00:04:54比如文档缺失，特别是在涉及 ElectroBun 入口文件相关的内容时。
00:04:58全页重新加载时页面有时会闪烁，而且使用检查器工具在某种程度上打乱了
00:05:03我的布局。我知道 ElectroBun 还很新，第一次提交可以追溯到二月份，而且我
00:05:09确定在此之前还有一些其他的。我只是想说，我知道这些功能将来会得到
00:05:13修复。事实上，我希望这些能被修复，因为 Bun 团队自从
00:05:19被 Anthropic 收购以来，更多地关注于 CLI 和可执行文件的改进，而不是
00:05:25朝着构建 Electron 替代方案的方向发展。所以目前看来，ElectroBun 是我们
00:05:31拥有由 Bun 驱动的跨平台桌面工具的最佳机会。如果你对
00:05:37Bun/Anthropic 的收购一无所知，或者只是想了解更多关于 Bun 团队
00:05:42自收购以来的新动向，那就看看 James 的这个视频吧，他讲述了
00:05:48整件事的经过。