javascript - 将 SwiperJS 与 Browserify 结合使用

Question

我正在尝试在我的 Browserify 包中使用 SwiperJS 的 jQuery 插件...但是出现以下错误:

Uncaught TypeError: $(...).swiper is not a function

我使用的精简(bear minimal)代码如下:

'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 JS 版本的 Swiper，而不是 jQuery/Zepto 端口。这样做可以修复错误，Swiper 可以正常工作。

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

我使用 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 只是我的选择器，来 self 的 cache 模块 - 看起来像(以防万一你想知道那是什么):

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

希望这最终能对某人有所帮助。不知道为什么 jQuery 版本不起作用。对此有任何进一步的了解，我们将不胜感激。谢谢!