Как мне использовать слайдер начальной загрузки в Electron?

Question

Я получаю следующую ошибку при использовании ползунка начальной загрузки ( https://github.com/seiyria/bootstrap-slider) в моем электронном ( http://electron.atom.io/docs/latest/tutorial/quick-start/) приложение:

"Uncaught TypeError: $ (...). Слайдер не является функцией"

Ранее я также боролся с использованием Jquery, но решил это с помощью: https://github.com/atom/electron/issues/254:

window. $ = window.jQuery = require ('/ path / to / jquery'); вместо обычного:

Причина была в том, что Query содержит что-то вроде этого:

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

Я не понимаю, как правильно использовать его для начальной загрузки слайдера.

Я мог видеть, что в bootstrap-slider.js есть компонент, имеющий дело с "модулем", который может вызывать аномалию, как в jquery.

(function(root, factory) {
    if(typeof define === "function" && define.amd) {
            define(["jquery"], factory);
    } else if(typeof module === "object" && module.exports) {
            var jQuery; 
            try {   
                    jQuery = require("jquery");
            } catch (err) { 
                    jQuery = null; 
            }       
            module.exports = factory(jQuery);
    } else {
            root.Slider = factory(root.jQuery);
    }       

Подскажите пожалуйста как с этим бороться.

Answer 1

У вас есть 2 варианта:

1. Регулярно включайте ползунок jQuery и Bootstrap на страницу index.html со скриптом после каждого, чтобы сделать их глобальными, например:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script type="application/javascript">
    if (typeof module === 'object' && typeof module.exports !== 'undefined') {
        window.$ = window.jQuery = module.exports;
    }
</script>
<script src="path/to/bootstrap-slider.js"></script>
<script type="application/javascript">
    if (typeof module === 'object' && typeof module.exports !== 'undefined') {
        window.Slider = module.exports;
    }
</script>

2. использование require включать jQuery и Slider, когда они вам нужны

var $ = require('jquery');
var Slider = require('bootstrap-slider');

Answer 2

Нашел это решение ниже вчера. Работал для меня как с jQuery, так и с Bootstrap Slider. Кредиты на дне.

Лучше более общее решение ИМО:

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

Выгоды

• Работает как для браузера, так и для электронного с тем же кодом
• Исправляет проблемы для ВСЕХ сторонних библиотек (не только jQuery) без необходимости указывать каждую
• Script Build / Pack Friendly (т.е. Grunt / Gulp все скрипты в vendor.js)
• НЕ требует, чтобы интеграция узлов была ложной

источник здесь

Answer 3

Я смог исправить это, поместив свой путь к jquery в bootstrap-slider.js

Line 41: jQuery = require("my/path/to/jquery-2.1.4.min.js");

Возможно, это неправильное решение, но, надеюсь, плохая идея может привести к хорошей:)