电子：jQuery未定义

315

问题：在使用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那种效果。

jquery  electron 
— 布鲁诺·瓦兹（Bruno Vaz）
source
为什么不仅仅使用电子require功能？

Answers:

759

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）的问题，而无需指定每个库
  • 脚本构建/打包友好（例如，将所有脚本Grunt / Gulp到vendor.js中）
  • 不需要node-integration为假

来源在这里

— 戴尔·哈德斯
source
1
@fareednamrouti是的，但是此解决方案的要点是您不必列出第三方库（它可以工作！）。导入许多库（或自捆脚本）时非常方便
— Dale Harders '16
2
谢谢！就我而言，此解决方案还适用于d3或更低版本的d3的较早版本
— 迎风迎来
2
@DaleHarders原来window.module的值与相同module，因此您的代码无法按预期工作。正确的方法是将其保存module到其他（未使用的）窗口属性中window.tempModule。要确认我的意思，请尝试console.log(module)在您的最后一个声明之后立即进行验证module === undefined。
— Lucio Paiva
1
@Lucio Nope。我们需要保存到window.module，因为这是第三方库期望的位置（浏览器环境）。我认为您在混淆Node.js和浏览器环境。这个技巧有助于开发，因此您的代码可以在浏览器AND节点/电子中运行，而无需任何其他配置。还有许多其他方法可以做到这一点，但这是最简单的恕我直言。
— Dale Harders '16
1
这对于CSP来说是有问题的-没有内联脚本
— Trevor
121

如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。

该解决方案确实很简单，而不是通过加载jQuery <script src="...">，您应该像这样加载：

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

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

— 布鲁诺·瓦兹（Bruno Vaz）
source
1
谢谢，但是我有一个由yeoman创建的有角度的系统。Grunt接受了我所有的Bower依赖项并将它们构建到vendor.js文件中。如何加载jquery，修复您的行并继续需要jquery的其他Bower依赖项？
— bluesky777，2015年
我不明白，vendor.js里面有jquery？如果是这样，您可以使用window。$方法afaik加载vendor.js。
— 布鲁诺·瓦兹
在链接的问题后面的一些评论中有一个更好的解决方案：'node-integration': false作为的选项BrowserWindow。
— Boldewyn 2015年
6
这不会影响其他事情吗？
— 布鲁诺·瓦兹
53

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

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
— 阿莱克斯
source
我发现这是最好的答案，因为我仍然可以使用CDN！无需覆盖任何内容。
— patotoma
53

电子常见问题解答：

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

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

由于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>
— 法兰6
source
@ Fran6如果要加载外部页面怎么办？:(
— georgiosd
此方法有效，但是执行此操作后，我的Electron应用程序将无法关闭-也就是说，我无法退出网页。
— tale852150 '17
34

刚遇到同样的问题

npm install jquery --save

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

为我工作

— 达瓦尔乔汉
source
这正是我最初的回答。
— 布鲁诺·瓦兹
嗨，如何使用materialize.min.jscdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/…做同样的事情。..类似这样的<script> window.Materialize = window.Materialize = require（'Materialize'）; </ script> ??? 有人可以帮忙
— 吗
@BrunoVaz这个答案更干净:)
— moeiscool
20

您可以node-integration: false在浏览器窗口中放入选项。

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

— 穆里洛·费雷斯（Murilo Feres）
source
4
对于不需要节点集成的用户来说，这是一个很好的解决方案。
— 亚当·斯米德
这太棒了，非常适合我。谢谢@Murilo Feres。节点集成选项有什么作用？
— Ahesanali Suthar'1
3
@ 1.4无法正常工作，请使用：let win = new BrowserWindow（{webPreferences：{nodeIntegration：false}}）
— holly
14

一个不错且干净的解决方案

  1. 使用npm安装jQuery。（npm install jquery --save）
  2. 用它： <script> let $ = require("jquery") </script>
— gel鱼
source
8

我面临同样的问题，这对我有用！

使用npm安装jQuery

$ npm install jquery

然后以下列方式之一包含jQuery。

使用脚本标签

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

使用Babel

import $ from 'jquery';

使用Webpack

const $ = require('jquery');
— 亚伯拉罕·埃尔南德斯（Abraham Hernandez）
source
5

我想我理解您的努力，我以不同的方式解决了它。我为包括jQuery在内的js文件使用了脚本加载器。脚本加载器将您的js文件附加到您的vendor.js文件的顶部，这对我来说是神奇的。

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

安装脚本加载程序后，将其添加到启动文件或应用程序文件中。

导入'script！path / your-file.js';

— 梅尔坦·迪肯
source
4

好的，这是另一种选择，如果您想要亲属包括...

<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>
— 埃斯特罗
source
3

如果您使用的是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",
    ...
    ...
]
— 马克斯
source
3

即时通讯和带有电子的Angular App，我的解决方案是：

index.html

<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>

angular.json

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

因此，如果在浏览器上，则从angular.json加载Jquery，否则，如果它是电子构建的应用程序，则将需要模块。

如果要在index.html中导入jquery而不是从angular.json导入，请使用以下解决方案：

<script src="path/to/jquery"></script>
<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>
— 库萨坟墓
source
2

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>
— 阿列克谢·科洛特西（Alexey Kolotsey）
source
2

这对我有用。

<script languange="JavaScript">
     if (typeof module === 'object') {window.module = module; module = undefined;}
</script>

注意事项：

1）将其放在前面的部分中 </head>

2）在</body>标记之前添加Jquery.min.js或Jquery.js

— 维沙尔·戈亚尔（Vishal Goyal）
source
0

您可以尝试以下代码：

mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration:false,
        }
});
— GG
source
0

对于此问题，请使用与Web页面中相同的方式使用JQuery和其他js。但是，Electron具有节点集成功能，因此无法找到您的js对象。您必须进行设置，module = undefined直到正确加载js对象。见下面的例子

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

<!-- normal script imports etc  -->
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>    

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

像给定的输入后，您将可以JQuery在电子中使用和其他东西。

— 基兰·马尼亚（Kiran Maniya）
source
0

只需使用以下命令安装Jquery。

npm install --save jquery

之后，请将belew行放在要使用Jquery的js文件中

let $ = require('jquery')
— 米兰·希尔帕拉
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.