Electrobun项目入门指南：构建你的第一个Hello World应用
项目地址: https://gitcode.com/gh_mirrors/el/electrobun Electrobun是一个基于Bun运行时的桌面应用开发框架，它允许开发者使用熟悉的Web技术栈来构建跨平台的桌面应用程序。本文将带你从零开始，创建一个简单的Electrobun应用，让你快速了解这个框架的基本工作流程。
环境准备
在开始之前，请确保你的开发环境满足以下要求：
- 已安装Bun运行时环境（建议使用最新稳定版）
- 基本的TypeScript或JavaScript开发经验
- 一个代码编辑器（如VSCode）
Electrobun会自动在项目中安装特定版本的Bun作为依赖项，因此即使你全局安装的Bun版本不同，项目也能正常工作。
项目初始化
首先，我们需要创建一个新的项目目录并初始化项目结构：
mkdir electrobun-test
cd electrobun-test
bun init .
在初始化过程中，你可以设置项目名称为"my-app"，对于entrypoint选项可以直接按回车跳过，因为我们后续会手动创建入口文件。
安装依赖
接下来，安装Electrobun作为项目依赖：
bun install electrobun
配置项目脚本
编辑项目中的package.json文件，添加必要的脚本和依赖项：
{
"name": "my-app",
"devDependencies": {
"@types/bun": "latest"
},
"peerDependencies": {
"typescript": "^5.0.0"
},
"dependencies": {
"electrobun": "^0.0.1"
},
"scripts": {
"start": "bun run build:dev && electrobun dev",
"build:dev": "bun install && electrobun build"
}
}
这里我们做了几项重要修改：
- 移除了默认生成的"type": "module"和"module": "index.ts"属性
- 添加了两个关键脚本：
build:dev：安装依赖并构建应用start：构建并运行开发环境中的应用
编写应用代码
创建应用入口文件src/bun/index.ts，这是Electrobun应用的核心文件：
import { BrowserWindow } from "electrobun/bun";
const win = new BrowserWindow({
title: "Hello Electrobun",
url: "https://electrobun.dev",
});
这段代码创建了一个基本的浏览器窗口，设置了窗口标题并加载了指定URL。Electrobun的API设计借鉴了Electron等成熟框架，使得开发者能够快速上手。
配置Electrobun
为了让Electrobun CLI知道如何构建和运行你的应用，需要在项目根目录创建electrobun.config文件：
{
"app": {
"name": "My App",
"identifier": "dev.my.app",
"version": "0.0.1"
},
"build": {
"bun": {
"entrypoint": "src/bun/index.ts"
}
}
}
这个配置文件定义了：
- 应用的基本信息（名称、标识符、版本）
- 构建配置（指定了入口文件路径）
运行应用
完成上述步骤后，就可以运行你的第一个Electrobun应用了：
bun start
执行命令后，你将看到一个窗口弹出并加载指定网站。要停止应用，只需在终端中按下Ctrl+C（Windows/Linux）或Cmd+C（Mac）。
深入理解
这个简单的Hello World应用展示了Electrobun的几个核心概念：
- 模块系统：Electrobun使用Bun的模块系统，支持ES模块和CommonJS
- 窗口管理：通过
BrowserWindow类创建和管理应用窗口 - 构建流程：Electrobun提供了专门的CLI工具处理构建和开发流程
- 配置驱动：通过配置文件定义应用元数据和构建选项
下一步
掌握了Hello World应用后，你可以尝试：
- 修改窗口大小和位置
- 加载本地HTML文件而非远程URL
- 添加菜单栏和系统托盘功能
- 实现主进程和渲染进程之间的通信
Electrobun结合了Bun的高性能和现代Web技术栈的灵活性，为桌面应用开发提供了新的选择。通过这个简单的入门项目，你已经迈出了使用Electrobun开发桌面应用的第一步。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
