electron原理，以及electron生成可執行文件的方法實例分析 原創

Posted on by

Electron是一種跨平臺的桌面應用程序開發框架。它基於Node.js和Chromium，使得開發者可以使用HTML、CSS和JavaScript等Web技術來構建原生體驗的桌面應用程序。

Electron的工作原理是將一個包含瞭Node.js和Chromium的運行時環境打包成一個可執行文件，然後再將開發者編寫的應用代碼和資源文件打包進去，在用戶端解壓縮後運行，從而實現桌面應用程序的運行。

以下是生成Electron可執行文件的步驟：

安裝Electron

npm install electron --save-dev

在package.json文件中配置main文件和打包腳本

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "dependencies": {
    "electron-store": "^5.1.0"
  },
  "devDependencies": {
    "electron": "^11.0.0",
    "electron-builder": "^22.10.5"
  }
}

其中"main"字段指定瞭應用程序的主入口文件，"scripts"字段中的命令用於啟動應用程序、打包應用程序（不包含安裝包）和構建安裝包。

編寫主入口文件(main.js)

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  win.loadFile('./index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

編寫預加載腳本(preload.js)

預加載腳本可以在渲染進程和主進程初始化之前執行，通常用於註入Node.js模塊和全局變量等。

window.myAPI = {
  doSomething: function () {
    console.log('Doing something...');
  }
};

編寫html文件(index.html)

這裡假設我們的應用程序隻是一個簡單的包含按鈕的窗口。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Electron App</title>
</head>
<body>
  <button onclick="myAPI.doSomething()">Click me!</button>
</body>
</html>

運行

啟動Electron應用程序的命令為：

npm start

可以在Chrome DevTools中調試應用程序。

打包

使用Electron Builder工具來打包可執行文件和安裝包。

npm run dist

這樣就生成瞭Windows、Mac和Linux可執行文件和安裝包。

推薦閱讀：