【分享】前端小伙伴必备，Laravel Vite for webman 助手函数

Laravel Vite for webman 助手函数

用过Laravel Vite的小伙伴都知道Laravel下使用Vite构建前端项目非常方便快捷，而webman下支持需要安装一大堆依赖配置和修改，本着小而精的理念，特参照Laravel简单的实现类似@vite指令的功能，特分享出来给需要的朋友使用。

特点：
完美兼容Laravel Vite；
同时支持开发模式和编译模式；
支持<link rel="preload"预载；
支持自定义指定构建目录

具体使用：
1、Laravel Vite 安装及配置使用请参照官方文档 https://www.laravel.com/docs/9.x/vite

2、在webman下面的/app/function.php文件中增加如下函数代码：

/**
 * vite助手函数
 * @return string
 */
if (!function_exists('vite')) {
    function vite(string | array $entrypoints, string|null $buildDirectory = 'build')
    {
        $style_pattern = '/\.(css|less|sass|scss|styl|stylus|pcss|postcss)$/';

        if (!is_array($entrypoints)) {
            $entrypoints = [$entrypoints];
        }

        $html = '';
        if (is_file(public_path('hot'))) {
            $host = rtrim(file_get_contents(public_path('hot')));
            array_unshift($entrypoints, '@vite/client');
            foreach ($entrypoints as $import) {
                if (preg_match($style_pattern, $import)) {
                    $html .= '<link rel="stylesheet" href="' . $host . '/' . $import . '" />';
                } else {
                    $html .= '<script type="module" src="' . $host . '/' . $import . '"></script>';
                }
            }
        } else {
            $manifestPath = public_path($buildDirectory . DIRECTORY_SEPARATOR . 'manifest.json');
            if (is_file($manifestPath)) {
                $manifest = json_decode(file_get_contents($manifestPath), true);
                $tags = [];
                $preloads = [];
                foreach ($entrypoints as $entrypoint) {
                    if (isset($manifest[$entrypoint])) {
                        $chunk = $manifest[$entrypoint];
                        array_push($preloads, $chunk['file']);
                        array_push($tags, $chunk['file']);

                        foreach ($chunk['imports'] ?? [] as $import) {
                            array_push($preloads, $manifest[$import]['file']);
                            foreach ($manifest[$import]['css'] ?? [] as $css) {
                                array_push($preloads, $css);
                                array_push($tags, $css);
                            }
                        }

                        foreach ($chunk['css'] ?? [] as $css) {
                            array_push($preloads, $css);
                            array_push($tags, $css);
                        }
                    }
                }
                uasort($preloads, fn ($a, $b) => (preg_match($style_pattern, $a)) ? -1 : 1);
                uasort($tags, fn ($a, $b) => (preg_match($style_pattern, $a)) ? -1 : 1);
                foreach ($preloads as $preload) {
                    if (preg_match($style_pattern, $preload)) {
                        $html .= '<link rel="preload" as="style" href="' . ('/' . $buildDirectory . '/' . $preload) . '" />';
                    } else {
                        $html .= '<link rel="modulepreload" as="script" href="' . ('/' . $buildDirectory . '/' . $preload) . '" />';
                    }
                }
                foreach ($tags as $tag) {
                    if (preg_match($style_pattern, $tag)) {
                        $html .= '<link rel="stylesheet" href="' . ('/' . $buildDirectory . '/' . $tag) . '" />';
                    } else {
                        $html .= '<script type="module" src="' . ('/' . $buildDirectory . '/' . $tag) . '"></script>';
                    }
                }
            }
        }
        return $html;
    }
}

3、在模板文件中使用

// php原生模版示例：
<?=vite(['resource/css/app.css', 'resource/js/app.js'])?>

// Blade模版示例：
{!! vite(['resource/css/app.css', 'resource/js/app.js']) !!}

// think-template模版示例：
{:vite(['resource/css/app.css', 'resource/js/app.js'])}