Laravel Vite avec Bootstrap 5

2022년 6월에 Laravel은 Webpack au profit de Vite를 포기한다고 발표했습니다.

Depuis la version 9.23, les nouveaux projets Laravel utiliseront nativement Vite pour la génération des "assets"CSS et JS.

Laravel a publié un guide de migration les projets 존재를 따르십시오.
더 많은 Laravel 7, Laravel oublie les utilisateurs 부트스트랩...
Heureusement Cotiga est là pour vous sortir de ce trépas :p

Cet 기사 est un condensé du guide fournit par Laravel(cité plus haut), du guide de Bootstrap encore en chantier et de cette preview .
Il convient autant aux nouvelles App, qu'à celles existantes.
La Manipulate n'est pas complexe et relativement rapide.

드 라라벨 믹스 아 비테

Tout d'abord, installez Vite 등 plugin Laravel Vite
npm install --save-dev vite laravel-vite-plugin
Votre App est censée utiliser Boostrap et Sass, les paquets doivent donc être installés.
S'il s'agit d'une nouvelle App, installez-les :npm install --save-dev sass bootstrap @popperjs/core
유지보수 설치 제거 프로그램 Laravel Mix et ses 종속성 Webpack:npm remove laravel-mix resolve-url-loader sass-loaderrm webpack.mix.js

구성자 Vite

Créez le fichier vite.config.js à la racine de votre App et éditez le comme suit:

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

export default defineConfig({
  plugins: [
    laravel([
      'resources/js/app.js',
      // 'resources/js/homepage.js' Exemple js/css page d'accueil à mettre dans la vue : @vite(['resources/js/homepage.js']
    ]),
  ],
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
})

모든 앱, 몇 가지 CSS/Sass를 가져오고 Laravel Mix를 가져옵니다. Avec Vite, nous n'utiliserons que le fichier JS, c'est lui qui importera le CSS/Sass.

스크립트 NPM

일부 "스크립트"및 package.json 형식 수정:

"scripts": {
  "dev": "vite",
  "build": "vite build"
}

임포터 부트스트랩

Normalement déja présent sur une App existante.
Sur une nouvelle App, importer les sources Bootstrap dans le fichier resources/sass/app.scss comme suit :

@import "~bootstrap/scss/bootstrap";

Vite n'accepte que les module ES, vous devez donc modifier les require() par des import.
Editez resources/js/bootstrap.js comme suit :
(PopperJs sera importé automatiquement)

import * as bootstrap from 'bootstrap'
window.bootstrap = bootstrap;

임포터 파일 CSS/JS 부트스트랩 및 resources/js/app.js

import '../sass/app.scss';
import './bootstrap';

컴파일러

Laravel-mix는 다음과 같이 컴파일됩니다.npm run dev푸어 라 미장 프로덕션npm run build
Le mode "dev"ou production "build"est détecté et génèrera les éléments temporaires en dev et dans/public/build pour la mise en prod.

Remplacer mix() par @vite

Lorsque vous utilisez Vite, vous devrez utiliser la directive Blade @vite aulieu de mix() dans le layout(ou dans vos vues).

@vite(['resources/js/app.js'])

RAPPEL: vous n'avez pas à inclure le fichier CSS, il est importé via JavaScript.

피니르를 따르다

Sur une App existante, mettez bien tout à jour :composer update
Valet utilisez utilisez, mettez le aussi à jour :composer global updatevalet install
Et un petit coup de nettoyage pour bien repartir sur du neuf :php artisan clear-compiled &&
php artisan auth:clear-resets &&
php artisan cache:clear &&
php artisan config:clear &&
php artisan route:clear &&
php artisan view:clearcomposer dump-autoload
En fonction de votre stratégie de déploiement, vous pouvez ajouter le dossier "build"au fichier .gitignore :

/public/build