带有 Browserify / Shim CDN jQuery 的 Slick Carousel答案

【问题标题】：Slick Carousel with Browserify / Shim CDN jQuery带有 Browserify / Shim CDN jQuery 的 Slick Carousel
【发布时间】：2017-11-09 21:10:55
【问题描述】：

我已经查看了与此问题相关的所有关于 SO 的答案，但没有任何效果。

所以我的项目中有 jQuery，通过 Google CDN 加载。我正在使用 babelify、browserify 和 browserify-shim 来尝试让光滑的轮播工作，但我不断收到错误消息：Uncaught TypeError: n.element.slick is not a function

我的 package.json 文件如下所示：

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

我的 js 文件如下所示：

import { $, jQuery } from 'jquery'
import slick from 'slick-carousel'

class Carousel {
    constructor(props) {
        this.element = props.element
        this.type = this.element.data('carousel-type') || 'default'
        this.settings = {
            arrows: true,
            dots: true,
            slidesToShow: this.element.data('slides') || 1,
            infinite: false,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2
                    }
                },
                {
                    breakpoint: 568,
                    settings: {
                        slidesToShow: 1
                    }
                }
            ]
        }

        if (this.type === 'mobile') {
            this.settings.arrows = false
            this.settings.dots = false
        }
        this.initializeCarousel()

    }

    initializeCarousel = () => {
        this.element.slick(this.settings)
    }
}

export default Carousel

有人知道我做错了什么吗？我真的很想为我的依赖项使用 npm，但我现在不能，因为我不能让它工作。

【问题讨论】：

标签： javascript jquery browserify slick.js browserify-shim

【解决方案1】：

原来这就是我需要的 package.json 的样子：

"browserify": {
    "transform": [ "browserify-shim" ]
  },
  "browser": {
    "slick-carousel": "./node_modules/slick-carousel/slick/slick.js"
  },
  "browserify-shim": {
    "jquery": "global:jQuery"
  }

不知道为什么会这样，或者它在做什么，但似乎可以解决问题。谁能解释一下？

【讨论】：