JQuery Ui и Electron

Недавно я начал создавать настольное приложение с помощью 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>

Ответ 1

Для любого, как я, кто сталкивался с этой попыткой глобально загрузить jQueryUI в ваше электронное приложение - лучший способ сделать это - не установить пакет jquery-ui NPM, а загрузить минимизированный скрипт jQueryUI из CDN, сохранить его локально в папке ресурсов и включите его в свой индекс прямо под строкой, объявляющей вашу глобальную переменную jQuery, и над средствами визуализации, в которых вы хотите ее использовать, например:

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

Это даст доступ ко всем функциям jQueryUI через глобальную переменную jQuery в ваших скриптах рендеринга.

Ответ 2

Пакет jquery-ui специально создан для сборки после установки.

Попробуйте вместо этого пакет jquery-ui-dist: npm я jquery-ui-dist

Тогда вы можете просто потребовать это так:

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

Ответ 3

Если вы хотите, чтобы ваши библиотеки были глобальными, а не как модули 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/

Ответ 4

В случае, если диалоговое окно jQuery-UI импортирует этот модуль:

импортировать 'jquery-ui/ui/widgets/dialog';

Ответ 5

Существует обходной путь для использования JQuery UI с electron. Установите пользовательский интерфейс JQuery с любым менеджером пакетов (например, npm) и используйте его как веб, как показано ниже,

<!-- 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) без необходимости указывать каждую, Script Build/Pack Friendly (то есть Grunt/Gulp все скрипты в vendor.js) и не требует, чтобы node-integration был ложным