Rumah > Artikel > pembangunan bahagian belakang > Cara Memasukkan JavaScript dalam Laravel Panduan Langkah demi Langkah untuk Semua Senario

Cara Memasukkan JavaScript dalam Laravel Panduan Langkah demi Langkah untuk Semua Senario

Barbara Streisandasal: 2024-11-08 19:56:02324semak imbas

How to Include JavaScript in Laravel A Step-by-Step Guide for All Scenarios

Cara Memasukkan JavaScript dalam Laravel 11: Panduan Langkah demi Langkah untuk Semua Senario

Dalam Laravel 11, menambahkan JavaScript pada projek anda boleh menjadi mudah, terima kasih kepada Vite, pengikat aset lalai. Berikut ialah cara untuk menyediakan JavaScript anda untuk semua jenis senario, daripada kemasukan global kepada pemuatan bersyarat dalam paparan tertentu.

1. Termasuk JavaScript dalam Semua Fail

Dalam banyak kes, anda mungkin mahu memasukkan JavaScript secara global merentas aplikasi Laravel anda. Begini cara menyusun dan menggabungkan JavaScript untuk kemasukan universal.

Langkah 1: Letakkan Fail JavaScript Anda

Lokasi: Simpan fail JavaScript dalam direktori sumber/js. Contohnya, jika fail anda dinamakan custom.js, simpan ia sebagai resources/js/custom.js.
Atur: Untuk projek kompleks dengan berbilang fail JavaScript, anda boleh menyusunnya dalam subdirektori dalam sumber/js, seperti resources/js/modules/custom.js.

Langkah 2: Susun JavaScript dengan Vite

Laravel 11 menggunakan Vite untuk mengurus aset. Untuk mengkonfigurasinya untuk menggabungkan JavaScript anda:

Sertakan dalam app.js: Buka sumber/js/app.js dan import fail tersuai anda:

   import './custom.js';

Import Terus dalam Paparan: Sebagai alternatif, jika anda hanya mahu JavaScript dalam paparan tertentu, anda boleh menggunakan arahan @vite dalam templat Blade:

   @vite('resources/js/custom.js')

Langkah 3: Konfigurasikan vite.config.js

Pastikan vite.config.js ditetapkan untuk mengendalikan import @vite dengan betul. Secara lalai, ia sepatutnya kelihatan seperti ini:

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

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

Langkah 4: Jalankan Vite

Untuk menyusun aset anda dengan Vite:

Untuk pembangunan: jalankan npm run dev
Untuk pengeluaran: jalankan npm run build

Langkah 5: Muatkan JavaScript dalam Templat Blade

Untuk memasukkan fail JavaScript dalam templat anda, gunakan arahan @vite:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Laravel App</title>
    @vite('resources/js/app.js')
</head>
<body>
    <!-- Content here -->
</body>
</html>

Ringkasan

Simpan fail JavaScript dalam sumber/js.
Import dalam app.js untuk kemasukan global atau sertakan terus dalam templat Blade mengikut keperluan.
Kompilkan aset menggunakan Vite.
Gunakan @vite dalam templat Blade untuk memuatkan JavaScript.

Dengan persediaan ini, JavaScript akan tersedia di seluruh tapak dalam projek Laravel 11.

2. Memahami Perintah Rendering Bilah

Apabila menyertakan JavaScript secara bersyarat dalam paparan khusus, adalah penting untuk memahami susunan templat Blade dipaparkan.

Dalam Laravel, reka letak diproses dahulu, diikuti dengan pandangan individu dan separa. Berikut ialah proses pemaparan:

Reka letak dipaparkan dahulu, dengan pemegang tempat (@hasil dan @bahagian) dicipta untuk suntikan kandungan.
Paparan atau separa kanak-kanak diproses seterusnya, dengan kandungannya dimasukkan ke dalam ruang letak reka letak.

Disebabkan oleh perintah ini, jika anda ingin menambahkan fail JavaScript secara bersyarat dalam reka letak berdasarkan kandungan paparan kanak-kanak, semakan pembolehubah standard tidak akan berfungsi. Anda perlu menggunakan arahan @stack dan @push Blade untuk pengendalian JavaScript khusus halaman yang lebih fleksibel.

3. Secara Bersyarat Termasuk JavaScript dalam Paparan Tertentu Menggunakan Tindanan dan Tekan

Untuk menambahkan JavaScript pada paparan tertentu, arahan @stack dan @push Laravel menawarkan penyelesaian yang cekap, membolehkan anda memasukkan skrip secara bersyarat dalam reka letak.

Langkah 1: Tentukan Tindanan dalam Reka Letak Anda

Dalam reka letak anda, buat tindanan untuk skrip khusus halaman:

   import './custom.js';

Langkah 2: Push Skrip daripada Child Views

Dalam fail Blade khusus yang memerlukan JavaScript, tolak ke timbunan skrip:

   @vite('resources/js/custom.js')

Dengan persediaan ini, custom.js hanya akan disertakan apabila paparan khusus itu dimuatkan. Kaedah ini menyediakan penyelesaian bersih yang berfungsi dengan susunan pemaparan Laravel, memastikan fail JavaScript disertakan secara bersyarat seperti yang diperlukan.

Di Mana Untuk Mengisytiharkan @push?

Penempatan pernyataan @push dalam paparan Blade penting terutamanya untuk kebolehbacaan dan susunan pelaksanaan. Begini cara menggunakan @push dengan berkesan:

Peletakan dalam Paparan: Walaupun anda boleh meletakkan @push di mana-mana sahaja dalam paparan Blade, adalah amalan terbaik untuk meletakkannya di hujung fail, biasanya selepas kandungan @bahagian. Ini memastikan kod berkaitan skrip berasingan daripada kandungan utama, meningkatkan kebolehbacaan dan kebolehselenggaraan.

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

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

Susunan Berbilang Pernyataan @push: Jika anda mempunyai berbilang perisytiharan @push untuk tindanan yang sama (cth., @push('skrip')), ia akan dilampirkan dalam susunan yang dipaparkan dalam paparan. Contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Laravel App</title>
    @vite('resources/js/app.js')
</head>
<body>
    <!-- Content here -->
</body>
</html>

Dalam kes ini, script1.js akan dimuatkan sebelum script2.js kerana @push menambahkan kandungan pada tindanan mengikut susunan yang diisytiharkan.

Menggunakan @push dalam Partials dan Komponen: @push juga boleh digunakan dalam bahagian Blade (cth., @include) atau komponen Blade. Ini berguna untuk memasukkan skrip atau gaya khusus paparan secara langsung dalam komponen boleh guna semula, menjadikannya mudah untuk mengurus kebergantungan.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Laravel App</title>
    @vite('resources/js/app.js')
    @stack('scripts') <!-- Define a stack for additional scripts -->
</head>
<body>
    @yield('content')
</body>
</html>

Apabila bahagian ini disertakan dalam paparan, partial-specific.js akan ditambahkan pada tindanan skrip dalam fail reka letak.

Kawal Pesanan dengan @prepend: Jika skrip tertentu perlu dimuatkan sebelum yang lain dalam tindanan yang sama, anda boleh menggunakan @prepend dan bukannya @push. @prepend meletakkan kandungan pada permulaan tindanan, membenarkan kawalan yang lebih besar ke atas susunan pemuatan.

   import './custom.js';

Di sini, critical.js akan dimuatkan sebelum non_critical.js, tanpa mengira penempatannya dalam fail Blade.

Pengambilan Utama

Letakkan @push di penghujung paparan untuk kejelasan dan kebolehselenggaraan.
Pesanan ditentukan oleh peletakan dalam paparan, dengan penyataan @push awal dimuatkan dahulu.
@push berfungsi dalam separa dan komponen, menjadikannya mudah untuk memasukkan kebergantungan khusus paparan.
Gunakan @prepend untuk skrip yang perlu dimuatkan dahulu dalam tindanan yang sama.

4. Alternatif: Menggunakan Pernyataan Syarat Sebaris dalam Reka Letak

Jika anda memerlukan kawalan yang lebih baik apabila JavaScript disertakan, pernyataan bersyarat Laravel membenarkan logik berasaskan laluan atau pembolehubah terus dalam reka letak.

Sertakan Bersyarat Berdasarkan Laluan

Anda boleh menggunakan semakan laluan terus dalam reka letak untuk memasukkan JavaScript berdasarkan laluan semasa:

   @vite('resources/js/custom.js')

Sertakan Bersyarat Berdasarkan Pembolehubah

Untuk memuatkan skrip secara bersyarat berdasarkan pembolehubah, anda boleh menetapkan bendera dalam pengawal atau paparan anak, kemudian semaknya dalam reka letak:

Dalam pengawal anda:

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

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

Dalam reka letak:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Laravel App</title>
    @vite('resources/js/app.js')
</head>
<body>
    <!-- Content here -->
</body>
</html>

Pendekatan ini membolehkan anda mengawal pemuatan JavaScript berdasarkan pembolehubah atau laluan tertentu, memberikan fleksibiliti untuk persediaan halaman tersuai.

Ringkasan

Berikut ialah ikhtisar ringkas kaedah yang dibincangkan:

Kemasukan Global: Letakkan JavaScript dalam app.js dan sertakan secara global menggunakan @vite.
Kemasukan Bersyarat dengan Tindanan dan Tekan: Gunakan arahan @stack dan @push untuk pengendalian skrip modular yang fleksibel, yang memastikan skrip hanya dimuatkan dalam paparan di mana ia diperlukan.
Pernyataan Bersyarat dalam Reka Letak: Gunakan semakan berasaskan laluan atau pembolehubah pengawal untuk memuatkan JavaScript secara bersyarat terus dalam reka letak.

Pilihan ini membolehkan anda mengawal pemuatan JavaScript dengan tepat, menjadikan projek Laravel 11 anda cekap dan boleh diselenggara.

Atas ialah kandungan terperinci Cara Memasukkan JavaScript dalam Laravel Panduan Langkah demi Langkah untuk Semua Senario. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript laravel npm define if for while include Directory using Conditional JS default this location

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mengapakah saya Mendapat "Masalah sijil SSL: tidak boleh mendapatkan sijil pengeluar tempatan" Apabila Menggunakan Akses PayPal?Artikel seterusnya：Mengapakah saya Mendapat "Masalah sijil SSL: tidak boleh mendapatkan sijil pengeluar tempatan" Apabila Menggunakan Akses PayPal?

Artikel berkaitan

Lihat lagi