Electron

Milkio 提供了一种在 Electron 环境中运行的解决方案，助力你开发功能强大的桌面应用程序。

在传统 Electron 应用的开发中，主进程与渲染进程之间的通信机制一直是关键挑战之一。常见的问题包括缺乏类型安全、需要将变量转换成字符串格式、必须在 preload 脚本中编写过渡代码以实现数据传递，以及实现双向通信的复杂性。这些问题都可能影响开发效率和应用性能。

使用 Milkio，你可以在随机的可用端口上启动 HTTP 服务，为渲染进程赋予调用 Electron 或 Node.js 的能力，并保证安全，并且，能够简单地做到双向通信。

快速开始

在创建应用时，选择 electron 作为运行时环境。

bun create milkio

运行时

你的代码将运行在 Electron 当中。对于主进程而言，你是运行在 Node.js 中，对于渲染进程而言，你是运行在浏览器中。Bun 在你开发 Electron 的过程中，仅作为包管理器和打包器。因此，请注意你的代码，是否能够在所处的环境（Node.js 或浏览器）中运行。

页面开发

在你创建应用后，默认会使用 Astro 作为页面的开发框架。它是一个 SSG 框架，会将你的页面的首个屏幕内容预渲染为 HTML，来加快你页面的加载速度。在 Astro 中，你除了可以使用 .astro 模板来开发你的页面，你还可以使用 Vue3、React、Preact、Svelte、Solid、Alpine、Lit 等任何框架来开发你的页面。

SSG 框架的“缺点”在于，并非所有的代码都运行在浏览器中，有些代码可能会被预先渲染。如果你在这些代码中，使用了浏览器中专有的 API，那么就会出现问题。如果你开发的应用较为复杂，你可能会讨厌这种小心翼翼处理的感觉，这时，你可以将通过在你的 .astro 中添加 client:only 指令，使你的组件永远在浏览器中渲染。

<!-- 这个组件永远在浏览器中被渲染，而不会被预先渲染 -->
<MyReactComponent client:only />

甚至，你还可以将 Astro 当作普通的 Vite 应用来开发。你可以简单地将你的 /src/pages/index.astro 视为 index.html，然后，在其中通过添加 <script type="module" src="/src/main.ts"></script> 来引入你的主入口文件。

在其中，你可以做任何事情。例如，你是 Vue 3 开发者，你可以在 /src/main.ts 中安装 Vue，使用 Vue Router 等。

你甚至可以将两者混合，例如，对于主要的部分使用 SPA 的方式进行开发，对于一些重展示轻交互的功能，使用 Astro 的方式进行开发。你可以简单地把 Astro 当作可以有多个页面版本的 Vite。

Electron

在 Electron 官网，或一些文章中，我们通常可以看到，使用下面的方式来使用 Electron 的功能：

import { app } from "electron";
app.whenReady();

但在 Milkio 中，你应该改写成以下的方式：

electron.app.whenReady();

这是因为，我们通过打包来减少应用的体积，并通过压缩代码来提高性能，所有的依赖会一起被打包进去。

但是，Electron 是 “特殊” 的依赖，我们使用前者方式引入，会导致 Electron 被打包，导致发行时出现错误。

Assets

Electron Forge 会将你的源码打包为 asar 格式的文件，这样能在一些慢速 IO 的系统上高效运行（如 Windows）。

但我们有时需要携带一些资源，并希望能够原样存储在文件系统中，而不是被 asar 打包。例如，一些图标、可执行文件等。

你可以将这些资源放在 /assets 目录下，并在代码中，可以通过下面的方式获得资源的绝对路径：

import { join } from "node:path";
import { configMilkio } from "/src/config/milkio";

const assetsPath = join(configMilkio.assets(), "your-asset.png");

发行

你可以通过 bun run build 命令，来发行你的应用。你的应用打包后的安装包，会存放在 /out 目录下。

其中，我们使用了 Electron Forge，这是 Electron 官方推出的从打包到发行的工具。