电子：未定义jQuery

最新推荐文章于 2024-03-13 09:42:15 发布

CHCH998

最新推荐文章于 2024-03-13 09:42:15 发布

阅读量155

点赞数

文章标签： jquery electron

原文链接：https://oldbug.net/q/2cSt6/Electron-jQuery-is-not-defined

版权

本文翻译自：Electron: jQuery is not defined

Problem: while developing using Electron, when you try to use any JS plugin that requires jQuery, the plugin doesn't find jQuery, even if you load in the correct path using script tags. 问题：在使用Electron开发时，当您尝试使用任何需要jQuery的JS插件时，即使您使用脚本标签加载了正确的路径，该插件也找不到jQuery。

For example, 例如，

<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>

Running this code above wouldn't work. 在上面运行此代码将不起作用。 In fact, open up DevTools, go to the Console view, and click on the <p> element. 实际上，打开DevTools，进入控制台视图，然后单击<p>元素。 You should see that function $ is not defined or something to that effect. 您应该看到function $ is not defined或类似的结果。

#1楼

参考：https://stackoom.com/question/2cSt6/电子-未定义jQuery

#2楼

As seen in https://github.com/atom/electron/issues/254 the problem is caused because of this code: 如https://github.com/atom/electron/issues/254所示，此问题是由于以下代码引起的：

if ( typeof module === "object" && typeof module.exports === "object" ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}

The jQuery code "sees" that its running in a CommonJS environment and ignores window . jQuery代码“看到”它在CommonJS环境中运行，并且忽略window 。

The solution is really easy , instead of loading jQuery through <script src="..."> , you should load like this: 该解决方案非常简单 ，您无需像通过<script src="...">加载jQuery那样进行加载：

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

Note: the dot before the path is required , since it indicates that it's the current directory. 注意： 路径前面的点是必需的 ，因为它指示它是当前目录。 Also, remember to load jQuery before loading any other plugin that depends on it . 另外， 请记住在加载任何其他依赖jQuery的插件之前先加载jQuery 。

#3楼

You can put node-integration: false inside options on BrowserWindow. 您可以将node-integration: false放在BrowserWindow的选项内。

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

#4楼

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

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

#5楼

I think i understand your struggle i solved it little bit differently.I used script loader for my js file which is including jquery.Script loader takes your js file and attaching it to top of your vendor.js file it did the magic for me. 我想我理解您的努力，我以不同的方式解决了它。我为包括jQuery在内的js文件使用了脚本加载器。脚本加载器将您的js文件附加到您的vendor.js文件的顶部，这对我来说是神奇的。

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

after installing the script loader add this into your boot or application file. 安装脚本加载程序后，将其添加到启动文件或应用程序文件中。

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

#6楼

A better and more generic solution IMO: 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>

Benefits 好处

Works for both browser and electron with the same code 使用相同的代码适用于浏览器和电子产品
Fixes issues for ALL 3rd-party libraries (not just jQuery) without having to specify each one 修复了所有第三方库（不仅仅是jQuery）的问题，而无需指定每个库
Script Build / Pack Friendly (ie Grunt / Gulp all scripts into vendor.js) 脚本构建/打包友好（例如，将所有脚本Grunt / Gulp到vendor.js中）
Does NOT require node-integration to be false 不需要node-integration为假