电子：jQuery未定义

问题：在使用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，转到控制台视图，然后单击<p>元素。您应该看到function $ is not defined或类似的东西。

为什么不只使用电子要求功能呢？

#1 楼

更好，更通用的IMO解决方案：

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

使用相同的代码可同时用于浏览器和电子产品
解决所有第三方库（不仅仅是jQuery）的问题，而不必指定每个库
脚本构建/打包友好（即将所有脚本都咕unt咕Gu地打包到vendor.js中）
不需要node-integration为假

此处来源

@fareednamrouti是的，但是此解决方案的要点是您不必列出第三方库（它可以工作！）。导入许多库（或自捆绑脚本）时非常方便

–戴尔·哈德斯（Dale Harders）
16年8月15日在1:47

谢谢！就我而言，此解决方案也适用于d3或更早版本的d3

–不利因素
16-10-5在18:57

@DaleHarders事实证明window.module以与module相同的值开头，因此您的代码无法按预期工作。正确的方法是将模块保存到其他（未使用的）窗口属性中，例如window.tempModule。要确认我的意思，请在最后一条语句后尝试console.log（module），以验证现在module === undefined。

– Lucio Paiva
16-11-5在23:15

@Lucio Nope。我们需要保存到window.module，因为这是第三方库期望的位置（浏览器环境）。我认为您在混淆Node.js和浏览器环境。该技巧有助于开发，因此您的代码可以在浏览器AND节点/电子中运行，而无需任何其他配置。还有许多其他方法可以做到这一点，但这是最简单的恕我直言。

–戴尔·哈德斯（Dale Harders）
16年4月4日在5:59

对于CSP，这是有问题的-没有内联脚本

–特雷弗
18 Mar 20 '18在4:35

#2 楼

如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="...">加载jQuery，您应该像这样加载：

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

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

谢谢，但是我有一个由yeoman创建的角度系统。 Grunt接受了我所有的Bower依赖项并将它们构建到vendor.js文件中。如何加载jquery，修复您的行并继续需要jquery的其他Bower依赖项？

–bluesky777
2015年10月7日23:10

我不明白，vendor.js里面有jquery？如果是这样，您可以使用window。$方法afaik加载vendor.js。

–布鲁诺·瓦兹（Bruno Vaz）
2015年10月10日，下午2:01

在链接的问题后面的一些评论中有一个更好的解决方案：'node-integration'：false作为BrowserWindow的选项。

– Boldewyn
15年12月17日在15:55

这不会影响其他事情吗？

–布鲁诺·瓦兹（Bruno Vaz）
15年12月18日在16:57

#3 楼

电子常见问题解答：

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

我不能在其中使用jQuery / RequireJS / Meteor / AngularJS Electron。

由于Electron的Node.js集成，在DOM之类的模块（导出，需求）中插入了一些额外的
符号。这
导致某些库出现问题，因为它们想插入具有相同名称的
符号。

要解决此问题，可以在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>

@ Fran6如果要加载外部页面怎么办？ :(

– geoorgiosd
16 Dec 17'在16:36

这可以正常工作，但是执行此操作后，我的Electron应用程序将无法关闭-也就是说，我无法退出网页。

–tale852150
17年8月4日在20:13

#4 楼

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

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

我发现这是最佳答案，因为我仍然可以使用CDN！无需覆盖任何内容。

– patotoma
19年6月1日19:02

#5 楼

刚刚遇到了同样的问题

npm install jquery --save

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

为我工作

这正是我最初的回答。

–布鲁诺·瓦兹（Bruno Vaz）
16-10-9在19:04

嗨，如何使用materialize.min.jscdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/…做同样的事情。 ..类似这样的

编程黑洞网