使用SwiperJS与Browserify

Question

我试图在我的Browserify jQuery中使用SwiperJS的bundle...but插件，得到以下错误：

Uncaught：$(.).swiper不是函数

我正在使用的简化(熊最小)代码如下：

'use strict';

global.$ = require('jquery');
require('./plugins/swiper.jquery.js');

$(function() {
    $('#hero').swiper();
});

在SwiperJS插件的底部，他们这样做：

if (typeof(module) !== 'undefined')
{
    module.exports = window.Swiper;
}
else if (typeof define === 'function' && define.amd) {
    define([], function () {
        'use strict';
        return window.Swiper;
    });
}

这似乎正确地设置了它的这种用途。

有人能帮我弄清楚为什么会发生这种事吗？可能是很简单的事，我肯定。

Answer 1

在拔了很多头发之后，我决定尝试Vanilla版的Swiper，而不是jQuery / Zepto端口。这样做修正了错误和斯威珀的作品。

配置略有不同，但最终看起来如下所示：

我的英雄模块，它使用Swiper:

'use strict';

var cache = require('./cache.js'),
    swiper = require('../plugins/swiper.js');

function init() {

    if (cache.$hero.length) {

        var hero;

        hero = new swiper(cache.$hero, {
            autoplay: 2000,
            direction: 'horizontal',
            loop: true,
            speed: 700,
            grabCursor: true
        });

        console.info(hero);

    }

}

module.exports = function() {

    return init();

};

cache.$hero只是我的选择器，它来自于我的cache模块--看起来类似于(以防您想知道这是关于什么的)：

var cache = {
    $hero: $('#hero')
};

希望这能帮到别人。不知道为什么jQuery版本不起作用。如对此有任何进一步了解，将不胜感激。谢谢!

Answer 2

您需要将插件公开给全局插件。我想:)

 'use strict';

 global.$ = require('jquery');
 window.Swiper = require('./plugins/swiper.jquery.js');
 console.info(jQuery.fn.Swiper); //to test if the plugin has been loaded

Answer 3

我使用的是像这样的idangero刷卡，没有问题：

require('./swiper.jquery.min.js');
var Swiper = require('./swiper.min.js');

var swiper = new Swiper('.swiper-container', {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: 5000,
    autoplayDisableOnInteraction: false,
    effect: 'fade',
    fade: { crossFade : true } 
});