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 应用程序的工具，它们有以下区别：
配置方式不同
-
Electron Builder 使用 package.json 文件中的配置，而 Electron Forge 使用 forge.config.js 文件中的配置。这使得 Electron Builder 更加轻量级，而 Electron Forge 更加灵活。
-
集成的插件不同
Electron Builder 集成了许多插件，如自动更新、发布、代码签名等，而 Electron Forge 的插件系统则更加灵活，你可以选择需要的插件来实现相应的功能。 -
生成的应用程序不同
Electron Builder 生成的应用程序包含可执行文件和所有的依赖项，而 Electron Forge 生成的应用程序包含一个 JavaScript 文件和一个 node_modules 目录。这使得 Electron Forge 更加适合将应用程序部署到云端，而 Electron Builder 更适合本地部署。 -
开发体验不同
使用 Electron Builder 开发时，你需要手动重新构建应用程序来查看更改，而 Electron Forge 具有自动重新构建和重新加载的功能，可以提高开发效率。
总的来说，Electron Builder 更加适合简单的应用程序，而 Electron Forge 更适合复杂的应用程序，需要更多的自定义和灵活性。
