2024年了，如何从 0 搭建一个 Electron 应用

一、简介

Electron 是一个开源的跨平台桌面应用程序开发框架，它允许开发者使用 Web 技术（如 JavaScript、HTML 和 CSS）来构建桌面应用程序。Electron 嵌入了 Chromium（一个开源的 Web 浏览器引擎）和 Node.js（一个运行在服务器端的 JavaScript 运行时环境），使得开发者能够创建既具有现代 Web 应用的丰富交互性，又具备传统桌面应用的功能和性能的应用程序。

程序员每天离不开的 Visual Studio Code，以及团队协作软件 Slack，聊天社区 Discord 的客户端，都是用 Electron 开发的，虽然因为其原理，需要同时打包 node.js 和 Chromium 在最后的软件包里，使得分发包比较大，但是 Electron 框架周边成熟度、兼容性和开发体验真的很棒。仍然是现在桌面端跨平台开发的首选技术之一。最近，我就利用 Electron 技术开发了一个博客客户端软件 HexoPress，开源在 GitHub。从 0 开始学习并完整体验了 Electron 开发的各个方面。

本文给大家分享，2024 年，如何从 0 开始创建一个 Electron 项目。

二、准备工作

首先你需要一个开发环境，我会使用 Mac 作为例子，如果你使用的是 Windows，我建议通过虚拟机安装 Linux，会跟在 Mac 下差不多的体验，但是在 Windows 上，相对来说不像前两者那么方便。

开始之前，你首先需要安装 Node.js 的开发环境，在 Mac 就是：

brew install node

或者，你可以使用 nvm 来管理电脑上安装的 node 环境的多个版本。本文就不介绍了。npm 也是一个必须的工具，不过安装好 node，会自动就安装了 npm。

你可以登录 Electron 的官网，在文档页面，会看到一些指引。官方文档的“快速开始”，可以仔细阅读一下，这个文档重点介绍了 Electron 项目启动的最小规模，需要四个重要文件，main.