Slick Carousel avec Browserify/Shim CDN jQuery

Question

J'ai regardé toutes les réponses sur SO liées à ce problème et rien ne fonctionne.

J'ai donc jQuery sur mon projet, chargé via Google CDN. J'utilise babelify, browserify et browserify-shim pour essayer d'obtenir carrousel lisse pour travailler, mais je continue à obtenir l'erreur: Uncaught TypeError: n.element.slick is not a function

Mon fichier package.json ressemble à ceci:

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

et mon js fichier ressemble à ceci:

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 

Est-ce que quelqu'un a une idée de ce que je fais mal? Je veux vraiment utiliser npm pour mes dépendances, mais je ne peux pas à la minute parce que je ne peux pas obtenir ce travail.

Answer 1

Ainsi se révèle ce que je besoin de mon package.json pour ressembler à:

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

Aucune idée pourquoi cela fonctionne, ou ce qu'il fait, mais semble faire l'affaire. Si quelqu'un pouvait l'expliquer?