Laravel Mix与jQuery插件兼容问题：$().plugin不是函数

这问题我之前帮同事排查过，本质是webpack模块加载的作用域和传统<script>标签全局加载的逻辑差异导致的。传统方式下JS都是在全局window作用域按顺序执行，jQuery和插件直接挂载到window上，所以初始化时肯定能找到；但Laravel Mix用webpack打包后，代码会被封装在模块作用域里，稍不注意就会出现插件找不到jQuery实例的情况。

下面是几个针对性的解决方案，按优先级尝试：

1. 全局暴露jQuery，让插件能找到挂载对象 #

webpack默认不会把模块里的jQuery暴露到全局，而很多老jQuery插件是依赖window.jQuery来挂载的。你需要在webpack.mix.js里配置全局提供jQuery：

const webpack = require('webpack');

mix.webpackConfig({
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
});

然后在你的all.js里，手动把jQuery挂载到window，确保插件能识别：

// all.js
import $ from 'jquery';
// 把jQuery实例绑定到全局window对象
window.$ = window.jQuery = $;
// 引入magnificPopup插件（如果是npm安装的直接写包名，本地文件用相对路径）
import 'magnific-popup';

2. 确保初始化代码使用正确的jQuery实例 #

如果你的init_lightbox函数所在的模块（比如index.js）单独引入了jQuery，可能会拿到和插件挂载的不同实例。要确保初始化代码用的是全局的$，或者和插件共享同一个jQuery实例：

// index.js
// 直接用全局的$，或者引入同一个jQuery模块
import $ from 'jquery';

function init_lightbox() {
    $('.lightbox').magnificPopup({
        // 你的配置项
    });
}

// 文档就绪后执行初始化
$(document).ready(() => {
    init_lightbox();
});

3. 调整文件引入顺序 #

检查app.js里的引入顺序，必须保证jQuery → 插件 → 初始化代码的加载顺序：

// app.js
// 先引入包含jQuery和插件的all.js
require('./all.js');
// 再引入包含初始化逻辑的文件
require('./index.js');

webpack会按你引入的顺序打包，只要插件在初始化代码之前加载完成，就能正确挂载到jQuery上。

4. 针对本地插件文件的特殊处理 #

如果你的magnificPopup是本地下载的JS文件（不是通过npm安装），一定要确保在引入插件前，jQuery已经被挂载到window。比如在all.js里：

// all.js
import $ from 'jquery';
window.$ = window.jQuery = $;
// 引入本地的插件文件
require('./libs/magnific-popup.js');

这类本地插件通常会直接检查window.jQuery是否存在，然后挂载方法，所以必须先把jQuery暴露到全局。

内容的提问来源于stack exchange，提问作者Mikail G.