Slick Carousel with Browserify / Shim CDN jQuery

I've looked at all the answers on SO related to this issue and nothing is working.

So I have jQuery on my project, loaded via Google CDN. I'm using babelify, browserify and browserify-shim to try and get slick carousel to work but I keep getting the error: Uncaught TypeError: n.element.slick is not a function

My package.json file looks like this:

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

and my js file looks like this:

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

Does anyone have any idea what I'm doing wrong? I really want to use npm for my dependencies, but I can't at the minute because I can;t get this working.

So turns out this is what I needed my package.json to look like:

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

No idea why this works, or what it's doing, but seems to do the trick. If anyone could explain it?