用Browserify/Shim CDN jlick旋轉木馬jQuery

我已經看過所有關於這個問題的SO上的答案，沒有任何工作。用Browserify/Shim CDN jlick旋轉木馬jQuery

所以我的項目上有jQuery，通過Google CDN加載。我使用babelify，browserify和browserify，墊片，試圖得到光滑轉盤的工作，但我不斷收到錯誤：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，但我不能在一分鐘，因爲我可以讓這個工作。

來源

2017-06-08 Simon Sturgess

所以原來這就是我需要我的package.json的樣子：

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

不知道爲什麼這個作品，或它在做什麼，但似乎這樣的伎倆。如果有人能解釋它？

來源

2017-06-09 14:23:05

用Browserify/Shim CDN jlick旋轉木馬jQuery

回答

相關問題