Laravel 5.7中npm包安装问题：masonry-layout无法正常调用

兄弟，我之前在Laravel项目里用npm装这俩插件时也踩过一模一样的坑，给你梳理下几个关键问题点和解决办法：

1. 确保jQuery先于插件挂载到全局 #

Masonry和imagesLoaded都是基于jQuery的插件，必须保证jQuery已经被全局注册。Laravel默认在bootstrap.js里已经有这段代码，但要确认它在你引入插件的代码之前：

// bootstrap.js 开头的代码，务必保留且顺序正确
window.$ = window.jQuery = require('jquery');

2. 正确挂载插件到jQuery原型 #

直接window.xxx = require('xxx')是没用的——这俩库不会自动绑定到jQuery的fn对象上。你需要在bootstrap.js里手动把它们挂载到jQuery的原型链上，这样才能用$().xxx()的方式调用：

// 在bootstrap.js的jQuery引入之后添加：
// 处理imagesLoaded
const imagesLoaded = require('imagesloaded');
$.fn.imagesLoaded = imagesLoaded;

// 处理Masonry
const Masonry = require('masonry-layout');
$.fn.masonry = function(options) {
    // 遍历所有选中的元素，初始化Masonry实例
    return this.each(function() {
        new Masonry(this, options);
    });
};

3. 确认Mix打包成功 & 正确引入编译后的JS #

• 运行npm run watch或npm run dev之后，打开public/js/app.js，搜索masonry或imagesLoaded，确认这俩库的代码已经被打包进去。
• 确保你的视图里正确引入了编译后的app.js，并且放在页面底部（或者加上defer属性），避免DOM还没加载完就执行初始化代码：

<!-- 放在body标签结束前 -->
<script src="{{ asset('js/app.js') }}"></script>

4. 保证初始化代码在DOM加载完成后执行 #

你的初始化代码必须等到DOM元素都渲染完成后再执行，否则$('.grid')可能找不到目标元素。把代码放在$(document).ready()里：

$(document).ready(function() {
    var $grid = $('.grid').imagesLoaded( function() {
        $grid.masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            percentPosition: true,
            isResizable: true,
            transitionDuration: '0.8s',
            isAnimated: true
        });
    });
});

5. 检查浏览器控制台的报错信息 #

打开浏览器开发者工具（F12）的Console面板，看看有没有类似$ is not defined、imagesLoaded is not a function这类报错，这些信息能直接帮你定位问题。

按照上面的步骤调整后，应该就能解决问题了，效果和用CDN完全一致~

内容的提问来源于stack exchange，提问作者tweetok