jQuery Ui and Electron

Question

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

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

Node包依赖项：

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

Answer 1

对于像我这样试图将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函数。

Answer 2

jquery-ui软件包是专门在安装后构建的。

尝试使用jquery-ui-dist包：npm i jquery-ui-dist

然后您就可以这样要求它：

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

Answer 3

如果您希望将库作为Globals而不是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/

Answer 4

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

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

Answer 5

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

<!-- 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与电子结合使用是一种更为简单和通用的解决方案。按给定方式使用的好处是，它适用于具有相同代码的浏览器和电子设备，解决了所有第三方库（不仅限于jQuery）的问题，而无需指定每个库，脚本构建/打包友好（例如，将所有脚本都咕unt咕Gu的/ Gulp到vendor.js中）和不需要node-integration为假