Question

使用bootstrap滑块时出现以下错误（https://github.com/seiyria/bootstrap-slider）在我的Electron（http://electron.atom.io/docs/latest/tutorial/quick-start/）应用中：

“Uncaught TypeError：$（...）。Slider不是函数”

早些时候我也在努力使用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有一个处理“module”的组件，这可能导致异常，就像在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

您有两个选择：

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

在需要时使用require包含jQuery和Slider

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

Answer 2

我能够通过在bootstrap-slider.js中将我的路径放到jquery来解决这个问题

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

这可能是错误的解决方案，但希望一个坏主意可以带来一个好的解决方案：）

Answer 3

昨天在下面找到了解决方案。使用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 all 脚本到vendor.js）
不要求节点集成为假

来源here

如何在Electron中使用bootstrap滑块？

3 个答案: