首頁 >後端開發 >php教程 >如何在 Laravel 中包含 JavaScript 適用於所有場景的逐步指南

如何在 Laravel 中包含 JavaScript 適用於所有場景的逐步指南

Barbara Streisand原創: 2024-11-08 19:56:02421瀏覽

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

如何在 Laravel 11 中包含 JavaScript：適用於所有場景的逐步指南

在 Laravel 11 中，將 JavaScript 新增至專案可以輕而易舉，這要歸功於預設的資源捆綁器 Vite。以下是如何為各種場景設定 JavaScript，從全域包含到特定視圖中的條件載入。

1. 在所有文件中包含 JavaScript

在許多情況下，您可能希望在 Laravel 應用程式中全域包含 JavaScript。以下是如何組織和捆綁 JavaScript 以實現普遍包容。

第 1 步：放置 JavaScript 文件

位置：將JavaScript檔案儲存在resources/js目錄中。例如，如果您的檔案名稱為 custom.js，請將其儲存為 resources/js/custom.js。
組織：對於包含多個JavaScript檔案的複雜項目，您可以將它們組織在resources/js的子目錄中，例如resources/js/modules/custom.js。

步驟2：使用Vite編譯JavaScript

Laravel 11 使用 Vite 來管理資產。要將其配置為捆綁您的 JavaScript：

包含在app.js中：開啟resources/js/app.js並匯入您的自訂檔案：

   import './custom.js';

在視圖中直接匯入：或者，如果您只想在某些視圖中使用 JavaScript，您可以在 Blade 範本中使用 @vite 指令：

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

第三步：設定vite.config.js

確保 vite.config.js 設定為正確處理 @vite 導入。預設情況下，它應該看起來像這樣：

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

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

第四步：運行Vite

使用 Vite 編譯您的資產：

對於開發：執行 npm run dev
對於生產：執行 npm run build

第 5 步：在 Blade 模板中載入 JavaScript

要在範本中包含 JavaScript 文件，請使用 @vite 指令：

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

概括

將 JavaScript 檔案儲存在resources/js 中。
在 app.js 中匯入 以進行全域包含或根據需要直接包含在 Blade 範本中。
使用Vite編譯資產。
在 Blade 模板中使用 @vite 載入 JavaScript。

透過此設置，JavaScript 將在 Laravel 11 專案中的站點範圍內可用。

2. 了解刀片渲染順序

當有條件地在特定視圖中包含 JavaScript 時，了解 Blade 模板的渲染順序至關重要。

在 Laravel 中，先處理佈局，然後是各個視圖和部分。渲染流程如下：

先渲染佈局，並為內容注入建立佔位符（@yield 和 @section）。
接下來處理子視圖或部分視圖，並將其內容插入到版面配置佔位符中。

由於這個順序，如果你想根據子視圖內容有條件地在佈局中添加 JavaScript 文件，標準變數檢查將不起作用。您需要使用 Blade 的 @stack 和 @push 指令來更靈活地處理特定於頁面的 JavaScript。

3. 使用 Stack 和 Push 有條件地將 JavaScript 包含在特定視圖中

為了將 JavaScript 新增至特定視圖，Laravel 的 @stack 和 @push 指令提供了一個有效的解決方案，可讓您有條件地在佈局中包含腳本。

第 1 步：在佈局中定義堆疊

在您的版面配置中，為頁面特定的腳本建立一個堆疊：

   import './custom.js';

步驟 2：從子視圖推送腳本

在需要 JavaScript 的特定 Blade 檔案中，推送到腳本堆疊：

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

透過此設置，僅在載入特定視圖時才會包含 custom.js。此方法提供了一個與 Laravel 渲染順序配合使用的乾淨解決方案，確保根據需要有條件地包含 JavaScript 檔案。

在哪裡聲明@push？

@push 語句在 Blade 視圖中的放置主要關係到可讀性和執行順序。以下是如何有效使用@push：

在視圖中的放置：雖然您可以將 @push 放置在 Blade 視圖中的任何位置，但最佳實踐是將其放置在文件末尾，通常位於 @section 內容之後。這使得腳本相關的程式碼與主要內容分開，提高了可讀性和可維護性。

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

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

多個 @push 語句的順序：如果同一個堆疊有多個 @push 宣告（例如 @push('scripts')），它們將按照它們在視圖中出現的順序附加。例如：

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

在這種情況下，script1.js 將在 script2.js 之前加載，因為 @push 按照聲明的順序將內容新增到堆疊中。

在部分和組件中使用 @push：@push 也可以在 Blade 部分（例如 @include）或 Blade 組件中使用。這對於將特定於視圖的腳本或樣式直接包含在可重複使用元件中非常有用，從而可以輕鬆管理依賴項。

<!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>

當此部分包含在視圖中時，partial-specific.js 將會被加入到佈局檔案中的腳本堆疊中。

使用@prepend控制順序：如果特定腳本需要在同一堆堆疊中的其他腳本之前加載，您可以使用@prepend而不是@push。 @prepend 將內容放置在堆疊的開頭，從而可以更好地控制載入順序。

   import './custom.js';

這裡，ritical.js 將在 non_ritic.js 之前加載，無論它們在 Blade 檔案中的位置如何。

重點

將 @push 放在視圖的末尾以提高清晰度和可維護性。
順序由視圖中的位置決定，較早的 @push 語句首先載入。
@push 在部分和組件中工作，可以輕鬆包含特定於視圖的依賴項。
對於需要在同一堆堆疊中先載入的腳本使用@prepend。

4.替代方案：在佈局中使用內聯條件語句

如果您需要更好地控制何時包含 JavaScript，Laravel 的條件語句允許直接在佈局中使用基於路由或變數的邏輯。

依路線有條件地包含

您可以直接在版面配置中使用路由檢查來包含基於目前路由的 JavaScript：

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

基於變數有條件包含

要根據變數有條件地載入腳本，您可以在控制器或子視圖中設定一個標誌，然後在佈局中檢查它：

在你的控制器中：

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

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

版面中：

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

這種方法可讓您根據特定變數或路由控制 JavaScript 加載，為自訂頁面設定提供靈活性。

概括

以下是所討論方法的快速概述：

全域包含：將 JavaScript 放入 app.js 中並使用 @vite 將其全域包含。
Stack 和 Push 的條件包含：使用 @stack 和 @push 指令進行靈活、模組化的腳本處理，確保腳本僅載入到所需的檢視中。
佈局中的條件語句：使用基於路由的檢查或控制器變數有條件地直接在佈局中載入 JavaScript。

這些選項可讓您精確控制 JavaScript 加載，使您的 Laravel 11 專案高效且可維護。

以上是如何在 Laravel 中包含 JavaScript 適用於所有場景的逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：為什麼我在使用 PayPal Access 時收到「SSL 憑證問題：無法取得本機頒發者憑證」？下一篇：為什麼我在使用 PayPal Access 時收到「SSL 憑證問題：無法取得本機頒發者憑證」？

看更多