Laravel项目迁移Vite后，如何避免代码被打包排除并在Blade调用函数？

问题背景 #

我有一个基于jQuery的Laravel老项目，正在从Laravel Mix迁移到Vite。现有Auth.js代码如下：

let auth;
$(function () {
    console.log('123');
    auth = {
        email: null, password: null, logIn: function () {
            $(".btn-login").off('click');
            // ... 其他代码
        },
        signUp: function() {
            // 注册逻辑
        }
        // ... 其他方法
    }
});

在Blade模板中通过以下方式调用：

<script>
    $(document).ready(function () {
        auth.signUp();
        cabinet.showPassword();
    });
</script>

旧Laravel Mix配置（运行正常） #

const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js');
mix.babel(['resources/assets/js/Auth.js','resources/assets/js/Billing.js'], 'public/js/scripts.js');

当前Vite配置 #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/Auth.js',
            ],
            refresh: true,
        })
    ]
})

问题现象 #

打包后Auth.js仅保留了初始化的DOM ready代码，auth对象的其他内容被Vite优化移除：

$(function(){console.log("123")});

需求 #

如何正确打包JS代码，让Blade模板能正常调用相关函数？已知可以通过window.auth = {...}挂载全局对象，但希望有更规范的实现方式。

解决方案 #

1. 使用ES模块规范导出导入（推荐） #

这是最符合现代前端规范的过渡方案，同时能逐步改造老代码：

• 修改Auth.js，将auth对象导出：

export const auth = {
    email: null, password: null, 
    logIn: function () {
        $(".btn-login").off('click');
        // ... 其他代码
    },
    signUp: function() {
        // 注册逻辑
    }
    // ... 其他方法
};

// 初始化逻辑
$(function () {
    console.log('123');
});

• 在app.js中导入所有需要的模块，并统一管理全局挂载（仅作为过渡，后续可逐步移除模板内的直接调用）：

import { auth } from './Auth.js';
import { cabinet } from './Cabinet.js'; // 假设cabinet来自对应文件

// 挂载到window供模板调用
window.auth = auth;
window.cabinet = cabinet;

// 统一初始化逻辑
$(document).ready(function () {
    auth.signUp();
    cabinet.showPassword();
});

• 修改Vite配置，仅保留app.js作为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,
        })
    ]
})

• Blade模板中仅保留Vite资源加载指令：

@vite(['resources/css/app.css', 'resources/js/app.js'])

2. 通过Rollup配置保留全局变量 #

如果不想大规模修改代码，可通过Vite的Rollup配置告知编译器不要优化全局变量：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/Auth.js',
            ],
            refresh: true,
        })
    ],
    build: {
        rollupOptions: {
            output: {
                globals: {
                    auth: 'auth',
                    cabinet: 'cabinet'
                }
            }
        }
    }
})

同时修改Auth.js的变量声明，确保提升到全局作用域：

var auth; // 用var代替let，确保变量在全局作用域
$(function () {
    console.log('123');
    auth = {
        // ... 原有代码
    }
});

3. 模仿Mix的合并打包方式 #

创建统一入口文件合并所有脚本，贴近原有Mix的工作方式：

• 创建scripts.js作为合并入口：

import './Auth.js';
import './Billing.js';
// ... 导入其他需要的JS文件

• 修改Vite配置，将scripts.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',
                'resources/js/scripts.js',
            ],
            refresh: true,
        })
    ]
})

• 确保Auth.js中的auth变量可全局访问（比如用var声明或临时挂载到window）。

内容的提问来源于stack exchange，提问作者Marsel.V