问题:在使用Electronic进行开发时,当您尝试使用任何需要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,转到控制台视图,单击元素。您应该看到
函数$未定义
或类似的内容。
一个更好和更通用的解决办法海事组织:
<!-- 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
为false此处来源
如https://github.com/atom/electronic/issues/254所示,问题是由以下代码引起的:
if ( typeof module === "object" && typeof module.exports === "object" ) {
// set jQuery in `module`
} else {
// set jQuery in `window`
}
jQuery代码“看到”它在CommonJS环境中运行,并忽略window
。
解决方案非常简单,不需要通过
加载jQuery,而是应该这样加载:
<script>window.$ = window.jQuery = require('./path/to/jquery');</script>
注意:路径前的点是必需的,因为它表示它是当前目录。另外,请记住在加载依赖于jQuery的任何其他插件之前加载jQuery。
电子常见问题解答:
http://electron.atom.io/docs/faq/
我不能在电子中使用jQuery/Requirejs/Meteor/Angularjs。
由于Electronic的node.js集成,在DOM中插入了一些额外的符号,比如模块exports,require。这会给某些库带来问题,因为它们希望插入具有相同名称的符号。
要解决这个问题,你可以关闭电子中的节点集成:
//在主进程中。
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: false } });
但是如果您想保持使用Node.js和Electronic 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>