Laravel 10 Vite“npm run build”创建空文件

Question

由于某种原因，运行该命令时，某些脚本会编译，而某些脚本的内容会被“删除”。这是我的 vite.config.js 文件：

import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/css/app.css',
                'resources/js/app.js',

                'resources/js/global.js',

                'resources/js/addresses.js',
                'resources/js/global.js',
                'resources/js/afip/padron.js',
                'resources/js/categories/index.js',
                'resources/js/categories/selectize_input.js',
                'resources/js/categories/show.js',
                'resources/js/clients/create.js',
                'resources/js/clients/index.js',
                'resources/js/login/login.js',
                'resources/js/notifications/index.js',
                'resources/js/providers/create.js',
                'resources/js/providers/index.js',
                'resources/js/users/index.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
    build: {
        minify: false,
    }
});

我将向您展示一个文件作为示例（这是最重要的文件之一），global.js：

/**
 * SweetAlert2 boxes
 */
const defaultBox = Swal.mixin({
    allowOutsideClick: false,
    allowEscapeKey: true,
    allowEnterKey: true,
    customClass: {
        confirmButton: "btn-primary",
        cancelButton: "btn-secondary"
    },
    showCancelButton: false,
    showConfirmButton: false
});

function Box(message = '', title = 'aviso', type = 'success') {
    return defaultBox.mixin({
        title: title,
        html: message,
        icon: type
    })
}

function BoxInfo({message, action = function () {}, title = "Aviso", type = "success"}) {
    Box(message, title, type).fire({
        showConfirmButton: true,
        confirmButtonText: "Aceptar"
    }).then(function () {
        action();
    });
}

function BoxConfirm({ message, preConfirm = function () {}, type = "info", title = "Aviso",
                    confirmText = "Aceptar", cancelText = "Cancelar"})
{
    Box(message, title, type).fire({
        showConfirmButton: true,
        showCancelButton: true,
        confirmButtonText: confirmText,
        cancelButtonText: cancelText,
        allowOutsideClick: () => !Swal.isLoading(),
        showLoaderOnConfirm: true,
        preConfirm() {
            return preConfirm();
        }
    });
}

/**
 * Bootstrap 5 Toast creator
 *
 * @param message
 * @param background
 */
function CreateToast({ message, background = 'text-bg-primary'}) {
    let parent = document.createElement('div');
    parent.setAttribute('role', 'alert');
    parent.setAttribute('aria-live', 'assertive');
    parent.setAttribute('aria-atomic', 'true');
    parent.classList.add('toast', background);

    let child = document.createElement('div');
    child.classList.add('toast-body');

    let body = document.createElement('div');
    body.classList.add('d-flex', 'justify-content-between');

    let content = document.createElement('div');
    content.classList.add('toast-content');
    content.innerHTML = message;

    let button = document.createElement('button');
    button.setAttribute('type', 'button');
    button.classList.add('btn-close');
    button.setAttribute('data-bs-dismiss', 'toast');
    button.setAttribute('aria-label', 'Close');

    body.appendChild(content);
    body.appendChild(button);
    child.appendChild(body);
    parent.appendChild(child);

    parent.addEventListener('hidden.bs.toast', (event) => {
        event.currentTarget.remove();
    });

    document.getElementById('toast-container').appendChild(parent);

    let toast = new bootstrap.Toast(parent);
    toast.show();
}

/**
 * Table functions
 */
function SelectAll(elem) {
    const table = elem.closest('table');

    document.querySelectorAll("#select_all_icon span").forEach(span => {
        span.classList.toggle("d-block");
        span.classList.toggle("d-none");
    });

    table.querySelectorAll('input:not(#select_all)').forEach(input => {
        input.checked = elem.checked;
    });
}

function SelectAlternate(elem) {
    const table = elem.closest('table');

    table.querySelectorAll('input:not(#select_all)').forEach(input => {
        input.checked = !input.checked;
    });
}

function DeleteSelected(elem, route) {
    const   table = elem.closest('table'),
            selected = table.querySelectorAll('input:checked:not(#select_all)'),
            amount = selected.length;

    if (amount === 0) {
        CreateToast({
            message: '¡No hay items seleccionados!',
            background: 'text-bg-danger',
        });
        return;
    }

    BoxConfirm({
        type: 'warning',
        message: '¿Estás seguro de querer eliminar masivamente ' + amount + ' item(s)? <strong><u>Esto no se puede deshacer</u></strong>.',
        confirmText: 'Eliminar',
        preConfirm: () => {
            const formData = new FormData();

            selected.forEach(input => {
                formData.append(input.name, input.value);
            });

            return new Promise((resolve, reject) => {
                axios.post(route, formData)
                .then(response => {
                    if (response.status !== 200) {
                        throw new Error(response.statusText)
                    }
                    resolve(true);

                    $(selected).each(function () {
                        $(table).DataTable().row($(this).parents("tr")).remove().draw()
                    });

                    CreateToast({message: '¡' + amount + ' item(s) eliminado(s) correctamente', background: 'text-bg-success'});
                })
                .catch(error => {
                    let errorMessage = '';

                    const errors = error.response.data.errors;
                    for (const errorKey in errors) {
                        if (errors.hasOwnProperty(errorKey)) {
                            errorMessage = errors[errorKey][0];
                            break;
                        }
                    }

                    CreateToast({message: 'Error al eliminar multiples items: ' + errorMessage, background: 'text-bg-danger'});
                    resolve(false);
                });
            });
        }
    });
}

function DeleteSingle({ elem, route, name }) {
    const   row = $(elem).parents("tr"),
            table = $(elem).closest('table');

    BoxConfirm({
        type: 'warning',
        message: name + ' será eliminado.<br>¿Estás seguro?. <strong><u>Esto no se puede deshacer</u></strong>',
        preConfirm: () => {
            return new Promise((resolve, reject) => {
                axios.delete(route)
                .then(response => {
                    if (response.status !== 200) {
                        throw new Error(response.statusText);
                    }

                    resolve(true);
                    $(table).DataTable().row(row).remove().draw();

                    CreateToast({
                        message: '¡' + name + ' eliminado correctamente!',
                        background: 'text-bg-success'
                    });
                })
                .catch(error => {
                    CreateToast({
                        message: 'Error al eliminar: ' + error.response.data.error,
                        background: 'text-bg-danger'
                    });

                    resolve(false);
                });
            });
        }
    });
}

function DeleteSingleFromShow({ route, name }) {
    BoxConfirm({
        type: 'warning',
        message: name + ' será eliminado.<br>¿Estás seguro?. <strong><u>Esto no se puede deshacer</u></strong>',
        preConfirm: () => {
            window.location.replace(route);
        }
    });
}


/**
 * Other functions
 */
function ResetForm(form) {
    document.querySelector(form).reset();
}

运行“npm run build”时，内容变为：

Swal.mixin({
  allowOutsideClick: false,
  allowEscapeKey: true,
  allowEnterKey: true,
  customClass: {
    confirmButton: "btn-primary",
    cancelButton: "btn-secondary"
  },
  showCancelButton: false,
  showConfirmButton: false
});

该文件是否单独存在于vite.config.js文件中也没关系；它总是删除一切。

可能出了什么问题？

Answer 1

我在这里找到了解决方法：https://laracasts.com/discuss/channels/vite/vite-removes-functions-during-compiling

正如“rodrigo.pedra”所说，将函数添加为“全局”可以防止 Vite 删除它们。