Использование SwiperJS с Browserify

Question

Я пытаюсь использовать плагин jQuery SwiperJS в моем комплекте Browserify... но получаю следующую ошибку:

Uncaught TypeError: $ (...). 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

После долгих усилий я решил попробовать версию Swiper для Vanilla JS, в отличие от порта jQuery / Zepto. Это исправило ошибки и Swiper работает.

Конфигурация была немного другой, но в итоге выглядела так:

Модуль My Hero, который использует 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 Swiper, как это без проблем:

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