ES6でjQueryとMasonryが動作しませんか？

Question

ES6でmasonry-layoutを使用するにはどうすればよいですか？

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 
      }); 
     }); 
    } 
} 

私はこのエラーを持っている：私は、NPMは、以下でそれをインストールしている

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

そのguide：

npm install masonry-layout 

なぜ、どのようにこの問題を解決するために、任意のアイデア？

EDIT：

は、これは私がクラスを呼び出す方法です：

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