Javascript 带Browserify/Shim CDN jQuery的光滑转盘

我已经看过了所有与这个问题相关的答案，但没有任何结果

所以我的项目中有jQuery，通过GoogleCDN加载。 我正在使用babelify、browserify和browserify shim来尝试让slick carousel工作，但我不断收到错误：

Uncaught TypeError:n.element.slick不是一个函数

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

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

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

我的js文件如下所示：

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

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来处理我的依赖关系，但我现在不能，因为我可以；我无法让它正常工作。

因此，这就是我需要的package.json的外观：

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

不知道为什么会这样，也不知道它在做什么，但似乎做到了。如果有人能解释的话