砌體不能在ES6中使用jQuery？

Question

如何在ES6中使用砌體佈局？

ES6：

'use strict'; 

import $ from 'jquery'; 
import Masonry from 'masonry-layout'; 

class Grid { 
    loadMasonry() { 
     window.addEventListener("load",() => { 
      $('.grid').masonry({ 
       // options 
       itemSelector: '.grid-item', 
       percentPosition: true, 
       // gutter: 10, 
       // columnWidth: 200 
      }); 
     }); 
    } 
} 

我有這樣的錯誤：

Grid.js:9 Uncaught TypeError: (0 , _jquery2.default)(...).masonry is not a function

我與故宮以下安裝了其guide：

npm install masonry-layout 

任何想法，爲什麼，以及如何解決這個？

編輯：

這是我如何調用類：

import Grid from './Grid'; 

document.addEventListener("DOMContentLoaded", function(event) { 
    var g = new Grid(); 

    g.loadMasonry(); 
}); 

Answer 1

使用它作爲一個jQuery插件需要更多的設置：你需要安裝一個jquery-bridget庫。

然後，這裏是如何從文檔頁面將其結合在一起的樣本代碼：

var $ = require('jquery'); 
var jQueryBridget = require('jquery-bridget'); 
var Masonry = require('masonry-layout'); 
// make Masonry a jQuery plugin 
jQueryBridget('masonry', Masonry, $); 
// now you can use $().masonry() 
$('.grid').masonry({ 
    columnWidth: 80 
}); 

參考文獻：

• http://masonry.desandro.com/extras.html#webpack