ホームページ >PHPフレームワーク >Laravel >Laravel 拡張機能の推奨: vite-plugin パッケージは Vite を使用してホットリロードを実装します

Laravel 拡張機能の推奨: vite-plugin パッケージは Vite を使用してホットリロードを実装します

青灯夜游
青灯夜游転載
2022-11-14 20:28:142364ブラウズ

この記事では、Laravel 拡張機能である vite-plugin パッケージを紹介します。Laravel Blade で Vite を使用してホットリロードを実装する方法を紹介します。皆さんのお役に立てれば幸いです。

Laravel 拡張機能の推奨: vite-plugin パッケージは Vite を使用してホットリロードを実装します

Laravel チームは、ブレード テンプレート/任意のファイルが変更されたときのフルページのリロードをサポートするために、ファーストパーティ Laravel vite-plugin パッケージを更新しました。変更されたブレード テンプレート (または設定したその他のファイル) を編集すると、Vite はページ全体をリロードします。開発中にブラウザを手動で更新する必要はもうありません。

新しい Laravel プロジェクトをインストールする場合、vite.config.js ファイルの基本構成は次のようになります:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
});

上記のコード スニペットはまったく新しいものです。 Laravel アプリケーションでは、新しいプロジェクトで動作するためにホットリロードを行うために何もする必要はありません。

Noterefresh 設定 - true に設定すると、次のパスにあるファイルを更新すると、Laravel Vite プラグインによってページが更新されます:

routes/**
resources/views/**

この規則はおそらくほとんどのプロジェクトで機能しますが、他のパスまたはファイルを含めたい場合は、更新プロパティを構成できます:

 import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: [
                'resources/routes/**',
                'routes/**',
                'resources/views/**',
            ],
        }),
    ],
});

構成オプションの詳細については、# 公式ドキュメントの ## を参照してください。 Blade テンプレートとルーティング を使用します。

試してみる

ホットリロードをデモンストレーションするために、デモ Laravel アプリケーションをセットアップしてみましょう。まず、新しいデモ プロジェクトを作成しましょう:

laravel new blade-hot-reload --git
cd blade-hot-reload
プロジェクトがインストールされたら、

resources/views/welcome.blade.php に次のコードを追加します。ファイルの :

@vite('resources/js/app.js')
次に、NPM の依存関係をインストールし、dev コマンドを実行する必要があります:

npm install
npm run dev
以上です。 Blade ファイルまたはルートに変更を加えると、コンソールに次のような内容が表示されます。

Vite page reload console output

行った変更は、ローカル環境に応じて、すぐに反映されます。開発環境の設定。

この記事のすべての翻訳は、学習とコミュニケーションのみを目的としています。転載する場合は、必ず翻訳者、出典、およびこの記事へのリンクを明記してください。 当社の翻訳作業は
CC 契約
に準拠しています。当社の翻訳作業がお客様の権利を侵害する場合は、速やかにご連絡ください。

元のアドレス:
https://laravel-news.com/laravel-blade-h...

翻訳されたアドレス:

https://learnku.com/laravel/t/69811

以上がLaravel 拡張機能の推奨: vite-plugin パッケージは Vite を使用してホットリロードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はlearnku.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。