コンテンツにスキップ
Laravel

アセットバンドリング (Vite)

はじめに

Viteは、非常に高速な開発環境を提供し、本番環境向けにコードをバンドルする最新のフロントエンドビルドツールです。Laravelでアプリケーションを構築する場合、通常、Viteを使用してアプリケーションのCSSファイルとJavaScriptファイルを本番対応のアセットにバンドルします。

Laravelは、開発環境と本番環境でアセットをロードするための公式プラグインとBladeディレクティブを提供することで、Viteとシームレスに統合します。

lightbulb

Laravel Mixを実行していますか？Viteは、新しいLaravelインストールでLaravel Mixに取って代わりました。Mixのドキュメントについては、Laravel MixのWebサイトをご覧ください。Viteに切り替えたい場合は、移行ガイドを参照してください。

ViteとLaravel Mixのどちらを選択するか

Viteに移行する前は、新しいLaravelアプリケーションは、アセットをバンドルする際にwebpackを搭載したMixを利用していました。Viteは、豊富なJavaScriptアプリケーションを構築する際に、より高速で生産性の高いエクスペリエンスを提供することに重点を置いています。Inertiaなどのツールで開発されたものを含め、シングルページアプリケーション (SPA) を開発している場合は、Viteが最適です。

Viteは、Livewireを使用しているものを含め、JavaScriptの「スパイス」を使用した従来のサーバーサイドレンダリングアプリケーションでもうまく機能します。ただし、JavaScriptアプリケーションで直接参照されていない任意の資産をビルドにコピーする機能など、Laravel Mixがサポートするいくつかの機能がありません。

Mixへの復帰

Viteスキャフォールディングを使用して新しいLaravelアプリケーションを開始したが、Laravel Mixとwebpackに戻る必要がある場合は？問題ありません。ViteからMixへの移行に関する公式ガイドを参照してください。

インストールとセットアップ

lightbulb

以下のドキュメントでは、Laravel Viteプラグインを手動でインストールおよび構成する方法について説明します。ただし、Laravelのスターターキットには、このスキャフォールディングがすべて含まれており、LaravelとViteを始める最も速い方法です。

Nodeのインストール

ViteとLaravelプラグインを実行する前に、Node.js (16+) とNPMがインストールされていることを確認する必要があります

node -v
npm -v

最新バージョンのNodeとNPMは、公式Node Webサイトのシンプルなグラフィカルインストーラーを使用して簡単にインストールできます。または、Laravel Sailを使用している場合は、Sailを介してNodeとNPMを呼び出すことができます

./vendor/bin/sail node -v
./vendor/bin/sail npm -v

ViteとLaravelプラグインのインストール

Laravelの新しいインストールでは、アプリケーションのディレクトリ構造のルートにpackage.jsonファイルがあります。デフォルトのpackage.jsonファイルには、ViteとLaravelプラグインの使用を開始するために必要なものがすべて含まれています。NPM経由でアプリケーションのフロントエンド依存関係をインストールできます

npm install

Viteの設定

Viteは、プロジェクトのルートにあるvite.config.jsファイルで構成されます。このファイルは、必要に応じて自由にカスタマイズでき、@vitejs/plugin-vueや@vitejs/plugin-reactなど、アプリケーションに必要なその他のプラグインもインストールできます。

Laravel Viteプラグインでは、アプリケーションのエントリポイントを指定する必要があります。これらはJavaScriptまたはCSSファイルであり、TypeScript、JSX、TSX、Sassなどのプリプロセス言語が含まれます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Inertiaを使用して構築されたアプリケーションを含め、SPAを構築している場合、ViteはCSSエントリポイントなしで最適に機能します

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css', 
            'resources/js/app.js',
        ]),
    ],
});

代わりに、JavaScriptを介してCSSをインポートする必要があります。通常、これはアプリケーションのresources/js/app.jsファイルで行われます

import './bootstrap';
import '../css/app.css';

Laravelプラグインは、複数のエントリポイントと、SSRエントリポイントなどの高度な構成オプションもサポートしています。

セキュアな開発サーバーでの作業

ローカル開発WebサーバーがHTTPSを介してアプリケーションを提供している場合は、Vite開発サーバーへの接続で問題が発生する可能性があります。

Laravel Herdを使用し、サイトを保護している場合、またはLaravel Valetを使用し、アプリケーションに対してsecureコマンドを実行した場合、Laravel Viteプラグインは、生成されたTLS証明書を自動的に検出して使用します。

アプリケーションのディレクトリ名と一致しないホストを使用してサイトを保護した場合は、アプリケーションのvite.config.jsファイルでホストを手動で指定できます

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            detectTls: 'my-app.test', 
        }),
    ],
});

別のWebサーバーを使用する場合は、信頼できる証明書を生成し、生成された証明書を使用するようにViteを手動で構成する必要があります

// ...
import fs from 'fs'; 
 
const host = 'my-app.test'; 
 
export default defineConfig({
    // ...
    server: { 
        host, 
        hmr: { host }, 
        https: { 
            key: fs.readFileSync(`/path/to/${host}.key`), 
            cert: fs.readFileSync(`/path/to/${host}.crt`), 
        }, 
    }, 
});

システム用の信頼できる証明書を生成できない場合は、@vitejs/plugin-basic-sslプラグインをインストールして構成できます。信頼できない証明書を使用する場合は、npm run devコマンドを実行するときに、コンソールの「ローカル」リンクに従って、ブラウザでViteの開発サーバーの証明書の警告を受け入れる必要があります。

WSL2でSailで開発サーバーを実行する

Windows Subsystem for Linux 2 (WSL2) でLaravel Sail内でVite開発サーバーを実行する場合は、ブラウザが開発サーバーと通信できるように、vite.config.jsファイルに次の構成を追加する必要があります

// ...
 
export default defineConfig({
    // ...
    server: { 
        hmr: {
            host: 'localhost',
        },
    }, 
});

開発サーバーの実行中にファイルの変更がブラウザに反映されない場合は、Viteのserver.watch.usePollingオプションを構成する必要がある場合もあります。

スクリプトとスタイルの読み込み

Viteのエントリポイントを構成したら、アプリケーションのルートテンプレートの<head>に追加する@vite()Bladeディレクティブで参照できるようになりました

<!DOCTYPE html>
<head>
    {{-- ... --}}
 
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

JavaScriptを介してCSSをインポートしている場合は、JavaScriptエントリポイントのみを含める必要があります

<!DOCTYPE html>
<head>
    {{-- ... --}}
 
    @vite('resources/js/app.js')
</head>

@viteディレクティブは、Vite開発サーバーを自動的に検出し、ホットモジュールリプレースメントを有効にするためにViteクライアントを挿入します。ビルドモードでは、このディレクティブは、インポートされたCSSを含め、コンパイルおよびバージョン管理されたアセットをロードします。

必要に応じて、@viteディレクティブを呼び出すときに、コンパイルされたアセットのビルドパスを指定することもできます

<!doctype html>
<head>
    {{-- Given build path is relative to public path. --}}
 
    @vite('resources/js/app.js', 'vendor/courier/build')
</head>

インラインアセット

アセットのバージョン付きURLへのリンクではなく、アセットの生の内容を含める必要がある場合があります。たとえば、HTMLコンテンツをPDFジェネレーターに渡す際に、ページにアセットの内容を直接含める必要がある場合があります。Viteファサードが提供するcontentメソッドを使用して、Viteアセットのコンテンツを出力できます。

@use('Illuminate\Support\Facades\Vite')
 
<!doctype html>
<head>
    {{-- ... --}}
 
    <style>
        {!! Vite::content('resources/css/app.css') !!}
    </style>
    <script>
        {!! Vite::content('resources/js/app.js') !!}
    </script>
</head>

Viteの実行

Viteを実行するには2つの方法があります。ローカルでの開発中に役立つdevコマンドで開発サーバーを実行できます。開発サーバーは、ファイルへの変更を自動的に検出し、開いているブラウザウィンドウに即座に反映します。

または、buildコマンドを実行すると、アプリケーションのアセットがバージョン管理およびバンドルされ、本番環境へのデプロイ準備が整います。

# Run the Vite development server...
npm run dev
 
# Build and version the assets for production...
npm run build

Sail上のWSL2で開発サーバーを実行している場合は、いくつかの追加設定オプションが必要になる場合があります。

JavaScriptの操作

エイリアス

デフォルトでは、Laravelプラグインは、アプリケーションのアセットをすぐにインポートできるように、共通のエイリアスを提供します。

{
    '@' => '/resources/js'
}

vite.config.js構成ファイルに独自のエイリアスを追加することで、'@'エイリアスを上書きできます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel(['resources/ts/app.tsx']),
    ],
    resolve: {
        alias: {
            '@': '/resources/ts',
        },
    },
});

Vue

Vueフレームワークを使用してフロントエンドを構築する場合は、@vitejs/plugin-vueプラグインもインストールする必要があります。

npm install --save-dev @vitejs/plugin-vue

次に、vite.config.js構成ファイルにプラグインを含めることができます。LaravelでVueプラグインを使用する場合は、いくつかの追加オプションが必要です。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
 
export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,
 
                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directory as expected.
                    includeAbsolute: false,
                },
            },
        }),
    ],
});
lightbulb

Laravelのスターターキットには、適切なLaravel、Vue、およびVite構成がすでに含まれています。Laravel、Vue、およびViteを最も速く使い始めるには、Laravel Breezeをチェックしてください。

React

Reactフレームワークを使用してフロントエンドを構築する場合は、@vitejs/plugin-reactプラグインもインストールする必要があります。

npm install --save-dev @vitejs/plugin-react

次に、vite.config.js構成ファイルにプラグインを含めることができます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
    plugins: [
        laravel(['resources/js/app.jsx']),
        react(),
    ],
});

JSXを含むファイルには.jsxまたは.tsx拡張子があることを確認する必要があり、必要に応じて、上記に示すように、エントリポイントを更新することを忘れないでください。

既存の@viteディレクティブに加えて、追加の@viteReactRefresh Bladeディレクティブを含める必要もあります。

@viteReactRefresh
@vite('resources/js/app.jsx')

@viteReactRefreshディレクティブは、@viteディレクティブの前に呼び出す必要があります。

lightbulb

Laravelのスターターキットには、適切なLaravel、React、およびVite構成がすでに含まれています。Laravel、React、およびViteを最も速く使い始めるには、Laravel Breezeをチェックしてください。

Inertia

Laravel Viteプラグインは、Inertiaページコンポーネントを解決するのに役立つ便利なresolvePageComponent関数を提供します。以下は、Vue 3で使用するヘルパーの例です。ただし、Reactなどの他のフレームワークでもこの関数を利用できます。

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 
createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
});

InertiaでViteのコード分割機能を使用している場合は、アセットプリフェッチを構成することをお勧めします。

lightbulb

Laravelのスターターキットには、適切なLaravel、Inertia、およびVite構成がすでに含まれています。Laravel、Inertia、およびViteを最も速く使い始めるには、Laravel Breezeをチェックしてください。

URL処理

Viteを使用し、アプリケーションのHTML、CSS、またはJSでアセットを参照する場合、考慮すべきいくつかの注意点があります。まず、絶対パスでアセットを参照すると、Viteはビルドにアセットを含めません。したがって、アセットがpublicディレクトリで使用可能であることを確認する必要があります。専用のCSSエントリポイントを使用する場合、開発中にブラウザがCSSがホストされているVite開発サーバーからではなく、publicディレクトリからこれらのパスをロードしようとするため、絶対パスの使用は避ける必要があります。

相対アセットパスを参照する場合、パスが参照されているファイルからの相対パスであることを覚えておく必要があります。相対パスで参照されたアセットは、Viteによって書き換えられ、バージョン管理され、バンドルされます。

次のプロジェクト構造を考えてみましょう

public/
  taylor.png
resources/
  js/
    Pages/
      Welcome.vue
  images/
    abigail.png

次の例は、Viteが相対URLと絶対URLをどのように扱うかを示しています。

<!-- This asset is not handled by Vite and will not be included in the build -->
<img src="/taylor.png">
 
<!-- This asset will be re-written, versioned, and bundled by Vite -->
<img src="../../images/abigail.png">

スタイルシートの操作

ViteドキュメントでViteのCSSサポートの詳細を確認できます。TailwindなどのPostCSSプラグインを使用している場合は、プロジェクトのルートにpostcss.config.jsファイルを作成すると、Viteが自動的に適用します。

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};
lightbulb

Laravelのスターターキットには、適切なTailwind、PostCSS、およびVite構成がすでに含まれています。または、スターターキットを使用せずにTailwindとLaravelを使用する場合は、TailwindのLaravelインストールガイドをチェックしてください。

Bladeとルートの操作

Viteによる静的アセットの処理

JavaScriptまたはCSSでアセットを参照すると、Viteはそれらを自動的に処理およびバージョン管理します。さらに、Bladeベースのアプリケーションを構築する場合、ViteはBladeテンプレートのみで参照する静的アセットも処理およびバージョン管理できます。

ただし、これを実現するには、静的アセットをアプリケーションのエントリポイントにインポートして、Viteにアセットを認識させる必要があります。たとえば、resources/imagesに保存されているすべての画像と、resources/fontsに保存されているすべてのフォントを処理およびバージョン管理する場合は、アプリケーションのresources/js/app.jsエントリポイントに次を追加する必要があります。

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

これらのアセットは、npm run buildを実行するとViteによって処理されるようになります。次に、Vite::assetメソッドを使用してBladeテンプレートでこれらのアセットを参照できます。これにより、指定されたアセットのバージョン付きURLが返されます。

<img src="{{ Vite::asset('resources/images/logo.png') }}">

保存時のリフレッシュ

アプリケーションがBladeを使用した従来のサーバーサイドレンダリングを使用して構築されている場合、Viteは、アプリケーションのビューファイルに変更を加えるとブラウザを自動的に更新することにより、開発ワークフローを改善できます。開始するには、refreshオプションをtrueとして指定するだけです。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: true,
        }),
    ],
});

refreshオプションがtrueの場合、次のディレクトリにファイルを保存すると、npm run devの実行中にブラウザがフルページリフレッシュを実行します。

  • app/Livewire/**
  • app/View/Components/**
  • lang/**
  • resources/lang/**
  • resources/views/**
  • routes/**

アプリケーションのフロントエンド内でルートリンクを生成するためにZiggyを使用している場合は、routes/**ディレクトリを監視すると便利です。

これらのデフォルトパスがニーズに合わない場合は、監視するパスの独自のリストを指定できます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: ['resources/views/**'],
        }),
    ],
});

内部的には、Laravel Viteプラグインはvite-plugin-full-reloadパッケージを使用しており、この機能の動作を微調整するための高度な設定オプションを提供します。このレベルのカスタマイズが必要な場合は、config定義を提供できます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: [{
                paths: ['path/to/watch/**'],
                config: { delay: 300 }
            }],
        }),
    ],
});

エイリアス

JavaScriptアプリケーションで、定期的に参照されるディレクトリへのエイリアスを作成するのが一般的です。ただし、Illuminate\Support\Facades\Viteクラスのmacroメソッドを使用してBladeで使用するエイリアスを作成することもできます。通常、「マクロ」はサービスプロバイダーのbootメソッド内で定義する必要があります。

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));
}

マクロが定義されると、テンプレート内で呼び出すことができます。たとえば、上記で定義したimageマクロを使用して、resources/images/logo.pngにあるアセットを参照できます。

<img src="{{ Vite::image('logo.png') }}" alt="Laravel Logo">

アセットのプリフェッチ

Viteのコード分割機能を使用してSPAを構築する場合、必要なアセットは各ページナビゲーションでフェッチされます。この動作により、UIのレンダリングが遅れる可能性があります。これが選択したフロントエンドフレームワークで問題になる場合は、Laravelは、最初のページ読み込み時にアプリケーションのJavaScriptおよびCSSアセットを積極的にプリフェッチする機能を提供します。

サービスプロバイダーのbootメソッドでVite::prefetchメソッドを呼び出すことにより、Laravelにアセットを積極的にプリフェッチするように指示できます。

<?php
 
namespace App\Providers;
 
use Illuminate\Support\Facades\Vite;
use Illuminate\Support\ServiceProvider;
 
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // ...
    }
 
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Vite::prefetch(concurrency: 3);
    }
}

上記の例では、アセットは各ページ読み込みで最大3個の同時ダウンロードでプリフェッチされます。アプリケーションのニーズに合わせて同時実行数を変更するか、アプリケーションがすべてのアセットを一度にダウンロードする必要がある場合は、同時実行数の制限なしを指定できます。

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Vite::prefetch();
}

デフォルトでは、プリフェッチはページloadイベントが発生したときに開始されます。プリフェッチを開始するタイミングをカスタマイズする場合は、Viteがリッスンするイベントを指定できます。

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Vite::prefetch(event: 'vite:prefetch');
}

上記のコードを使用すると、windowオブジェクトでvite:prefetchイベントを手動でディスパッチすると、プリフェッチが開始されるようになります。たとえば、ページの読み込み後3秒後にプリフェッチを開始できます。

<script>
    addEventListener('load', () => setTimeout(() => {
        dispatchEvent(new Event('vite:prefetch'))
    }, 3000))
</script>

カスタムベースURL

Viteでコンパイルされたアセットが、CDN経由など、アプリケーションとは別のドメインにデプロイされている場合は、アプリケーションの.envファイル内にASSET_URL環境変数を指定する必要があります。

ASSET_URL=https://cdn.example.com

アセットURLを構成した後、アセットへのすべての書き換えられたURLには、構成された値がプレフィックスとして付加されます。

https://cdn.example.com/build/assets/app.9dce8d17.js

絶対URLはViteによって書き換えられないため、プレフィックスは付加されないことに注意してください。

環境変数

アプリケーションの.envファイルでVITE_をプレフィックスとして付けることで、環境変数をJavaScriptに注入できます。

VITE_SENTRY_DSN_PUBLIC=http://example.com

注入された環境変数には、import.meta.envオブジェクトを介してアクセスできます。

import.meta.env.VITE_SENTRY_DSN_PUBLIC

テストでViteを無効にする

LaravelのVite統合は、テストの実行中にアセットの解決を試みます。そのためには、Vite開発サーバーを実行するか、アセットをビルドする必要があります。

テスト中にViteをモックしたい場合は、LaravelのTestCaseクラスを拡張するすべてのテストで使用できるwithoutViteメソッドを呼び出すことができます。

test('without vite example', function () {
    $this->withoutVite();
 
    // ...
});
use Tests\TestCase;
 
class ExampleTest extends TestCase
{
    public function test_without_vite_example(): void
    {
        $this->withoutVite();
 
        // ...
    }
}

すべてのテストでViteを無効にする場合は、ベースのTestCaseクラスのsetUpメソッドからwithoutViteメソッドを呼び出すことができます。

<?php
 
namespace Tests;
 
use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
 
abstract class TestCase extends BaseTestCase
{
    protected function setUp(): void
    {
        parent::setUp();
 
        $this->withoutVite();
    }
}

サーバーサイドレンダリング (SSR)

Laravel Viteプラグインを使用すると、Viteを使用したサーバーサイドレンダリングを簡単に設定できます。開始するには、resources/js/ssr.jsにSSRエントリポイントを作成し、Laravelプラグインに構成オプションを渡してエントリポイントを指定します。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
        }),
    ],
});

SSRエントリポイントの再構築を忘れないように、アプリケーションのpackage.jsonの「build」スクリプトを拡張して、SSRビルドを作成することをお勧めします。

"scripts": {
     "dev": "vite",
     "build": "vite build" 
     "build": "vite build && vite build --ssr" 
}

次に、SSRサーバーをビルドして起動するには、次のコマンドを実行します。

npm run build
node bootstrap/ssr/ssr.js

InertiaでSSRを使用している場合は、代わりにinertia:start-ssr Artisanコマンドを使用してSSRサーバーを起動できます。

php artisan inertia:start-ssr
lightbulb

Laravelのスターターキットには、Laravel、Inertia SSR、およびViteの適切な設定がすでに含まれています。Laravel、Inertia SSR、およびViteを最も早く使い始めるには、Laravel Breezeをご覧ください。

スクリプトとスタイルタグの属性

コンテンツセキュリティポリシー (CSP) ノンス

nonce属性を、コンテンツセキュリティポリシーの一部としてスクリプトタグやスタイルタグに含めたい場合は、カスタムのミドルウェア内でuseCspNonceメソッドを使用してnonceを生成または指定できます。

<?php
 
namespace App\Http\Middleware;
 
use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Vite;
use Symfony\Component\HttpFoundation\Response;
 
class AddContentSecurityPolicyHeaders
{
    /**
     * Handle an incoming request.
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        Vite::useCspNonce();
 
        return $next($request)->withHeaders([
            'Content-Security-Policy' => "script-src 'nonce-".Vite::cspNonce()."'",
        ]);
    }
}

useCspNonceメソッドを呼び出した後、Laravelは生成されたすべてのスクリプトタグとスタイルタグに自動的にnonce属性を含めます。

Laravelのスターターキットに含まれるZiggyの@routeディレクティブを含め、他の場所でnonceを指定する必要がある場合は、cspNonceメソッドを使用して取得できます。

@routes(nonce: Vite::cspNonce())

Laravelに使用させるnonceが既にある場合は、useCspNonceメソッドにnonceを渡すことができます。

Vite::useCspNonce($nonce);

Subresource Integrity (SRI)

Viteマニフェストにアセットのintegrityハッシュが含まれている場合、LaravelはSubresource Integrityを強制するために、生成するすべてのスクリプトタグとスタイルタグに自動的にintegrity属性を追加します。デフォルトでは、Viteはそのマニフェストにintegrityハッシュを含めませんが、vite-plugin-manifest-sri NPMプラグインをインストールすることで有効にできます。

npm install --save-dev vite-plugin-manifest-sri

次に、vite.config.jsファイルでこのプラグインを有効にできます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import manifestSRI from 'vite-plugin-manifest-sri';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
        }),
        manifestSRI(),
    ],
});

必要に応じて、integrityハッシュが見つかるマニフェストキーをカスタマイズすることもできます。

use Illuminate\Support\Facades\Vite;
 
Vite::useIntegrityKey('custom-integrity-key');

この自動検出を完全に無効にしたい場合は、useIntegrityKeyメソッドにfalseを渡すことができます。

Vite::useIntegrityKey(false);

任意の属性

data-turbo-track属性など、スクリプトタグやスタイルタグに追加の属性を含める必要がある場合は、useScriptTagAttributesメソッドとuseStyleTagAttributesメソッドを使用して指定できます。通常、これらのメソッドはサービスプロバイダから呼び出す必要があります。

use Illuminate\Support\Facades\Vite;
 
Vite::useScriptTagAttributes([
    'data-turbo-track' => 'reload', // Specify a value for the attribute...
    'async' => true, // Specify an attribute without a value...
    'integrity' => false, // Exclude an attribute that would otherwise be included...
]);
 
Vite::useStyleTagAttributes([
    'data-turbo-track' => 'reload',
]);

属性を条件付きで追加する必要がある場合は、アセットのソースパス、URL、マニフェストチャンク、およびマニフェスト全体を受け取るコールバックを渡すことができます。

use Illuminate\Support\Facades\Vite;
 
Vite::useScriptTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $src === 'resources/js/app.js' ? 'reload' : false,
]);
 
Vite::useStyleTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $chunk && $chunk['isEntry'] ? 'reload' : false,
]);
exclamation

Vite開発サーバーの実行中は、$chunk引数と$manifest引数はnullになります。

高度なカスタマイズ

LaravelのViteプラグインは、ほとんどのアプリケーションで機能するはずの適切な規約を使用していますが、Viteの動作をカスタマイズする必要がある場合があります。追加のカスタマイズオプションを有効にするために、@vite Bladeディレクティブの代わりに使用できる次のメソッドとオプションを提供します。

<!doctype html>
<head>
    {{-- ... --}}
 
    {{
        Vite::useHotFile(storage_path('vite.hot')) // Customize the "hot" file...
            ->useBuildDirectory('bundle') // Customize the build directory...
            ->useManifestFilename('assets.json') // Customize the manifest filename...
            ->withEntryPoints(['resources/js/app.js']) // Specify the entry points...
            ->createAssetPathsUsing(function (string $path, ?bool $secure) { // Customize the backend path generation for built assets...
                return "https://cdn.example.com/{$path}";
            })
    }}
</head>

次に、vite.config.jsファイル内で同じ構成を指定する必要があります。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'storage/vite.hot', // Customize the "hot" file...
            buildDirectory: 'bundle', // Customize the build directory...
            input: ['resources/js/app.js'], // Specify the entry points...
        }),
    ],
    build: {
      manifest: 'assets.json', // Customize the manifest filename...
    },
});

開発サーバーURLの修正

Viteエコシステム内のいくつかのプラグインは、スラッシュで始まるURLは常にVite開発サーバーを指すと想定しています。ただし、Laravel統合の性質上、これは当てはまりません。

たとえば、Viteがアセットを提供している間、vite-imagetoolsプラグインは次のようなURLを出力します。

<img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">

vite-imagetoolsプラグインは、出力URLがViteによってインターセプトされ、プラグインが/@imagetoolsで始まるすべてのURLを処理することを期待しています。この動作を期待するプラグインを使用している場合は、URLを手動で修正する必要があります。これは、transformOnServeオプションを使用してvite.config.jsファイルで行うことができます。

この特定の例では、生成されたコード内の/@imagetoolsのすべての出現箇所に開発サーバーURLを付加します。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { imagetools } from 'vite-imagetools';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            transformOnServe: (code, devServerUrl) => code.replaceAll('/@imagetools', devServerUrl+'/@imagetools'),
        }),
        imagetools(),
    ],
});

これで、Viteがアセットを提供している間、Vite開発サーバーを指すURLが出力されます。

- <img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">
+ <img src="http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">