问题:在使用Electron进行开发时,当你尝试使用任何需要jQuery的JS插件时,插件都找不到jQuery,即使你使用脚本标签加载在正确的路径中。

例如,

<body>
<p id="click-me">Click me!</p>
...
<script src="node_modules/jquery/dist/jquery.min.js"></script> //jQuery should be loaded now
<script>$("#click-me").click(() => {alert("Clicked")});</script>
</body>

运行上面的代码是行不通的。实际上,打开DevTools,转到Console视图,然后单击<p>元素。你应该看到函数$没有定义或者类似的效果。


当前回答

另一种书写<script>window的方式。$ = window。jQuery = require('./path/to/ jQuery ');</script>是:

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>

其他回答

我想我理解你的挣扎,只是解决方法有点不同。我使用脚本加载器为我的js文件,其中包括jquery。脚本加载器需要你的js文件,并将其附加到你的vendor.js文件的顶部,它为我做了魔法。

https://www.npmjs.com/package/script-loader

安装脚本加载程序后,将其添加到引导或应用程序文件中。

进口“脚本!路径/ your-file.js”;

你可以把node-integration: false放在BrowserWindow的选项里面。

例如:window = new BrowserWindow({'node-integration': false});

您可以尝试以下代码:

mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration:false,
        }
});

如果你使用的是Angular2,你可以用下面的代码创建一个新的js文件:

// jquery-electron.js

if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
      window.jQuery = window.$ = module.exports;
}

然后把它放在。angular-cli.json的jquery路径后面:

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "assets/js/jquery-electron.js",
    ...
    ...
]

这里有另一个选项,如果你想要一个相对包含。

<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>