Laravel 混合和 jQuery 插件问题，$().plugin 不是函数

Question

我使用 Laravel mix 来管理我的 js 文件，这是我的 app.js :

window.$ = window.jQuery = require('./jquery-1.11.2.min.js');

require('./jquery.easing.1.3.js');
require('./bootstrap.min.js');
require('./SmoothScroll.js');
require('./jquery.scrollTo.min.js');
require('./jquery.localScroll.min.js');
require('./jquery.viewport.mini.js');
require('./jquery.countTo.js');
require('./jquery.appear.js');
require('./jquery.sticky.js');
require('./jquery.parallax-1.1.3.js');
require('./jquery.fitvids.js');
require('./owl.carousel.min.js');
require('./isotope.pkgd.min.js');
require('./imagesloaded.pkgd.min.js');
require('./jquery.magnific-popup.min.js');
require('./gmap3.min.js');
require('./wow.min.js');
require('./masonry.pkgd.min.js');
require('./jquery.simple-text-rotator.min.js');
require('./all.js');

all.js 包含所有逻辑和初始化，所以我的问题是一些 jQuery 插件不起作用：

Uncaught TypeError: $(...).magnificPopup is not a function at init_lightbox (index.js?id=f95f3419a2325063a526:11289)

当我以传统方式加载我的 js 时 <script ... 以与上面相同的顺序所有工作但是当我需要他们抛出错误，请帮助，谢谢

编辑：

初始化函数在文档准备好后触发（all.js）：

$(document).ready(function(){

        $(window).trigger("resize");            
        init_classic_menu();
        init_fullscreen_menu();
        init_side_panel();
        init_lightbox();
        init_parallax();
        init_shortcodes();
        init_tooltips();
        init_counters();
        init_team();
        initPageSliders();
        init_map();
        init_wow();
        init_masonry();
});

Answer 1

看起来有 a problem 和 Magnific-Popup

It's because Modernizr adds video CSS class to HTML element, which is the same as selector of your popup.

您是否碰巧在您网站的任何地方使用 class video？也许 Magnific-Popup 不小心瞄准了您的 HTML 元素。

Answer 2

所以解决方案是通过 npm 安装 jQuery 而不是

window.$ = window.jQuery = require('./jquery-1.11.2.min.js');

做

window.$ = window.jQuery = require('jquery');

问题解决了！

Laravel 混合和 jQuery 插件问题，$().plugin 不是函数

Laravel mix and jQuery plugin issue, $().plugin not a function

javascript

jquery

webpack

laravel-5

laravel-mix