如何使jQuery组件在Vite开发模式下兼容Laravel自动刷新？

问题根源 #

Vite开发模式采用ES模块加载机制，和生产构建的打包兼容逻辑存在差异，jQuery组件的全局挂载或导出方式在模块隔离环境下未生效，导致调用object.widgetFunction()时提示方法不存在。

实际解决步骤 #

1. 确保jQuery全局挂载正确 #

放弃使用inject插件，直接通过配置和代码手动全局挂载jQuery：

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            'jquery': 'jquery/dist/jquery.min.js'
        }
    },
    optimizeDeps: {
        include: ['jquery']
    }
});

在resources/js/app.js中补充全局挂载代码：

import $ from 'jquery';
window.$ = window.jQuery = $;

2. 检查组件的挂载逻辑与导入顺序 #

如果组件通过$.fn.widgetFunction挂载到jQuery原型，需确保组件代码在开发模式下正常执行，且导入顺序正确：

// 示例jQuery组件代码
(function($) {
    $.fn.widgetFunction = function() {
        // 组件业务逻辑
        return this;
    };
})(jQuery);

在app.js中先导入组件，再调用方法：

// 先导入组件文件
import './path/to/your-jquery-component.js';

// 等待DOM加载完成后调用方法
$(document).ready(function() {
    $('#target-element').widgetFunction();
});

3. 强制组件以传统脚本模式加载（临时调试方案） #

若上述方法无效，可在组件导入时添加?script后缀，让Vite绕过模块隔离，直接在全局作用域执行组件：

import './path/to/your-jquery-component.js?script';

4. 确认方法调用时机 #

确保调用widgetFunction()时目标DOM元素已加载完成，可通过以下方式包裹调用逻辑：

document.addEventListener('DOMContentLoaded', function() {
    $('#target-element').widgetFunction();
});

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