搜索

首页  >  文章  >  后端开发  >  如何在 Laravel 中包含 JavaScript 适用于所有场景的分步指南

如何在 Laravel 中包含 JavaScript 适用于所有场景的分步指南

Barbara Streisand
Barbara Streisand原创
2024-11-08 19:56:02326浏览

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 文件

  1. 位置：将JavaScript文件存储在resources/js目录中。例如，如果您的文件名为 custom.js，请将其保存为 resources/js/custom.js。
  2. 组织：对于包含多个JavaScript文件的复杂项目，您可以将它们组织在resources/js的子目录中，例如resources/js/modules/custom.js。

第2步：使用Vite编译JavaScript

Laravel 11 使用 Vite 来管理资产。要将其配置为捆绑您的 JavaScript：

  1. 包含在app.js中：打开resources/js/app.js并导入您的自定义文件： 
   import './custom.js';
  1. 在视图中直接导入：或者，如果您只想在某些视图中使用 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 中，首先处理布局，然后是各个视图和部分。渲染过程如下：

  1. 首先渲染布局，并为内容注入创建占位符（@yield 和 @section）。
  2. 接下来处理子视图或部分视图，并将其内容插入到布局占位符中。

由于这个顺序，如果你想根据子视图内容有条件地在布局中添加 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：

  1. 在视图中的放置：虽然您可以将 @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,
        }),
    ],
});
  1. 多个 @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 按照声明的顺序将内容添加到堆栈中。

  1. 在部分和组件中使用 @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 将被添加到布局文件中的脚本堆栈中。

  1. 使用@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')

基于变量有条件包含

要根据变量有条件地加载脚本，您可以在控制器或子视图中设置一个标志，然后在布局中检查它：

  1. 在你的控制器中： 
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});
  1. 布局中： 
<!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
上一篇：Why am I Getting "SSL certificate problem: unable to get local issuer certificate" When Using PayPal Access?下一篇：Why Does My SOAP Client Fail to Load a WSDL on Some PHP Versions?

相关文章

查看更多