电子：jQuery 未定义

Question

问题：在使用 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 或类似的东西。

Answer 1

如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 代码 "sees"，其运行在 CommonJS 环境中并忽略 window。

解决方法很简单，而不是通过<script src="...">加载jQuery，你应该这样加载：

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

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

Answer 2

您可以将 node-integration: false 放在 BrowserWindow 的选项中。

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

Answer 3

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

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

Answer 4

我想我理解你的挣扎我稍微解决了它 differently.I 为我的 js 文件使用了脚本加载器，其中包括 jquery.Script 加载器获取你的 js 文件并将其附加到你的 vendor.js 文件对我来说很神奇。

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

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

导入'script!path/your-file.js'；

Answer 5

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>

好处

使用相同的代码同时适用于浏览器和电子
修复了所有第 3 方库（不仅仅是 jQuery）的问题，而无需指定每个库
脚本构建/打包友好（即 Grunt/Gulp 所有脚本到 vendor.js）
不要求 node-integration 为假

来源here

Answer 6

电子常见问题解答：

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

I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.

Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. This causes problems for some libraries since they want to insert the symbols with the same names.

To solve this, you can turn off node integration in Electron:

// In the main process.

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

But if you want to keep the abilities of using Node.js and Electron APIs, you have to rename the symbols in the page before including other libraries:

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

Answer 7

刚遇到同样的问题

npm install jquery --save

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

对我有用

Answer 8

好的，这是另一个选项，如果你想要一个亲戚包括...

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

Answer 9

一个漂亮干净的解决方案

使用 npm 安装 jQuery。 (npm install jquery --save)
使用它：<script> let $ = require("jquery") </script>

Answer 10

<script>
  delete window.module;
</script>

在 jquery 导入之前，您就可以开始了。 more info here.

Answer 11

如果您使用的是 Angular2，您可以使用以下代码创建一个新的 js 文件：

// jquery-electron.js

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

并将其放在 jquery 路径之后，在 .angular-cli.json:

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

Answer 12

使用以下代码为我工作

var $ = require('jquery')

Answer 13

1.Install jQuery 使用 npm。

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>

Answer 14

我遇到了同样的问题，这对我有用！

使用 npm

安装 jQuery

$ npm install jquery

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

Using script tag

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

Using Babel

import $ from 'jquery';

Using Webpack

const $ = require('jquery');

Answer 15

这对我有用。

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

需要考虑的事项：

1) 将其放在 </head>

之前的部分

2) 在 </body> 标签前加入 Jquery.min.js 或 Jquery.js

Answer 16

我正在用电子构建和 Angular 应用程序，我的解决方案如下：

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"
            ]

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

如果您想在 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>

Answer 17

您可以试试下面的代码：

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

Answer 18

对于此问题，请使用 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>

像给定的导入后，你就可以在electron中使用JQuery和其他东西了。

Answer 19

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

npm install --save jquery

之后请在您要使用的js文件中加入下一行Jquery

let $ = require('jquery')

电子：jQuery 未定义

Electron: jQuery is not defined

jquery

electron