如何在 Electron 中使用引导滑块？答案

【问题标题】：How do I use bootstrap slider in Electron?如何在 Electron 中使用引导滑块？
【发布时间】：2015-12-01 13:46:02
【问题描述】：

我收到以下错误，当我使用自举滑块（https://github.com/seiyria/bootstrap-slider）在我的电子（http://electron.atom.io/docs/latest/tutorial/quick-start/）应用程式：

“未捕获类型错误：$（...）滑块不是一个函数” P>

早些时候，我还使用jQuery挣扎，但使用解决它： https://github.com/atom/electron/issues/254：

。

窗口$ = window.jQuery =需要（ '/路径/到/ jquery的'）; 代替常规的：

引述的原因是查询包含沿着此路线的东西：

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

我不明白什么是用它来引导滑块以正确的方式。 P>

我可以看到，自举-slider.js具有分量对付“模块”，这可能会引起异常就像在jquery的。 P>

(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);
    }

请告诉我如何处理这个问题。 P>

【问题讨论】：

标签： javascript jquery twitter-bootstrap node-webkit nativeapplication

【解决方案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');

【讨论】：

这适用于 jQuery，但不适用于滑块。它仍然一直说滑块不是功能。我正在使用 Electron 1.7.12、jQuery 1.11.0、Bootstrap 3.3.5 和 Bootstrap Slider 9.7.0。

【解决方案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>

好处

浏览器和电子都使用相同的代码
修复所有第 3 方库（不仅仅是 jQuery）的问题，而无需指定每个库
脚本构建/打包友好（即 Grunt / Gulp all 脚本到 vendor.js)
不要求节点集成为假

来源here

【讨论】：

【解决方案3】：

我可以通过在 bootstrap-slider.js 中放置 my 到 jquery 的路径来解决此问题

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

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

【讨论】：