问题:在使用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>元素。你应该看到函数$没有定义或者类似的效果。
如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="…>,你应该这样加载:
<script>window.$ = window.jQuery = require('./path/to/jquery');</script>
注意:路径前的点是必需的,因为它表示它是当前目录。另外,请记住在加载依赖jQuery的任何其他插件之前加载jQuery。
我用电子构建和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>