vitejsphpbootstrap
Je travail en php, et pour le front-end un bundler c'est top pour optimiser le chargement de pages.
Ce n'est pas la partie que je préfère, mais je dois dire que ViteJS facilite les choses.
Perso, je suis passé de Gulp à Webpack puis ParcelJS et aujourd'hui ViteJS.
Ici, je propose un exemple d'utilisation de ViteJS avec du PHP pour charger Bootstrap.
Le but être le plus simple possible afin que vous puissiez adapter le code plus facilement suivant vos besoins.
Notre index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<?php
// on placera ici notre code php
?>
</head>
<body>
<div class="container">
<div class="row">
<h1>Aller vite, et que ça <span class="text-primary">saute</span>!</h1>
</div>
</div>
</body>
</html>
Ici, on va l'installer et le configurer.
J'ai pas NodeJS sous Windows, je fais comment?
==> utilise Laragon ou installe NodeJs directement: nodejs.org
On va initialiser un projet et installer vitejs et le nécessaire pour Bootstrap
// initialise
npm init -y
// installation vitejs, Bootstrap, Popper (pour les popvers), sass et les icons de bootstrap
npm i -D vite && npm i --save bootstrap @popperjs/core && npm i bootstrap-icons && npm i --save-dev sass
On va modifier package.json pour que l'on puisse utiliser deux commandes avec viteJS.
Au niveau de la section 'script' il faut ajouter deux lignes "dev": "vite",
"build": "vite build"
Exemple:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vite",
"build": "vite build"
},
Maintenant on a disposition deux commandes:
npm run dev <== lance le serveur dev de ViteJS, on est en 'Live reloading'npm run build <== génère les 'assets', en gros les fichiers: js, css et sont nécessaires au projet (en production)En prod. on a besoin des fichiers en 'dur', on génère donc les 'assets'.
Ici, on va expliquer à Vite, où sont nos fichiers sources et comment on veux qu'ils soient 'buildés'.
En général, on a un un répertoire accessible en 'public' il se nomme souvent: 'public' ou 'www', il faudra adapter la config. pour que vite génère les fichiers au bon endroit.
ViteJS utilise RollupJS en interne pour nous rendre les assets.
On va créer un fichier 'vite.config.mjs' à la racine du projet:
import { defineConfig } from "vite"
export default defineConfig({
server:{
//port: '2424',
origin: 'http://localhost:5173'
},
base: '/assets',
build: {
copyPublicDir:false,
outDir: 'public/assets/tpl_1',
assetsDir:'',
manifest: true,
rollupOptions: {
input: 'rsc/tpl_1/main.js',
},
},
})
origin: 'http://localhost:5173' <== indiquer le port que vous voulez, (on en aura besoin pour la partie php)base: '/assets' <== c'est un prefix, vite l'utilisera pour 'pointer' vers certains fichiers public(nested public path)outDir: 'public/assets/tpl_1' <== permet d'indiquer où placer les 'assets'manifest: true <== indique à vite de générer un fichier .json contenant des infos sur les assets (on l'utilisera coté php)input: 'rsc/tpl_1/main.js' <== indique le point d'entré pour vite en mode dev, parfois on a besoin de séprarer notre code via la config input de Rollupjs
Il s'agit de tous nos fichiers: .js, .css, .scss qui forment le code 'source' de notre front-end.
ViteJS ce sert d'un point d'entré: un ficher .js, souvent nommé 'main.js'.
C'est ce fichier qui va 'inclure' tous les autres fichiers.
Ici, la structure est la suivante: notre dossier racine 'rsc', le nom de notre 'asset' (ici, tpl_1):
Ici, on va inclure bootstrap, ce qui donne pour main.js:
// vos autres fichiers 'sources'
//import './main.scss'
//import './main.css'
// Import our custom CSS
import './bootstrap.scss'
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
// test pour voir si cela fonctionne
document.body.append('Hello World o/ from main.js')
Ici, on inclut le bootstrap par défaut, si vous souhaitez le personaliser (via sass), il faudra modifier le fichier bootstrap.scss:
// Import all of Bootstrap's CSS
@import "bootstrap/scss/bootstrap";
La doc officielle de bootstrap vous donne un exemple complet pour le customiser.
Php va devoir charger le js et le css de deux façons, une pour le mode 'Live Reloading' et une autre pour les 'assets'.
On fait ça au niveau de la balise 'head' (of course)
Pour les 'assets', RollupJS ajoute une sorte de hash au noms des fichiers. Cela permet d'indiquer au navigateur de refresh ou non le cache.
C'est là qu'intervient le manifest.json, c'est lui qui va nous donner le nom des fichiers.
Pour être en mode 'live', on va faire des requêtes à destination du serveur ViteJS. Celui qu'on a lancé en local (npm run dev).
Ce qui donne (J'utilise la syntaxe heredoc, je la trouve sexy )
# exemple, adapter à vos besoins, votre style
$html=<<<HTML
<script src="http://localhost:5173/assets/@vite/client" type="module"></script> <!-- live reloading -->
<script src="http://localhost:5173/assets/rsc/tpl_1/main.js" type="module"></script>
HTML;
echo $html;
Ici, on doit donc 'lire' le fichier manifest pour connaître le noms des fichiers:
# "lecture" du manifest - /!\ Ce code n'est pas adapté à de la prod. suivant votre expérience améliorer cette implémentation
$manifest=json_decode(file_get_contents('./public/assets/tpl_1/.vite/manifest.json'),true);
$html=<<<HTML
<script src="public/assets/tpl_1/{$manifest['rsc/tpl_1/main.js']['file']}" type="module"></script>
<link rel="stylesheet" href="public/assets/tpl_1/{$manifest['rsc/tpl_1/main.js']['css'][0]}">
HTML;
echo $html;
Ici, c'est relativement classique, on charge des fichiers .js et .css, rien de plus.
Ici, des ressources utilisées pour bien démarrer avec vitejs et php: