Opsætning af React med Electron

Opsætning af React med Electron begynder med at oprette et Vite React-projekt og derefter tilføje electron og electron-builder som udviklingsafhængigheder. Projektet ender med to startpunkter: Vite-appen til renderer-processen og en main.js-fil til Electron-hovedprocessen.

main.js er Electron-startpunktet. Den opretter et BrowserWindow med de ønskede vinduesmål og sikkerhedsindstillinger og indlæser derefter React-appen — under udvikling peger den på localhost:5173, mens den i produktion peger på en bygget filsti.

electron-vite er et samlet byggeværktøj, der integrerer Vite med Electron og automatisk håndterer den komplekse byggekonfiguration til flere processer. Det leverer separate Vite-konfigurationer til hovedproces, preload og renderer og forenkler både udviklings- og produktionsbuilds betydeligt.

Når du konfigurerer Vite til Electron, skal du angive eksplicitte browsermål i stedet for at stole på automatisk registrering, fordi renderer-processen kører i en bestemt Chromium-version, der følger med Electron. electron-vite håndterer dette automatisk, men ved manuel opsætning skal du angive Chrome-versionen i byggemålet.

Hvis du kører electron-vite dev, starter det både Vite-udviklingsserveren til renderer-processen og Electron-hovedprocessen samtidigt. Vite-udviklingsserveren leverer HMR (udskiftning af moduler under kørsel), så ændringer i dine React-komponenter vises øjeblikkeligt i Electron-vinduet uden en fuld genstart.

HMR fungerer i Electron-rendereren ligesom i en browser — redigerede komponenter gengives straks igen, samtidig med at tilstanden bevares. Kun ændringer i main.js eller preload-scriptet kræver en fuld genstart af Electron, fordi de kører uden for Vites HMR-grænse.

Electron + React + TypeScript-projekter har brug for separate tsconfig-filer til hovedprocessen (målrettet Node.js/CommonJS), preload (målrettet et browserlignende miljø med globale Node-variabler) og renderer (standard TypeScript til browseren). electron-vite opretter automatisk disse konfigurationer.

Preload-scriptet bruger contextBridge.exposeInMainWorld til at eksponere din brugerdefinerede API for renderer-processen. Et typisk mønster er at eksponere et navneområde som "api" med funktioner, der omslutter kald til ipcRenderer.invoke, så React-komponenter får en enkel asynkron grænseflade til handlinger i hovedprocessen.

Fra enhver React-komponent kalder du window.api.myFunction() for at anvende den eksponerede preload-API. TypeScript-brugere tilføjer typisk en global deklaration (window: Window & { api: MyAPI }), så de får typekontrol og autofuldførelse for den eksponerede grænseflade.

electron-vite build kompilerer alle tre mål (hovedproces, preload og renderer) til mappen dist/. Derefter pakker electron-builder dette som et platformspecifikt installationsprogram. main.js i produktionen indlæser renderer-processen fra den samlede filsti i stedet for URL'en til udviklingsserveren.

De hyppigste fejl ved opsætningen er at glemme nodeIntegration:false og contextIsolation:true (hvilket skaber sikkerhedshuller), indlæse den forkerte URL i main.js (udvikling kontra produktion) og importere Electron-moduler direkte i renderer-processen (hvilket får den til at gå ned). electron-vites standardindstillinger forhindrer de fleste af disse problemer.

Opsætning af React med Electron forenkles af electron-vite, som håndterer kompleksiteten ved builds til flere processer. Udviklingsarbejdsgangen giver fuld HMR-understøttelse, contextBridge sikrer renderer-processens API-overflade, og separate TypeScript-konfigurationer sørger for, at hver proces har det korrekte typemiljø. Produktionsbuilds bruger electron-builder til platformspecifik pakning.