Question

我已经查看了与此问题相关的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作为我的依赖项，但我不能在那一刻因为我可以做到这一点。

Answer 1

事实证明这就是我需要我的package.json看起来像：

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

不知道为什么会这样，或者它正在做什么，但似乎可以做到这一点。如果有人能解释一下吗？

光滑的Carousel与Browserify / Shim CDN jQuery

1 个答案: