The most basic electron packaging and running configuration, and the differences between Electron Builder and Electron Forge

node versionv16.19.0

• Before developing, please be sure to check the version supported by node on the official website, otherwise the installation will report an error

It is recommended to use yarnpackage management

Introduce electron dependency

yarn add [email protected] -D
yarn add electron-builder -D

Create an electron configuration file

• For modular development, I put electron-related files in electronthe file ;
  

electron/main.jsdocument content

// 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()
})

modify package.jsonconfiguration

• Delete "type": "module"to facilitate direct use required& importimport of modules during development;
• Import electron configuration file "main": "./electron/main.js";
• Add electron startup command (add in scriptsattribute ) "electron:start": "electron .";
• Add electron packaging command (add in scriptsattribute ) "electron:build": "electron-builder";
  • Add packaging configuration

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

So far the simplest electron application (development, debugging, packaging) is completed

Of course, you can also use electron-forge[https://www.electronforge.io/] for cooperation

• The configuration of this method is simpler
• It can be quickly configured according to the operations given on the official website
• The difference between the two can be found here

---

Both Electron Builder and Electron Forge are tools for building Electron applications with the following differences:

Configured differently

1. Electron Builder uses the configuration in the package.json file, while Electron Forge uses the configuration in the forge.config.js file. This makes Electron Builder more lightweight and Electron Forge more flexible.

2. Different integrated plug-ins
   Electron Builder integrates many plug-ins, such as automatic update, release, code signing, etc., while Electron Forge's plug-in system is more flexible, you can choose the plug-ins you need to achieve the corresponding functions.

3. The generated application is different.
   The application generated by Electron Builder contains the executable file and all dependencies, while the application generated by Electron Forge contains a JavaScript file and a node_modules directory. This makes Electron Forge more suitable for deploying applications to the cloud, while Electron Builder is more suitable for on-premises deployments.

4. Different development experience
   When developing with Electron Builder, you need to manually rebuild the application to see the changes, while Electron Forge has the function of automatic rebuild and reload, which can improve the development efficiency.

In general, Electron Builder is more suitable for simple applications, while Electron Forge is more suitable for complex applications that require more customization and flexibility.