如何在Electron中使用引導滑塊？

Question

當我在Electron（ http://electron.atom.io/docs/latest/tutorial/quick-start/ ）中使用引導程序滑塊（ https://github.com/seiyria/bootstrap-slider ）時，出現以下錯誤）應用：

“未捕獲的TypeError：$（...）。滑塊不是函數”

早些時候我也在努力使用Jquery，但使用以下方法解決了它： https : //github.com/atom/electron/issues/254 ：

window。$ = window.jQuery = require（'/ path / to / jquery'）; 而不是常規的：

引用的原因是查詢包含以下內容：

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. 定期在index.html頁面中包括jQuery和Bootstrap滑塊，並在每個腳本之后分別添加一個腳本，以使其具有全局性，如下所示：

 <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使用require包括jQuery和Slider

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

Answer 2

昨天在下面找到了該解決方案。 為我使用jQuery和Bootstrap Slider。 在底部的學分。

更好，更通用的解決方案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>

優點

• 使用相同的代碼適用於瀏覽器和電子產品
• 修復了所有第三方庫（不僅僅是jQuery）的問題，而無需指定每個庫
• 腳本構建/打包友好（例如，將所有腳本Grunt / Gulp到vendor.js中）
• 不需要節點集成為假

來源在這里

Answer 3

我可以通過將我的 jquery路徑放在bootstrap-slider.js中來解決此問題

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

這可能是錯誤的解決方案，但希望一個壞主意可以帶來一個好主意:)