Javascript 电子弹出窗口（$未定义）；控制台日志中没有错误

简而言之：我正在使用Electron实现一个单页网站，遇到了jQuery无法全局访问的常见问题。因此，为了解决这个问题，我使用下面的快速入门示例简化了这个问题，但我无法理解它

如您所见，我只是将以下代码添加到我的

main.js

文件的末尾，以检查问题是否得到解决：

$（文档）.ready（函数（）{
控制台日志（“hi”）；
});

这是我的

main.js

文件的完整代码：

//main.js
//用于控制应用程序寿命和创建本机浏览器窗口的模块
const{app，BrowserWindow}=require（“电子”）；
常量路径=要求（“路径”）；
函数createWindow（）{
//创建浏览器窗口。
const main window=新浏览器窗口({
宽度：800，
身高：600，
网络首选项：{
preload:path.join（uu dirname，“preload.js”），
无融合：没错，
网络安全：没错，
},
});
//并加载应用程序的index.html。
mainWindow.loadFile（“index.html”）；
//打开DevTools。
//mainWindow.webContents.openDevTools（）
}
//此方法将在Electron完成后调用
//初始化并准备好创建浏览器窗口。
//某些API只能在此事件发生后使用。
app.whenReady（）.然后（（）=>{
createWindow（）；
应用程序打开（“激活”，功能（）{
//在macOS上，当
//已单击停靠图标，并且没有其他窗口打开。
如果（BrowserWindow.getAllWindows（）.length==0）createWindow（）；
});
});
//关闭所有窗口后退出。
应用程序打开（“窗口全部关闭”，功能（）{
//在macOS上，应用程序及其菜单栏很常见
//在用户使用Cmd+Q明确退出之前保持活动状态
if（process.platform！=“darwin”）app.quit（）；
});
//在此文件中，您可以包含应用程序特定主进程的其余部分
//代码。您也可以将它们放在单独的文件中，并在此处要求它们。
$（文档）.ready（函数（）{
控制台日志（“hi”）；
});

我正在将以下HTML代码加载到我的

浏览器窗口中

：

你好，世界！
你好，世界！
我们正在使用Node.js，
铬，
和电子。
window.jQuery=window.$=require（'jQuery'）；

以下脚本作为电子文档建议的

预加载脚本附加到
浏览器窗口
：

//Preload.js
//所有Node.js API都可以在预加载过程中使用。
//它具有与Chrome扩展相同的沙盒。
addEventListener（“DOMContentLoaded”，（）=>{
常量替换文本=（选择器，文本）=>{
常量元素=document.getElementById（选择器）；
如果（element）element.innerText=text；
};
用于（常量类型[“铬”，“节点”，“电子]）{
replaceText（`${type}-version`，process.versions[type]）；
}
});

最后但并非最不重要的一点是，这是快速启动项目的
package.json
配置文件：

{
    "name": "electron-quick-start",
    "version": "1.0.0",
    "description": "A minimal Electron application",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    },
    "repository": "https://github.com/electron/electron-quick-start",
    "keywords": [
        "Electron",
        "quick",
        "start",
        "tutorial",
        "demo"
    ],
    "author": "GitHub",
    "license": "CC0-1.0",
    "devDependencies": {
        "electron": "^9.0.2"
    },
    "dependencies": {
        "jquery": "^3.5.1"
    }
}

但是，每次运行应用程序时，我都会收到以下错误提示：


此错误也显示在我的应用程序的Powershell输出中（我只编辑了完整的目录路径）：

应用程序在加载过程中抛出错误
ReferenceError:$未定义
反对。；我已经试过了，但没有用

如果有任何信息丢失，请告诉我。
你把你的电脑搞错了。对于Electron，负责UI的所有代码，即附加到
BrowserWindow
s中加载的HTML的JavaScript在渲染器进程中运行，所有其他代码（例如，负责打开窗口或设置应用程序的代码）在主进程中运行

在这个主进程中，不能使用特定于DOM的全局变量，因为主进程是纯Node.js。您想用jQuery做什么，即

$（文档）.ready（函数（）{
控制台日志（“hi”）；
});

尽管如此，它仍然无法工作，因为主流程中未定义
文档
。此外，主进程“环境与渲染器进程分离”（这就是为什么必须使用IPC在它们之间进行通信），因此
$
没有在
main.js
中定义，因为它是在渲染器HTML中定义的

如果您将以下内容放在HTML文件的末尾（甚至是包含在HTML文件末尾的
renderer.js
），您可能会得到您想要的结果：


window.jQuery=window.$=require（'jQuery'）；
const$=window.jQuery；
$（文档）.ready（函数（）{
控制台日志（“hi”）；
});

毕竟，我建议您通过深入阅读Electron的文档来熟悉Electron的体系结构，例如，因为如果不熟悉主/渲染器设计原则，就不会有更多的问题，只要简单地理解这个设计，就可以很容易地解决这个问题。
您把自己的设计搞糊涂了。对于Electron，负责UI的所有代码，即附加到
BrowserWindow
s中加载的HTML的JavaScript在渲染器进程中运行，所有其他代码（例如，负责打开窗口或设置应用程序的代码）在主进程中运行

在这个主进程中，不能使用特定于DOM的全局变量，因为主进程是纯Node.js。您想用jQuery做什么，即

$（文档）.ready（函数（）{
控制台日志（“hi”）；
});

尽管如此，它仍然无法工作，因为主流程中未定义
文档
。此外，主进程“环境与渲染器进程分离”（这就是为什么必须使用IPC在它们之间进行通信），因此，
$
不可用