电子: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，转到Console视图，然后单击<p>元素。你应该看到function $ is not defined或类似的东西。

163051 次浏览
小开

正如在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的插件之前先加载jQuery。

小开

你可以把node-integration: false放在BrowserWindow的选项里面。

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

小开

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

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

我想我理解你的挣扎，只是解决方法有点不同。我使用脚本加载器为我的js文件，其中包括jquery。脚本加载器需要你的js文件，并将其附加到你的vendor.js文件的顶部，它为我做了魔法。

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

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

进口“脚本!路径/ your-file.js”;

小开
最佳答案

在我看来，更好、更通用的解决方案是:

<!-- 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)
  • NOT要求node-integration为假

源在这里

小开

电子常见问题解答:

< a href = " http://electron.atom。io / docs /常见问题/ noreferrer“rel = > 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，在包含之前，必须重命名页面中的符号 其他库:< / p > 
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports; delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
小开

刚刚遇到了同样的问题

npm install jquery --save

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

为我工作

小开

这里有另一个选项，如果你想要一个相对包含。

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

一个漂亮干净的解决方案

  1. 使用npm安装jQuery。(npm install jquery --save)
  2. 使用它:<script> let $ = require("jquery") </script>
小开 
<script>
delete window.module;
</script>

在jquery导入之前，你就可以开始了。更多信息请点击这里。

小开

如果你使用的是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",
...
...
]
小开

使用以下代码为我工作

var $ = require('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>
小开

我也面临着同样的问题，这对我来说很有效!

使用npm安装jQuery

$ npm install jquery

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

使用脚本标记

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

使用巴别塔

import $ from 'jquery';

使用Webpack

const $ = require('jquery');
小开

这对我很有用。

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

需要考虑的事情:

1)把它放在</head>之前的section中

2)在</body>标记之前包含Jquery.min.js或Jquery.js

小开

我用电子构建和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. html中导入。Json使用以下解决方案:

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

您可以尝试以下代码:

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

对于这个问题，使用JQuery和其他js，就像你在Web Page中使用的一样。但是，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>

在像given那样导入之后，你将能够在electron中使用JQuery和其他东西。

小开

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

npm install --save jquery

之后，请把下面的行在js文件，你想使用Jquery

let $ = require('jquery')
小开

2022年。这对我很管用。

安装JQuery

npm install jquery --save
使用script标签将jquery添加到你的index.html文件中。 src应该是你的node_modules文件夹

中jquery的路径 
    <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>

现在JQuery在你的渲染进程中可用/定义为$ (renderer.js文件)

小开

使用yarn安装jquery

yarn add jquery

提交答案