提问者:小点点

电子:未定义jQuery


问题:在使用Electronic进行开发时,当您尝试使用任何需要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,转到控制台视图,单击

元素。您应该看到函数$未定义或类似的内容。


共3个答案

匿名用户

一个更好和更通用的解决办法海事组织:

<!-- 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)的问题,而不必指定每个库
  • 脚本构建/打包友好(即,将所有脚本咕噜咕噜地放到vendor.js中)
  • 不要求node-integration为false

此处来源

匿名用户

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

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

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

解决方案非常简单,不需要通过加载jQuery,而是应该这样加载:

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

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

匿名用户

电子常见问题解答:

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

我不能在电子中使用jQuery/Requirejs/Meteor/Angularjs。

由于Electronic的node.js集成,在DOM中插入了一些额外的符号,比如模块exports,require。这会给某些库带来问题,因为它们希望插入具有相同名称的符号。

要解决这个问题,你可以关闭电子中的节点集成:

//在主进程中。

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

但是如果您想保持使用Node.js和Electronic 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>