README

此包扩展了 Laravel 中内置的 Vite 功能，因此您可以在不使您的 Blade 模板充斥着笨拙的配置代码的情况下，管理多个入口点（以下简称 app）配置。如果您项目有多个 JS 入口点，或者您正在开发一个发布自己 Vite 管理资源的包，这将特别有用。

安装

您可以使用 Composer 安装此包

composer require ttbooking/vite-manager

然后您可能需要发布配置文件

artisan vendor:publish --tag=vite-manager

配置

有三种方式配置 Vite "应用"。

配置文件

最基本的方法。如果您正在开发具有少量入口点的项目，请使用它。例如 config/vite.php 文件

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Vite App
    |--------------------------------------------------------------------------
    */

    'app' => env('VITE_APP', 'default'),

    'apps' => [

        'default' => [
            'entry_points' => ['vite/legacy-polyfills-legacy', 'resources/js/app-legacy.js', 'resources/js/app.js'],
            'build_directory' => 'build',
        ],

        'myapp' => [
            'entry_points' => ['vite/legacy-polyfills-legacy', 'src/app-legacy.js', 'src/app.js'],
            'build_directory' => 'build/packages/myapp',
            'hot_file' => 'build/packages/myapp/hot',
        ],

    ],

];

您可以在 此处 找到可配置选项的完整列表。

注意 VITE_APP 环境变量，您可以使用它根据环境定制默认入口点

# Your .env file
VITE_APP=custom

服务提供者的 boot 方法

高级方法。如果您正在开发带有 Vite 资产的包，或者如果您需要精细控制您的应用程序配置，请使用它

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Str;
use TTBooking\ViteManager\Facades\Vite;

class ViteServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Vite::withEntryPoints(['vite/legacy-polyfills-legacy', 'resources/js/app-legacy.js', 'resources/js/app.js'])
            ->useBuildDirectory('build');

        Vite::app('myapp')
            ->withEntryPoints(['vite/legacy-polyfills-legacy', 'src/app-legacy.js', 'src/app.js'])
            ->useBuildDirectory('build/packages/myapp')
            ->useHotFile(public_path('build/packages/myapp/hot'))
            ->useScriptTagAttributes(function (string $src) {
                return Str::contains($src, '-legacy') ? ['type' => 'text/javascript', 'nomodule'] : [];
            })
            ->usePreloadTagAttributes(function (string $src) {
                return Str::contains($src, '-legacy') ? false : [];
            });
    }
}

您可以使用您的 AppServiceProvider.php（或您选择的任何其他服务提供者）来处理这个问题，但建议使用单独的服务提供者，尤其是如果您有很多入口点配置。只需别忘了在您的 config/app.php 文件中注册此服务提供者。

应用工厂

最高级的方法。如果您有许多需要类似配置的类似应用程序/工作空间，请使用它

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Str;
use TTBooking\ViteManager\Contracts\Vite as ViteContract;
use TTBooking\ViteManager\Facades\Vite;

class ViteServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Vite::useAppFactory(fn (ViteContract $vite, string $app, array $config) => $vite
            ->withEntryPoints(['vite/legacy-polyfills-legacy', 'src/app-legacy.js', 'src/app.js'])
            ->useBuildDirectory("build/packages/$app")
            ->useHotFile(public_path("build/packages/$app/hot"))
            ->useScriptTagAttributes(function (string $src) {
                return Str::contains($src, '-legacy') ? ['type' => 'text/javascript', 'nomodule'] : [];
            })
            ->usePreloadTagAttributes(function (string $src) {
                return Str::contains($src, '-legacy') ? false : [];
            })
            ->configure($config)
        );
    }
}

传递给 useAppFactory 的闭包检索 4 个参数：一个将被工厂配置的 Vite 类实例、应用程序名称、相应的配置部分（如果存在），以及应用程序的容器实例。您可能（或不一定）想通过配置文件中的选项修改实例的配置。为此，请在 Vite 实例上调用 configure 方法，并传递给定的 $config 变量。这样，最终用户就可以在应用程序的基础上更改预定义的选项。

用法

在 Blade 模板中使用 @viteApp 指令

{{-- Default entry point --}}
@viteApp

{{-- Example app entry point --}}
@viteApp('myapp')

{{-- Example app with additional entry point --}}
@viteApp('myapp', "src/Pages/{$page['component']}.vue")

如果您使用的是除了 Blade 以外的模板引擎，您可以使用 vite_app 辅助函数

{# Default entry point #}
{{ vite_app() }}

{# Example app entry point #}
{{ vite_app('myapp') }}

{# Example app with additional entry point #}
vite_app('myapp', 'src/Pages/' ~ page.component ~ '.vue')

如果您使用的是 TwigBridge，别忘了在 config/twigbridge.php 文件中的 extensions.functions 部分注册此函数。