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，转到Console视图，然后单击<p>元素。您应该看到function $ is not defined或其他相似的内容。

Answer 1

更好，更通用的解决方案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为假

来源here

Answer 2

如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代码＆＃34;看到＆＃34;它在CommonJS环境中运行并忽略window。

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

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

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

Answer 3

电子常见问题答案：

dt.year

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

由于Electron的Node.js集成，还有一些额外的功能   插入DOM的符号，如module，exports，require。这个   导致某些库出现问题，因为他们想要插入   具有相同名称的符号。

要解决此问题，您可以在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>

Answer 4

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

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

Answer 5

刚遇到同样的问题

npm install jquery --save

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

为我工作

Answer 6

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

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

Answer 7

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

在你的jquery导入之前

，你很高兴。 more info here

Answer 8

我想我理解你的努力我解决了一点点不同。我使用脚本加载器为我的js文件，包括jquery.Script加载器获取你的js文件并将它附加到你的vendor.js文件顶部它做了魔术对我来说。

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

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

import＆＃39; script！path / your-file.js＆＃39;;

Answer 9

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

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

Answer 10

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

使用 npm

安装jQuery

$ npm install jquery

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

使用脚本标签

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

使用Babel

import $ from 'jquery';

使用Webpack

const $ = require('jquery');

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

im建筑和带电子的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>

Answer 13

使用以下代码为我工作

var $ = require('jquery')

Answer 14

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>

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

您可以尝试以下代码：

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

Answer 17

对于此问题，请使用JQuery和其他与Web页中相同的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和其他东西。

Answer 18

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

npm install --save jquery

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

let $ = require('jquery')

电子：jQuery没有定义

18 个答案: