2017-06-08 13 views
0

私はこの問題に関するSOのすべての答えを見てきましたが、何も問題はありません。Slim Carousel with Browserify/Shim CDN jQuery

私はGoogleのCDN経由でロードされたプロジェクトにjQueryを持っています。 私が動作するように滑らかなカルーセルを試してみて、取得するには、シムをbrowserify browserifyと、babelifyを使用していますが、私はエラーを取得しておいてください。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を使いたいと思っていますが、私はできないので分かりません。

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

この作品、または何それはやっているが、トリックを行うように見える理由はありませんアイデア:

答えて

0

だからこれは私が見えるように私のpackage.jsonを必要とするものであるが判明しました。誰かがそれを説明できたら?