如何在Laravel 11中通过Vite集成依赖jQuery的插件

问题原因 #

jquery.scrollTo插件依赖全局作用域下的jQuery对象（部分版本同时需要$），但Vite的ES模块加载机制中，模块导入的执行顺序和全局变量挂载时机不匹配，导致插件加载时找不到全局的jQuery。

解决方案 #

方案一：手动绑定插件到jQuery #

修改resources/js/app.js，先将jQuery和$都挂载到全局，再手动导入插件并绑定到jQuery实例：

import jQuery from 'jquery';
// 同时挂载jQuery和$到window，覆盖所有可能的全局引用
window.jQuery = window.$ = jQuery;

import './bootstrap';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

// 手动导入scrollTo并绑定到jQuery
import scrollTo from 'jquery.scrollto';
scrollTo(jQuery);

方案二：用ProvidePlugin自动注入全局依赖 #

通过Vite插件自动为所有模块提供全局的jQuery和$，避免手动挂载的时机问题：

1. 修改vite.config.js，添加rollup-plugin-provide的ProvidePlugin：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { ProvidePlugin } from 'rollup-plugin-provide';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        // 自动为所有模块注入全局的jQuery和$
        ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery',
        })
    ],

    resolve: {
        alias: {
            '$': 'jquery', // 修正alias为小写的npm包名
        },
    },
});

2. 简化resources/js/app.js，无需手动挂载全局变量：

import './bootstrap';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

import 'jquery';
import 'jquery.scrollto';

额外注意点 #

• 确保vite.config.js中的alias是小写的jquery（对应npm包名），不要写成大写的jQuery。
• 测试时可在浏览器控制台输入jQuery或$，确认全局变量已正确挂载。

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