Vite !
Il existe plusieurs empaqueteurs (bundlers) qui permettent de regrouper nos fichiers Javascript et CSS, de compresser nos images, de lancer un transpiler… Le plus célèbre est certainement Webpack, mais il a de sérieux concurrents comme Parcel.
Laravel utilisait jusque-là Webpack par l’intermédiaire de Mix qui est un utilitaire très pratique pour éviter de se prendre la tête avec les subtilités de Webpack. Mais les choses ont récemment changé pour Laravel et Webpack a été mis au placard. Cela au profit d’un nouveau venu : Vite. Par la même occasion, Mix a également rejoint une étagère dans le même placard.
Pourquoi ce changement ? Nous vivons dans un monde où la vitesse est privilégiée et c’est la principale raison de ce changement. Ceux qui sont habitués aux lenteurs de Webpack au travers de Mix devraient apprécier la stupéfiante vitesse de Vite qui porte très bien son nom.
Pour avoir un premier ressenti de cette vitesse, créez une application Laravel avec Breeze (avec Vue par exemple) :
composer create-project laravel/laravel vite composer require laravel/breeze --dev php artisan breeze:install vue npm install
Il ne nous reste plus qu’à compiler les assets avec la commande habituelle et c’est là que les choses vont changer :
npm run dev
Auparavant, quand on tapait cette commande, on savait qu’on devait attendre un certain temps, maintenant on a le résultat pratiquement instantanément :
Ça n’a pris que 435 ms !
On trouve un nouveau fichier de configuration :
Avec ce code de base :
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
On voit qu’en plus de Vite, on charge un plugin de Laravel, il va bien nous simplifier la vie !
On trouve ce plugin avec tous les paquets chargés par npm :
D’autre part, on trouve un point d’entrée pour Javascript mais pas pour le CSS…
L’installation avec Vue charge aussi Inertia et il paraît que Vite fonctionne mieux si on charge le CSS par Javascript :
import './bootstrap'; import '../css/app.css';
Maintenant, comment est-ce qu’on fait l’intégration dans le HTML ? On dispose d’une nouvelle directive avec Blade :
<head>
...
@vite('resources/js/app.js').
</head>
Et Vite se charge de tout ! Y compris le Hot Module Replacement en mode développement.
On trouve une documentation qui ne semble pas encore complètement au point ici.
Pour les nostalgiques de Mix, il est encore possible de l’utiliser. Il existe un processus de migration de Vite vers Mix.
On peut se réjouir de voir que la langue française n’est pas morte et qu’elle est utilisée ici !
Pour tout savoir sur Vite c’est ici que ça se passe.
10 commentaires
lahennabo
Je vous remercie pour ce tutoriel, c’est tres interessant.
jire
quand j’ecrit dans url ce lien https://localhost:3000/
la je suis bien rediriger avec et on affiche une page la,
il ya un logo de laravel + un logo de vue,
alor comment proceder la suite merçi
jire
Bonjour monsieur bestmomo svp je fait tout ce que vous vounait de nous dire mais je cette erreur .
Class « Inertia\Middleware » not found
avec ce code,
app
/
Http
/
Middleware
/
HandleInertiaRequests
.php
: 9
<?php
namespace App\Http\Middleware;
use Illuminate\Http\Request;
use Inertia\Middleware;
use Tightenco\Ziggy\Ziggy;
class HandleInertiaRequests extends Middleware
{
/**
* The root template that is loaded on the first page visit.
*
* @var string
*/
protected $rootView = 'app';
/**
* Determine the current asset version.
*
* @param \Illuminate\Http\Request $request
* @return string|null
*/
public function version(Request $request)
{
return parent::version($request);
}
bestmomo
Bonjour,
J’ai proposé dans l’article une installation avec Breeze qui ne devrais pas installer Inertia. Il vaudrait mieux recommencer cette installation.
jire
Bonjour,
BESTMOMO merçi beaucoup sa fonctionne bien
que Dieu vous protege et quil vous donne toutes les bonne chose du monde que vous merité.
jire
Si vous appréciez mon travail…
Merci à tous les généreux donateurs !
Moi aussi ce pour bietot!
jire
Bonjour monsieur pardon pour le dérangement je juste deux questions
je connait seulment le langage de javaScript et non le react et vue js, Alors quel sont le technique quil faut évoluer avec laravel jousque ici ?
bestmomo
Salut,
React et Vue ne sont que du Javascript organisé de façon particulière. Un framework Javascript ne me semble utile que pour les grosses applications avec une grande part de traitement côté client. Donc tout dépend le type d’application que tu vas avoir à développer.
jire
Salut Mr BESTMOMO !
je aussi des probleme de connection,
Ce site est inaccessiblelocalhost n’autorise pas la connexion.
Voici quelques conseils :
Vérifier la connexion
Vérifier le proxy et le pare-feu
ERR_CONNECTION_REFUSED
et aussi l’expiration de la page dans moins d’une munites ,quant je quite dans le terminal on coupe la connection de la page .
jire
Bonjour monsieur, merci beaucoup pour ce tuto !