JQuery Ui 和 Electron

Posted 2023-03-08

【中文标题】JQuery Ui 和 Electron

【英文标题】：JQuery Ui and Electron

【发布时间】：2016-04-01 19:54:48

【问题描述】：

我最近开始尝试使用Electron 制作桌面应用程序，并让 Jquery 在应用程序中运行。

我用NPM install package -save安装了以下包

节点包依赖：

"electron-prebuilt": "^0.36.0",
"jquery": "^2.1.4",
 "jquery-ui": "^1.10.5"

我正在使用以下代码运行 Jquery 和 Jquery Ui

window.$ = window.jQuery = require('jQuery');
require("jquery-ui");

问题： Jquery 已在整个应用程序中加载，但 UI 没有。

html EG：

<div id="bod">
  text
</div>
<script>
  $( "#bod" ).click(function()
      var div = $("<div></div>").load("./html/testDialogue.html" );
      console.log( div );// jquery works like expected
      $(this).dialog();// UI not apart of JQuery extensions.. or loaded at all
  );
</script>

【问题讨论】：

运行$.ui.version查看jquery UI是否加载

您在电子构建的检查员控制台中遇到的错误提供了

【参考方案1】：

感谢@Morgan，这对 Electron 有帮助。 在 html 文件中添加波纹管脚本

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

或者在html页面的js文件中需要有

let $ = jQuery = require('jquery'); 
global.$ = global.jQuery = $; 
window.$ = window.jQuery = $; 

【参考方案2】：

有一种解决方法可以将JQuery UI 与electron 一起使用。使用任何包管理器（如 npm）安装 JQuery UI，并像下面给出的 Web 一样使用它，

<!-- 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-ui.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

将 JQuery UI 与电子一起使用是更简单和通用的解决方案。通过给定方式使用的好处是它适用于具有相同代码的浏览器和电子， 修复了所有第 3 方库（不仅仅是 jQuery）的问题，而无需指定每个库， 脚本构建/打包友好（即 Grunt / Gulp 所有脚本到 vendor.js）和 不需要node-integration 为假

【参考方案3】：

jquery-ui 包是专门为安装后构建的。

改用jquery-ui-dist 包：npm i jquery-ui-dist

那么你可以像这样要求它：

var $ = jQuery = require('jquery')
require('jquery-ui-dist/jquery-ui')

【参考方案4】：

如果 jQuery-UI 对话框通过以下方式导入该模块：

导入'jquery-ui/ui/widgets/dialog';

【参考方案5】：

对于像我这样遇到这种尝试将 jQueryUI 全局加载到您的电子应用程序中的其他人 - 最好的方法不是安装 jquery-ui NPM 包，而是从 CDN 下载缩小的 jQueryUI 脚本，将其存储在本地资源文件夹中，并将其包含在索引中，直接在声明全局 jQuery 变量的行下方和要在其中使用它的渲染器上方，如下所示：

<script>window.$ = window.jQuery = require('jquery');</script>
<script src="../assets/js/jquery-ui.min.js"></script>
<script src="render.js"></script>

这将允许通过渲染脚本中的全局 jQuery 变量访问所有 jQueryUI 函数。

【讨论】：

感谢@Morgan，这对 Electron 有帮助。 或者在 html 页面的 js 文件中需要 let $ = jQuery = require('jquery');全局.$ = 全局.jQuery = $; window.$ = window.jQuery = $;

【参考方案6】：

如果您希望您的库作为全局而不是 AMD 模块，您可以使用 bower 安装依赖项并将脚本添加到 index.html 文件中，就像在常规网站中一样。在 Jquery 的情况下，您仍然需要它并声明全局变量，因为 Jquery 检测在哪个上下文中运行。

// Expose jQuery and $ identifiers, even in
// AMD (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if ( typeof noGlobal === strundefined ) 
    window.jQuery = window.$ = jQuery;

但对于 JqueryUI，我建议将其安装为全局。 JqueryUI 可能也在检测上下文。如果是这种情况，它应该推断没有要附加的全局变量。这里他们说如何将它用作 AMD 模块。

https://learn.jquery.com/jquery-ui/environments/amd/