问题:在使用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或类似的东西.
Dal*_*ers 711
一个更好,更通用的解决方案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>
优点
node-integration是假的来源于此
Bru*_*Vaz 116
如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.
小智 51
电子FAQ回答:
http://electron.atom.io/docs/faq/
我不能在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>
Aal*_*eks 49
另一种写作方式<script>window.$ = window.jQuery = require('./path/to/jquery');</script>是:
<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
Dha*_*han 31
刚遇到同样的问题
npm install jquery --save
<script>window.$ = window.jQuery = require('jquery');</script>
为我工作
小智 18
您可以node-integration: false在BrowserWindow上放置内部选项.
例如: window = new BrowserWindow({'node-integration': false});
adg*_*ish 13
一个很好的清洁解决方案
npm install jquery --save)<script> let $ = require("jquery") </script>我面临同样的问题，这对我有用！
使用npm安装jQuery
$ npm install jquery
然后以下列方式之一包含jQuery。
使用脚本标签
<script>window.$ = window.jQuery = require('jquery');</script>
使用Babel
import $ from 'jquery';
使用Webpack
const $ = require('jquery');
我想我理解你的挣扎，我以不同的方式解决了它。我为我的 js 文件使用了脚本加载器，其中包括 jquery。脚本加载器获取你的 js 文件并将它附加到你的 vendor.js 文件的顶部，它对我来说很神奇。
https://www.npmjs.com/package/script-loader
安装脚本加载器后，将其添加到您的引导或应用程序文件中。
导入 'script!path/your-file.js';
<script>
delete window.module;
</script>
在你的jquery导入之前,你很高兴.更多信息在这里.
小智 5
只需使用以下命令安装 Jquery。
npm install --save jquery
之后，请在要使用 Jquery 的 js 文件中放入以下行
let $ = require('jquery')