He estado trabajando en un proyecto Svelte 3 + Electron 12.0.5. Estoy usando el paquete svelte-spa-router para el enrutamiento hash. La estructura de mi proyecto se ve así:
node_modules/ public/ build/ bundle.css bundle.js index.html src/ Components/ Pages/ Home.svelte Settings.svelte ... Sidebar.svelte Titlebar.svelte App.js App.svelte ... index.js // <-- Electron entry point rollup|svelte|tailwind // <-- config files Como estaba usando un enrutador, la window.loadFile() de electron no funcionaba; Para resolver esto, utilicé sirv-cli junto con concurrently . Ahora mi secuencia de comandos de inicio se ve así:
"start": "concurrently \"sirv public --no-clear --port=40072\" \"electron .\"" Ahora usé window.loadURL("https://localhost:40072") para que esto funcione. Archivos .svelte , dentro de las etiquetas <script> , intenté import * as electron from "electron" ; pero eso resultó en un error que decía que fs no está definido. Entonces, por ahora, creé un servidor express dentro de index.js y estoy usando fetch para hacer una solicitud POST al servidor y hacer las cosas que podría haber hecho fácilmente usando ipcMain e ipcRenderer ... No sé si estoy haciendo algo mal (nodeIntegration ya está configurado como verdadero). Soy un poco nuevo en Svelte, ¿alguien sabe de alguna otra forma de usar métodos de electrones dentro de las etiquetas de script?
Entonces, finalmente resolví mi problema. Estoy publicando esto como una respuesta para que otros que tengan el mismo problema puedan resolverlo. En primer lugar, ya no necesitamos express (también puedes usarlo si quieres). El script de inicio es el mismo, es decir
"start": "concurrently \"sirv public --no-clear --port=40072\" \"electron .\"" Entonces, en lugar de usar nodeIntegration , usaremos preload . Por ejemplo, ¡consideremos un escenario de barra de título personalizada!
--- precargar.js ---
const { contextBridge, ipcRenderer } = require("electron"); contextBridge.exposeInMainWorld( "api", { // "api" --> rename it to anything you want titlebar: action => { ipcRenderer.send("titlebar", action); } } );--- índice.js ---
const { app, ipcMain } = require("electron"); ... ipcMain.on("titlebar", (event, arg) => { if(arg === "destroy") window.destroy(); else if(arg === "kill") app.quit(); else if(arg === "minimize") window.minimize(); else if(arg === "resize") { if(window.isMaximized()) window.unmaximize(); else window.maximize(); } }) Y finalmente tu archivo esbelto; considerar Titlebar.svelte
<button on:click={() => window.api.titlebar("destroy")}>Destroy</button> <button on:click={() => window.api.titlebar("kill")}>Kill</button> <button on:click={() => window.api.titlebar("minimize")}>Minimize</button> <button on:click={() => window.api.titlebar("resize")}>Resize</button>Este fue mi caso de uso en realidad. ¡Espero que ayude! ¡Se agradecen los consejos!