Question

好的，我很抱歉这个问题是重复的，因为我发现了我的确切问题并在此处回答：Electron: jQuery is not defined。不幸的是，我太过于喜欢回答问题了。

我一直在为很长时间（TM）编写桌面应用程序，所以我不是编程或开发的新手，而是Electron，Node.js，JavaScript，Angular等。对我来说是一个新的领域，我仍然很绿。

我能够安装节点并获得npm的基本知识。之后，我使用npm来安装电子，jQuery和一个名为FancyTree的树视图包（特别是版本2.24，因为2.26似乎有一个不相关的问题）。

现在，继一些基本的电子教程之后，我的index.js看起来像这样：

const electron = require('electron');
const url = require('url');
const path = require('path');
const fs = require('fs');
const { app, BrowserWindow } = electron;

let mainWindow;

app.on('ready', function() {

    mainWindow = new BrowserWindow({ });

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'mainWindow.html'),
        protocol: 'file:',
        slashes: true
    }));

});

我知道这只是在'ready'事件处理程序中创建我的主浏览器窗口，并导航到我相应的html，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Getting my Feet Wet</title>
</head>
<body>
    <h1>My feet are wet.  Weird.</h1>
</body>
</html>

到目前为止没什么令人兴奋的。

但现在我使用npm安装jQuery和Fancytree，我尝试'需要'fancytree（就在 fs 的行之后），如下所示：

const fancytree = require('jquery.fancytree');

哪个不起作用。经过一些谷歌搜索，似乎（由于我不完全理解的原因）最好'需要'这样的花式树：

const fancytree = require('jquery.fancytree/dist/jquery.fancytree.js');

目前，我还是愿意接受这一点而不完全理解'为什么'。

但我仍然犯了一个错误：

App在加载期间抛出错误ReferenceError：未定义jQuery 在对象。（C：\划痕\快速启动\ node_modules \ jquery.fancytree \ DIST \ jquery.fancytree.js：5249：3）等

这似乎源于这样一个事实，即Electron使用Node.js定义了一些与各种软件包期望相冲突的“global-ish”引用。 Electron似乎在构建新的浏览器窗口时将 nodeIntegration：参数作为 false 传递给了一个解决方案，我试过这个窗口，我没有任何喜悦。

其他答案都处理html中的各种脚本块，这对我来说毫无意义，因为它会产生操作顺序问题。例如，'require'Fancytree的语句将在我的'ready'事件之前执行，这意味着它将在构建浏览器窗口之前发生，这将在任何脚本块运行之前很久html;所以这不可行。

在程序上思考片刻，我希望我的index.js看起来更像这样（以伪代码表示）：

const electron = require('electron');
const url = require('url');
const path = require('path');
const fs = require('fs');

const fancytree; //this obviously isn't valid

const { app, BrowserWindow } = electron;

let mainWindow;

app.on('ready', function() {

    mainWindow = new BrowserWindow({ });

    //I hijacked this from the original Q/A on stack but don't
    //completely understand what it's doing, or if it's even
    //legit, but the idea is to fix the mainWindow / jQuery
    //reference now that the window is constructed but before
    //I try to require the FancyTree.
    //
    mainWindow.$ = mainWindow.jQuery = require('jquery');

    //And now that jQuery is sorted out it's marbles, let's get back 
    //to business...
    //
    fancytree = require('jquery.fancytree/dist/jquery.fancytree.js');

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'mainWindow.html'),
        protocol: 'file:',
        slashes: true
    }));

});

显然这是错误的，我表现出对这些技术缺乏深入理解，但这应该是什么样的？在构建浏览器窗口之后如何构建初始化逻辑以正确“修复”jQuery并仍然为Fancytree执行'require'？

如果它有用，我正在开车只是在我的电子设备的UI中看到一个基本的树。最好不要将Node.js牺牲到任何“变通办法”，因为我希望在本实验中学习更多有关Node，Angular和jQuery的知识。通常，我喜欢在学习新技术时避免黑客/垫片/变通方法。感觉你已经“做错了”。

一如既往，非常感谢任何帮助！

Answer 1

如果您的应用不需要节点集成，请将"node-integration": false添加到您的BrowserWindow选项中。在这种情况下，module.exports不可用，jQuery就像预期的那样工作。

尝试通过npm安装它：

npm install jquery

这对我来说同样有用。那么你不需要给出一条道路，你只需说：

mainWindow.$ = mainWindow.jQuery = require('jquery');
console.log( [$, jQuery ]);

fancytree = require('jquery.fancytree');

电子错误：未定义jQuery

1 个答案: