Masonry 在 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

我已经用 npm 安装了它 guide:

npm install masonry-layout

知道为什么以及如何解决这个问题吗？

编辑：

我就是这样称呼 class:

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

Masonry 在 ES6 中不能与 jQuery 一起使用？

Masonry does not work with jQuery in ES6?

node.js

ecmascript-6

masonry