最基础的electron打包运行配置，以及Electron Builder 和 Electron Forge两者差异

node版本 v16.19.0

• 开发之前请务必去官网查看node所支持的版本，不然安装会报错

推荐使用 yarn 包管理

引入electron依赖

yarn add electron@22.3.6 -D
yarn add electron-builder -D

创建electron配置文件

• 我这边为了模块化开发，将electron相关文件放在了根目录的 electron 文件中;
  

electron/main.js 文件内容

// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
 // 创建浏览窗口
 const mainWindow = new BrowserWindow({
   width: 800,
   height: 600,
   webPreferences: {}
 })

 // mainWindow.loadFile("index.html"); // 加载文件
 mainWindow.loadURL("http://127.0.0.1:5173/"); // 加载路径

 // 打开开发工具
 mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
 createWindow()

 app.on('activate', () => {
   // 在 macOS 系统内, 如果没有已开启的应用窗口
   // 点击托盘图标时通常会重新创建一个新窗口
   if (BrowserWindow.getAllWindows().length === 0) createWindow()
 })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
 if (process.platform !== 'darwin') app.quit()
})

修改 package.json 配置

• 删除 "type": "module" 方便在开发中直接使用 required & import 引入模块；
• 引入electron配置文件 "main": "./electron/main.js";
• 添加electron启动命令(在 scripts 属性中添加) "electron:start": "electron ." ;
• 添加electron打包命令(在 scripts 属性中添加) "electron:build": "electron-builder" ;
  • 添加打包配置

"build": {
  "productName": "桌面笔记",
  "directories": {
    "output": "electron_dist"
  },
  "win": {
    "icon": "./src/assets/ironMan.icon"
  }
}

至此最简单electron应用(开发调试、打包)就完成了

当然也可以使用 electron-forge[https://www.electronforge.io/]进行配合

• 这个方法的配置更加简单
• 可以根据官网给出的操作快速配置
• 两者的差异可以参考这里

---

Electron Builder 和 Electron Forge 都是用于构建 Electron 应用程序的工具，它们有以下区别：

配置方式不同

1. Electron Builder 使用 package.json 文件中的配置，而 Electron Forge 使用 forge.config.js 文件中的配置。这使得 Electron Builder 更加轻量级，而 Electron Forge 更加灵活。

2. 集成的插件不同
   Electron Builder 集成了许多插件，如自动更新、发布、代码签名等，而 Electron Forge 的插件系统则更加灵活，你可以选择需要的插件来实现相应的功能。

3. 生成的应用程序不同
   Electron Builder 生成的应用程序包含可执行文件和所有的依赖项，而 Electron Forge 生成的应用程序包含一个 JavaScript 文件和一个 node_modules 目录。这使得 Electron Forge 更加适合将应用程序部署到云端，而 Electron Builder 更适合本地部署。

4. 开发体验不同
   使用 Electron Builder 开发时，你需要手动重新构建应用程序来查看更改，而 Electron Forge 具有自动重新构建和重新加载的功能，可以提高开发效率。

总的来说，Electron Builder 更加适合简单的应用程序，而 Electron Forge 更适合复杂的应用程序，需要更多的自定义和灵活性。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net