jquery - requireJS 与 JQuery、Masonry 和 ImagesLoaded : Object [object Object] has no method 'imagesLoaded'

Question

这里是 RequireJS 新手。尝试将一些我以前工作正常的 JQuery 代码转换为使用 RequireJS 工作。

我的页面标题通过脚本标签加载三个 JS 文件 - require.js 本身、我的 require.cfg.js 以及具有站点特定功能的 boot/main.js。

相关 require.cfg.js 摘录:

,paths: {
    'boot': 'src/boot'
    ,'jquery': 'lib/jquery.min'
    ,'jquery.masonry': 'lib/plugins/masonry.pkgd.min'
    ,'jquery.imagesloaded': 'lib/plugins/imagesloaded.pkgd.min'
}

,shim: {
    'jquery': {
        exports: 'jQuery'
    }
    ,'jquery.masonry': ['jquery']
    ,'jquery.imagesloaded': ['jquery']
}

启动/main.js:

require([
'jquery',
'jquery.masonry',
'jquery.imagesloaded',
], function($) {

    // The following code worked just fine when I included it in the header of the page as-is
$(function() {

    var $container = $('#container');
    // This doesn't work
    $container.imagesLoaded(function() {
                    // Neither does this
            $('#container').masonry({itemSelector : '.item',});
        });

});

});

我可以确认浏览器正在找到并加载所有这些 JS 文件。我确认如果我这样做:

require([
'jquery',
'jquery.masonry',
'jquery.imagesloaded',
], function($, Masonry, ImagesLoad) {

Masonry 和 ImagesLoaded 变量设置正确......但我不想在没有 jQuery 的情况下继续

但是当我尝试在 JQuery 容器对象上调用 .imagesLoaded() 和 .masonry() 时，我得到:

未捕获类型错误:对象 [object Object] 没有方法“imagesLoaded”

如果我注释掉 imagesLoaded 行，我会得到:

未捕获类型错误:对象 [object Object] 没有方法“masonry”

不确定我在这里做错了什么......？从我在其他 StackOverflow 问题中读到的内容来看，代码对我来说看起来是正确的......？

谢谢!

更新:

如果我像这样以非 JQuery 方式使用此代码，它会起作用:

        var container = document.querySelector('#container');
        imagesLoaded(container, function() {
            var msnry = new Masonry( container, {
                itemSelector: '.item',
            });
        });

Answer 1

也尝试为垫片中的每个插件定义导出...

, paths: {
    boot: 'src/boot'
    , jquery: 'bower_components/jquery'
    , masonry: 'bower_components/masonry',
    , imagesloaded: 'bower_components/imagesloaded'
}
, shim: {
    jquery: {
        exports: 'jQuery'
    }
    , masonry: {
        deps : ['jquery'],
        exports : 'jQuery.masonry'
    }
    , imagesloaded: {
        deps : ['jquery'],
        exports : 'jQuery.imagesLoaded'
    }
}