Question

我试图在我的Browserify包中使用SwiperJS的jQuery插件...但是得到以下错误：

未捕获的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

经过多次拔毛后，我决定尝试使用Swilla的Vanilla JS版本，而不是jQuery / Zepto端口。这样做可以修复错误并且Swiper可以正常工作。

配置有点不同但最终看起来像这样：

使用Swiper的My Hero模块：

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

将SwiperJS与Browserify一起使用

3 个答案: