砌体不适用于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）（...）。砌体不是函数

我已经按照npm的指南安装了它：

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