基本 - アセットバンドリング（Asset Bundling） - 《Laravel 11.x ドキュメント》日本語

はじめに
- ViteとLaravel Mixの選択
- Mixへの移行
インストールとセットアップ
Viteの実行
JavaScriptでの作業
スタイルシートでの作業
Bladeとルートでの作業
アセットのプリフェッチ
カスタムベースURL
環境変数
テストでのViteの無効化
サーバーサイドレンダリング（SSR）
スクリプトとスタイルタグの属性

はじめに

Viteは、非常に高速な開発環境を提供し、プロダクション用にコードをバンドルする現代的なフロントエンドビルドツールです。Laravelでアプリケーションを構築する際には、通常、Viteを使用してアプリケーションのCSSおよびJavaScriptファイルをプロダクション用のアセットにバンドルします。

Laravelは、開発およびプロダクション用のアセットを読み込むための公式プラグインとBladeディレクティブを提供することで、Viteとシームレスに統合されています。

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

ViteとLaravel Mixの選択

Viteに移行する前は、新しいLaravelアプリケーションはアセットをバンドルする際にMixを使用していました。これはwebpackによって動かされています。Viteは、リッチなJavaScriptアプリケーションを構築する際に、より速く生産的な体験を提供することに焦点を当てています。シングルページアプリケーション（SPA）を開発している場合、Inertiaのようなツールを使用している場合も、Viteが最適です。

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

Mixへの移行

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

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

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

Nodeのインストール

ViteおよびLaravelプラグインを実行する前に、Node.js（16以上）とNPMがインストールされていることを確認する必要があります：

node -v
npm -v

最新のNodeおよびNPMのバージョンは、公式Nodeウェブサイトからのシンプルなグラフィカルインストーラーを使用して簡単にインストールできます。また、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',
   ]),
   ],
});

SPAを構築している場合、Inertiaを使用して構築されたアプリケーションを含め、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エントリーポイントなどの高度な構成オプションもサポートしています。

安全な開発サーバーでの作業

ローカルの開発ウェブサーバーがHTTPSを介してアプリケーションを提供している場合、Vite開発サーバーへの接続に問題が発生することがあります。

Laravel Herdを使用してサイトを保護している場合、またはLaravel Valetを使用しており、アプリケーションに対してsecure commandを実行している場合、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',
   }),
   ],
});

別のウェブサーバーを使用している場合は、信頼できる証明書を生成し、生成された証明書を使用するように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コマンドを実行しているときにコンソールの「Local」リンクに従って、Viteの開発サーバーの証明書警告を受け入れる必要があります。

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

Laravel Sail内でWindows Subsystem for Linux 2（WSL2）上で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>

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

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


必要に応じて、`````@vite`````ディレクティブを呼び出すときにコンパイルされたアセットのビルドパスを指定することもできます：  
``````blade
<!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コマンドを実行すると、アプリケーションのアセットがバージョン管理され、バンドルされ、プロダクションにデプロイする準備が整います：


# Vite開発サーバーを実行する...
npm run dev
# プロダクション用にアセットをビルドおよびバージョン管理する...
npm run build

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

JavaScriptでの作業

エイリアス

デフォルトでは、Laravelプラグインは、アプリケーションのアセットを便利にインポートするための一般的なエイリアスを提供します：

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


``````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,
   },
   },
   }),
   ],
});

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

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')


Laravelの[スターターキット](/read/laravel-11-x/4f3d9f3a392315aa.md)には、適切なLaravel、React、およびViteの構成がすでに含まれています。[Laravel Breeze](4f3d9f3a392315aa.md#breeze-and-inertia)をチェックして、Laravel、React、およびViteを始める最も早い方法を見つけてください。  
 <a name="inertia"></a>
### Inertia
Laravel Viteプラグインは、Inertiaページコンポーネントを解決するのに役立つ便利な`````resolvePageComponent`````関数を提供します。以下は、Vue 3でのヘルパーの使用例ですが、Reactなどの他のフレームワークでもこの関数を利用できます：  
``````js
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 }) {
   return createApp({ render: () => h(App, props) })
   .use(plugin)
   .mount(el)
  },
});
`

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

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

URL処理

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

相対アセットパスを参照する場合、パスは参照されるファイルに対して相対的であることを覚えておいてください。相対パスで参照されたアセットは、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のCSSサポートについては、Viteドキュメントで詳しく学ぶことができます。PostCSSプラグイン（Tailwindなど）を使用している場合は、プロジェクトのルートにpostcss.config.jsファイルを作成すると、Viteが自動的に適用します：

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

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

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/**


これらのデフォルトパスがニーズに合わない場合は、監視するパスの独自のリストを指定できます：  
``````js
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アプリケーションでは、定期的に参照されるディレクトリにエイリアスを作成することが一般的です。ただし、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アセットを積極的にプリフェッチする機能を提供します。

Laravelにアセットを積極的にプリフェッチさせるには、サービスプロバイダーのbootメソッド内でVite::prefetchメソッドを呼び出します：

<?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();
}

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

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

上記のコードにより、プリフェッチはvite:prefetchイベントをwindowオブジェクトで手動でディスパッチしたときに開始されます。たとえば、ページがロードされてから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を使用している場合、SSRサーバーを起動するにはinertia:start-ssr Artisanコマンドを使用できます：

php artisan inertia:start-ssr

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

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

コンテンツセキュリティポリシー（CSP）ノンス

スクリプトとスタイルタグにnonce属性を含める場合、カスタムミドルウェア内でuseCspNonceメソッドを使用してノンスを生成または指定できます：

<?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()."'",
   ]);
   }
}


他の場所でノンスを指定する必要がある場合、Laravelの[スターターキット](/read/laravel-11-x/4f3d9f3a392315aa.md)に含まれる[Ziggy `````@route`````ディレクティブ](https://github.com/tighten/ziggy#using-routes-with-a-content-security-policy)を含める場合、`````cspNonce`````メソッドを使用して取得できます：  
``````blade
@routes(nonce: Vite::cspNonce())
`

すでに使用したいノンスがある場合は、useCspNonceメソッドにノンスを渡すことができます：

Vite::useCspNonce($nonce);

サブリソース整合性（SRI）

Viteマニフェストにアセットのintegrityハッシュが含まれている場合、Laravelは自動的に生成するすべてのスクリプトおよびスタイルタグに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(),
   ],
});

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

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

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

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,
]);


 <a name="advanced-customization"></a>
## 高度なカスタマイズ
デフォルトで、LaravelのViteプラグインは、ほとんどのアプリケーションで機能するはずの合理的な慣習を使用します。ただし、時にはViteの動作をカスタマイズする必要があるかもしれません。追加のカスタマイズオプションを有効にするために、`````@vite````` Bladeディレクティブの代わりに使用できる以下のメソッドとオプションを提供します：  
``````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>
`


``````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-imagetoolsプラグインは、Viteがアセットを提供している間に次のようなURLを出力します：

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


この特定の例では、生成されたコード内の`````/@imagetools`````のすべての出現に開発サーバーのURLを前置きします：  
``````js
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">