为什么光滑的轮播无法使用browserify?

时间:2015-06-02 09:47:29

标签: jquery browserify slick.js

我试图使用光滑的轮播(http://kenwheeler.github.io/slick/)并通过npm安装。

通过browserify包含它:

slick = require('slick-carousel')

试图像这样跑:

$('.gallery__carousel').slick();

没有控制台错误,轮播没有初始化。发生了什么事?

5 个答案:

答案 0 :(得分:3)

  

注意:不建议编辑库。如果还是你想要的话   解决方法,然后您可以按照以下方式进行操作。

我在浏览器中使用slick也遇到了同样的问题,但没有一个解决方案适合我。然后我把一个带入了slick.js并改变了 -

查找:

(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}(function($) {

替换:

;(function ( $, window, document, undefined ) {

添加最后一行 -

查找

}));

替换:

})( jQuery, window, document );

希望有助于理解这个问题。

答案 1 :(得分:1)

由于Slick v1.5.x的代码,问题出现了:

(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }

}

作者假设,如果您使用CommonJS模块加载器(如Browserify),您应该在依赖项中使用jQuery(它直接使用require('jquery')调用)。

我更喜欢这个解决方案:

  1. 将jQuery添加为NPM依赖项:npm install --save jquery
  2. 让它全球化,例如与browserify-shim's export global 或者:window.$ = window.jQuery = require('jquery');
  3. 然后您可以通过require('slick-carousel');
  4. 安全地要求Slick

答案 2 :(得分:1)

我用另一种方式解决了这个问题。有npm包slick-carousel-browserify。 所以:

npm install slick-carousel-browserify --save-dev

$ = require ('./../../bower_components/jquery/dist/jquery.js');
slick = require('slick-carousel-browserify');
slick($('.selector'));

答案 3 :(得分:0)

尝试添加
$ = require('jquery')

slick = require('slick-carousel')

它对我有用。

答案 4 :(得分:0)

"browserify-shim": {
"jquery": "global:jQuery",
     "slick-carousel": {
      "depends": [
        "jquery: jQuery"
      ],
      "exports": "$.fn.slick"
    }
  },
  "browserify": {
    "transform": [
     "browserify-shim"
    ]
  }