为什么 slick carousel 不能与 browserify 一起使用？答案

【问题标题】：why is slick carousel not working with browserify?为什么 slick carousel 不能与 browserify 一起使用？
【发布时间】：2015-08-16 01:02:03
【问题描述】：

我正在尝试使用 slick carousel (http://kenwheeler.github.io/slick/) 并通过 npm 安装。

像这样通过 browserify 包含它：

slick = require('slick-carousel')

尝试像这样运行：

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

没有控制台错误，轮播没有初始化。怎么回事？

【问题讨论】：

请检查 package.json 文件。是否安装了 slick-carousel？
似乎没有安装，但为什么呢？它似乎将一些类应用于我的 dom 元素......
第一次安装，然后使用“slick-carousel”功能。您正在请求文件但未安装“slick-carousel”，那么您如何访问这些功能。
我确实运行了“npm install slick-carousel”，它说：“slick-carousel@1.5.5 node_modules/slick-carousel”那为什么没有安装呢？
检查你的 node_module 文件夹，slick-carousel 文件夹是否存在？

标签： jquery browserify slick.js

【解决方案1】：

注意：不建议编辑库。如果你还想一种解决方法，然后您可以按照以下方式进行操作。

我在使用 slick 和 browserify 时也遇到了同样的问题，但没有一个解决方案对我有用。然后我接受了 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 );

希望它有助于理解问题。

【讨论】：

你能改写吗，用什么替换什么太混乱了。
@nofel 尝试拉最新的光滑轮播，作者可能会解决这个问题。如果仍未修复，则打开 slick carousel 并按照我提到的找到代码块并删除它并粘贴上面的相应代码。
你能过滤你的代码吗？真的很难理解我是否应该找到所有的代码并用少量代码替换它或如何？

【解决方案2】：

由于 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') 调用）。

我更喜欢这个解决方案：

添加 jQuery 作为 NPM 依赖项：npm install --save jquery
使其全球化，例如与browserify-shim's export global 或：window.$ = window.jQuery = require('jquery');
然后您可以安全地使用require('slick-carousel'); 要求 Slick

【讨论】：

【解决方案3】：

我已经用另一种方式解决了这个问题。有 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'));

【讨论】：

【解决方案4】：

尝试添加
$ = require('jquery')
之前
slick = require('slick-carousel')

它对我有用。

【讨论】：

请edit您的回答并解释为什么这有帮助。

【解决方案5】：

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

【讨论】：

然后用作从'slick-carousel'导入slick
您应该添加解释为什么这是答案。