Electron：未定义 jQuery答案

【问题标题】：Electron: jQuery is not definedElectron：未定义 jQuery
【发布时间】：2015-12-13 19:55:47
【问题描述】：

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

【问题讨论】：

为什么不直接使用 Electron require 函数？

标签： jquery electron

【解决方案1】：

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

npm install --save jquery

之后请在你想使用 Jquery 的 js 文件中加入下面一行

let $ = require('jquery')

【讨论】：

【解决方案2】：

对于这个问题，使用 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和其他东西了。

【讨论】：

【解决方案3】：

你可以试试下面的代码：

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

【讨论】：

就我而言，这是一个有效的方法。或者，您只需删除/注释掉/nodeIntegration: true 的行即可。

【解决方案4】：

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

使用 npm

安装 jQuery

$ npm install jquery

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

使用脚本标签

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

使用通天塔

import $ from 'jquery';

使用 Webpack

const $ = require('jquery');

【讨论】：

这一个为我工作。非常感谢！

【解决方案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）的问题，而无需指定每个库
Script Build / Pack Friendly（即 Grunt / Gulp 所有脚本到 vendor.js 中）
不要求node-integration 为假

来源here

【讨论】：

@fareednamrouti 是的，但这个解决方案的重点是您不必列出第 3 方库（它只是有效！）。当您导入许多库（或自捆绑脚本）时很方便
谢谢！就我而言，此解决方案也适用于 d3 的旧版本，例如 d3 v3 或更低版本
@DaleHarders 原来window.module 以与module 相同的值开头，因此您的代码无法按预期工作。正确的做法是将module 保存到其他（未使用的）窗口属性，例如window.tempModule。要确认我所说的，请在您的最后一条语句之后尝试console.log(module) 以验证现在module === undefined。
@Lucio 不。我们需要保存到 window.module 因为这是第 3 方库所期望的位置（浏览器环境）。我认为您混淆了 Node.js 和浏览器环境。这个技巧是为了帮助开发，这样你的代码就可以在浏览器和节点/电子中运行，而无需任何额外的配置。还有许多其他方法可以做到这一点，但这是最简单的恕我直言。
这是 CSP 的问题——没有内联脚本

【解决方案6】：

我正在使用电子构建和 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"
            ]

所以如果在浏览器上，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>

【讨论】：

【解决方案7】：

这对我有用。

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

需要考虑的事项：

1) 把这个放在</head>之前的部分

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

【讨论】：

【解决方案8】：

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>

【讨论】：

【解决方案9】：

使用以下代码为我工作

var $ = require('jquery')

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

在您导入 jquery 之前，一切顺利。 more info here.

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

好的，如果你想要一个相对包含的话，这里还有一个选项...

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

【讨论】：

【解决方案14】：

刚遇到同样的问题

npm install jquery --save

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

为我工作

【讨论】：

这正是我原来的答案所说的。
嗨，如何对 materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… 做同样的事情。 .. 像这样 ???有人可以帮忙吗

【解决方案15】：

电子常见问题解答：

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>

【讨论】：

@Fran6 如果我正在加载外部页面，我该怎么办？ :(
这行得通，但这样做之后，我的 Electron 应用程序不会关闭——也就是说，我无法退出网页。

【解决方案16】：

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

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

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

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

【讨论】：

【解决方案17】：

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

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

【讨论】：

这对于不需要节点集成的用户来说是一个很好的解决方案。
这太棒了，非常适合我。谢谢@Murilo Feres。节点集成选项有什么作用？
不工作@1.4，请使用 : let win = new BrowserWindow({ webPreferences: { nodeIntegration: false } })

【解决方案18】：

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

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

【讨论】：

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

【解决方案19】：

正如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 用 angular 创建的系统。 Grunt 获取我所有的 bower 依赖项并将它们构建到 vendor.js 文件中。如何加载 jquery，修复你的行，并继续其他需要 jquery 的 bower 依赖项？
不明白，vendor.js里面有jquery吗？如果是这样，您可以使用此 window.$ 方法加载 vendor.js，afaik。
链接问题后面的一些 cmets 有一个更好的解决方案：'node-integration': false 作为BrowserWindow 的选项。
这不会影响其他事情吗？