Wykorzystanie jQuery z Laravel przy użyciu narzędzia Vite

jQuery jest jedną z najpopularniejszych bibliotek JavaScript, która znacząco ułatwia interakcję z elementami strony internetowej. W połączeniu z Laravel, popularnym frameworkiem PHP, i narzędziem Vite do kompilacji, możemy stworzyć wydajne i interaktywne aplikacje internetowe. W tym artykule prześledzimy proces instalacji i wykorzystania jQuery w Laravel za pomocą Vite, krok po kroku.

Krok 1: Utwórz nowy projekt Laravel

Zacznijmy od utworzenia nowego projektu Laravel. Możemy to zrobić za pomocą Composer, wykonując następujące polecenie w terminalu:

				
					composer create-project laravel/laravel laravel-jquery-vite

Następnie przechodzimy do katalogu projektu:

				
					cd laravel-jquery-vite

Krok 2: Zainstaluj jQuery za pomocą npm

W projekcie Laravel możemy użyć npm do zarządzania bibliotekami JavaScript. Zainstalujmy jQuery, wykonując polecenie:

				
					npm install jquery

Krok 3: Dodaj import jQuery do app.js

Otwórz plik resources/js/app.js i dodaj import jQuery:

				
					import './bootstrap';
import jQuery from 'jquery';
window.$ = jQuery;

Krok 4: Zainstaluj jQuery w szablonach Blade

Teraz dołączmy jQuery do szablonów Blade. Utwórz plik Blade i dodaj kod:

				
					<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel jQuery Vite</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <p class="zoomable">
        Click me to zoom
    </p> <script type="module">window.addEventListener('DOMContentLoaded',function(){$(document).ready(function(){$(".zoomable").click(function(){$(this).animate({fontSize:"40px"},1000);});});});</script> <script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script><script defer src="https://rafalmajkowski.pl/wp-content/cache/autoptimize/js/autoptimize_a91fe4368765a23bc56a6eb3e9051fd3.js"></script></body>
</html>

Krok 5: Dodaj trasę

Dodaj trasę w pliku routes/web.php:

				
					use Illuminate\Support\Facades\Route;

Route::get('/test-jquery', function () {
    return view('test-jquery');
});

Krok 6: Skompiluj zasoby za pomocą npm

Skompiluj zasoby za pomocą npm:

				
					npm run dev

Krok 7: Przetestuj aplikację

Uruchom serwer Laravel:

				
					php artisan serve

Otwórz przeglądarkę i przejdź do http://127.0.0.1:8000/test-jquery, aby przetestować aplikację.

W tym artykule omówiliśmy, jak skorzystać z jQuery w połączeniu z frameworkiem Laravel, wykorzystując narzędzie Vite do kompilacji zasobów. Rozpoczęliśmy od utworzenia nowego projektu Laravel, a następnie zainstalowaliśmy jQuery za pomocą npm. Następnie dodaliśmy import jQuery do pliku app.js i zintegrowaliśmy go z szablonem Blade. Dzięki temu uzyskaliśmy możliwość korzystania z jQuery w naszej aplikacji Laravel.

Kolejnym krokiem było dodanie trasy do wyrenderowania widoku zawierającego kod HTML z wykorzystaniem jQuery. Skompilowaliśmy nasze zasoby przy użyciu npm i przetestowaliśmy działanie aplikacji, uruchamiając lokalny serwer Laravel.

Dzięki tej integracji możemy efektywnie zarządzać zasobami oraz zwiększyć interaktywność naszych aplikacji internetowych, co przyczynia się do lepszej jakości użytkowej naszych projektów. Mam nadzieję, że ten artykuł dostarczył Ci użytecznych wskazówek i inspiracji do wykorzystania jQuery w projektach opartych na Laravelu.

Kategorie