如何通过外部JavaScript文件修改Electron应用的run方法行为?
问题描述
kareljs 是一个Electron应用,在该目录下执行npm start会弹出窗口,点击Run Karel按钮时会执行karel.js中的run方法。./eg01/hello_karel.js、./eg02/pick_newspaper.js等文件是基于./kareljs/karel/karel.js模块编写的Karel程序,期望实现:
- 运行这些示例程序时只需执行
node ./eg01/hello_karel.js(或在eg01目录下执行node hello_karel.js),弹出相同窗口 - 点击
Run Karel按钮时调用对应示例文件中的自定义run方法(类似Java方法重写,覆盖默认run方法) - 示例目录内无需额外配置文件,尽可能简化新手操作
目前已实现通过node hello_karel.js启动应用,但点击按钮时仍无法调用自定义run方法,相关代码如下:
相关代码
main.js
const { app, BrowserWindow } = require('electron/main') const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { contextIsolation: false, nodeIntegration: true }, }) win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } })
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <title>Hello from Electron renderer!</title> </head> <body> <h1>Hello from Electron renderer ... !</h1> <p>👋</p> <p id="info"></p> <p><button class="run">Run Karel</button></p> <script src="./renderer.js"></script> </body> </html>
karel.js
const move = () => { alert("Karel moves one step forward!") }; const turnLeft = () => { alert("Kare turns left!") }; const pickBeeper = () => { alert("Karel picks a beeper!") }; const putBeeper = () => { alert("Karel puts a beeper!") }; const run = () => { alert("This is the default run method!") } // Updated: to write user_defined.js file with content from hello_karel.js const { exec,spawn } = require("child_process"); const fs = require("fs"); var path = require('path'); const start_karel = (file_name) => { console.log(__dirname) console.log("The .js file executed: " + file_name) var user_script; fs.readFile(file_name, 'utf8', (err, data) => { if (err) { console.error(err); return; } console.log(data); var user_defined = path.join(__dirname, '..', 'user_defined.js'); var user_script = data.replace(/start_karel\(__filename\)/g, "") fs.writeFile(user_defined, user_script, 'utf-8', function (err) { console.log(err); }); }); var index_html = path.join(__dirname, '..', 'index.html'); /* fs.readFile(index_html, 'utf8', (err, data) => { if (err) { console.error(err); return; } console.log("about to replace...") console.log(data); var replaced = data.replace(/default/g, 'user') console.log("replaced " + replaced) fs.writeFile(index_html, replaced, 'utf-8', function (err) { console.log(err); }); console.log("done replace...") }); */ exec("cd ../kareljs && ./node_modules/.bin/electron main.js " + file_name, (error, stdout, stderr) => { if (error) { console.log(`error: ${error.message}`); return; } if (stderr) { console.log(`stderr: ${stderr}`); return; } console.log(`stdout: ${stdout}`); }); /* spawn("cd ../kareljs && ./node_modules/.bin/electron main.js " + file_name, { stdio: 'inherit', shell: true }) */ } module.exports = {move, turnLeft, putBeeper, pickBeeper, run, start_karel};
renderer.js
const {move, turnLeft, putBeeper, pickBeeper, run} = require('./karel/karel') const btn = document.querySelector('.run') btn.addEventListener('click', () => {run()})
package.json
{ "name": "hello-electron-app", "version": "1.0.0", "description": "test", "main": "main.js", "scripts": { "start": "electron .", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "electron": "^28.2.1" } }
hello_karel.js
const {move, turnLeft, putBeeper, pickBeeper, run, start_karel} = require('../kareljs/karel/karel') function turnRight() { turnLeft() turnLeft() turnLeft() } start_karel()
内容的提问来源于stack exchange,提问作者Pyi Soe
相关产品推荐
相关产品推荐

