问题:在使用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>元素。你应该看到函数$没有定义或者类似的效果。


当前回答

如https://github.com/atom/electron/issues/254所示,问题是由以下代码引起的:

if ( typeof module === "object" && typeof module.exports === "object" ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}

jQuery代码“看到”它在CommonJS环境中运行,并忽略了window。

解决方案真的很简单,而不是通过<script src="…>,你应该这样加载:

<script>window.$ = window.jQuery = require('./path/to/jquery');</script>

注意:路径前的点是必需的,因为它表示它是当前目录。另外,请记住在加载依赖jQuery的任何其他插件之前加载jQuery。

其他回答

1.使用npm安装jQuery。

npm install jquery --save

2.

<!--firstly try to load jquery as browser-->
<script src="./jquery-3.3.1.min.js"></script>
<!--if first not work. load using require()-->
<script>
  if (typeof jQuery == "undefined"){window.$ = window.jQuery = require('jquery');}
</script>

使用yarn安装jquery

yarn add jquery

一个漂亮干净的解决方案

使用npm安装jQuery。(npm安装jquery——保存) 使用它:<script> let $ = require("jquery") </script>

电子常见问题解答:

http://electron.atom.io/docs/faq/

我不能使用jQuery/RequireJS/Meteor/AngularJS在电子。 由于Electron的Node.js集成,有一些额外的 插入DOM的符号,如module, exports, require。这 属性会导致一些库出现问题,因为它们想插入 名称相同的符号。 要解决这个问题,你可以在Electron中关闭节点集成: //在主进程中。

let win = new BrowserWindow({  
 webPreferences: {
 nodeIntegration: false   } });

但如果你想保留使用Node.js和Electron的能力 api,在包含之前,必须重命名页面中的符号 其他库:

<head> 
<script> 
window.nodeRequire = require; 
delete window.require;
delete window.exports; delete window.module; 
</script> 
<script type="text/javascript" src="jquery.js"></script> 
</head>

使用以下代码为我工作

var $ = require('jquery')