< NodeJS

Electron

Szerző: Sallai András

Copyright © 2022, Sallai András

Szerkesztve: 2022, 2024

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Az electron projektekről

Az electron projektek valójában normál weblapok, amiket automatikusan egy saját böngészőablakban indítunk el.

Electron projekt kezdés

mkdir app01
cd app01
yarn init -y

yarn add --dev electron

Írjunk indító scriptet:

"script": { "start": "electron ." }

Példa program

<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Háromszög</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Háromszög terület</h1> <div> <label for="base">Alap</label> <input type="text" id="base"> </div> <div> <label for="height">Magasság</label> <input type="text" id="height"> </div> <button id="calcButton">Számít</button> <div> <label for="area">Eredmény</label> <input type="text" id="area"> </div> </div> <div id="about"> Sallai András, 2022-12-22 </div> <script src="app.js"></script> </body> </html>
body { font-family: sans-serif; } input { margin-bottom: 15px; } label { display: inline-block; width: 80px; } #about { background-color: gold; padding: 5px; margin: 0; } button { margin-bottom: 10px; }
const calcButton = document.querySelector("#calcButton") const baseElem = document.querySelector("#base") const heightElem = document.querySelector("#height") const areaElem = document.querySelector("#area") calcButton.addEventListener('click', () => { let base = Number(baseElem.value) let height = Number(heightElem.value) let area = base * height / 2 areaElem.value = area })

Az electron nevű könyvtárból, böngészőablakot indítunk, amibe betöltjük a weblapot.

const { app, BrowserWindow } = require('electron') const createWindow = () => { const win = new BrowserWindow({ width: 350, height: 260, autoHideMenuBar: true }) win.loadFile('index.html') } app.whenReady().then(() => { createWindow() })
{ "name": "triangle", "version": "1.0.0", "main": "main.js", "license": "MIT", "devDependencies": { "electron": "^22.0.0", }, "scripts": { "start": "electron --disable-gpu .", } }

Build

A kész program, elkészíthető a következő paranccsal:

yarn add --dev electron-builder

Írjuk az utasítást package.json fájlba.

package.json fájlban:

"scripts": { "pack": "electron-builder --dir", "dist": "electron-builder" }

A --dir kapcsoló hatására nem jön létre a csomag, de az előkészítő könyvtár igen. Tesztelési célra lehet jó. A dist feladat elkészíti a csomagot.

A létrejövő csomag neve függ a package.json fájlban megadott name és version értékektől.

Linkek

https://www.electron.build/ (2022)

https://www.electronjs.org/docs/latest/ (2022)