在 laravel 11 中，向项目添加 javascript 变得轻而易举，这要归功于默认的资源捆绑器 vite。以下是如何为各种场景设置 javascript，从全局包含到特定视图中的条件加载。
在许多情况下，您可能希望在 laravel 应用程序中全局包含 javascript。以下是如何组织和捆绑 javascript 以实现普遍包容。
laravel 11 使用 vite 来管理资产。要将其配置为捆绑您的 javascript：
import './custom.js';
@vite('resources/js/custom.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 编译您的资产：
要在模板中包含 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 将在 laravel 11 项目中在整个站点范围内可用。
当有条件地在特定视图中包含 javascript 时，了解 blade 模板的渲染顺序至关重要。
在 laravel 中，首先处理布局，然后是各个视图和部分。渲染过程如下：
由于这个顺序，如果你想根据子视图内容有条件地在布局中添加 javascript 文件，标准变量检查将不起作用。您需要使用 blade 的 @stack 和 @push 指令来更灵活地处理特定于页面的 javascript。
为了将 javascript 添加到特定视图，laravel 的 @stack 和 @push 指令提供了有效的解决方案，允许您有条件地在布局中包含脚本。
在您的布局中，为页面特定的脚本创建一个堆栈：
<!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>
在需要 javascript 的特定 blade 文件中，推送到脚本堆栈：
@extends('layout')
@section('content')
<!-- your page-specific content here -->
@endsection
@push('scripts')
@vite('resources/js/custom.js')
@endpush
通过此设置，仅在加载特定视图时才会包含 custom.js。此方法提供了一个与 laravel 渲染顺序配合使用的干净解决方案，确保根据需要有条件地包含 javascript 文件。
@push 语句在 blade 视图中的放置主要关系到可读性和执行顺序。以下是如何有效使用@push：
@extends('layout')
@section('content')
<!-- main content here -->
@endsection
@push('scripts')
@vite('resources/js/custom.js')
@endpush
@push('scripts')
<script src="script1.js"></script>
@endpush
@push('scripts')
<script src="script2.js"></script>
@endpush
在这种情况下，script1.js 将在 script2.js 之前加载，因为 @push 按照声明的顺序将内容添加到堆栈中。
<!-- partial.blade.php -->
<div>
<!-- partial content -->
</div>
@push('scripts')
@vite('resources/js/partial-specific.js')
@endpush
当此部分包含在视图中时，partial-specific.js 将被添加到布局文件中的脚本堆栈中。
@prepend('scripts')
<script src="critical.js"></script>
@endprepend
@push('scripts')
<script src="non_critical.js"></script>
@endpush
这里，ritical.js 将在 non_ritic.js 之前加载，无论它们在 blade 文件中的位置如何。
如果您需要更好地控制何时包含 javascript，laravel 的条件语句允许直接在布局中使用基于路由或变量的逻辑。
您可以直接在布局中使用路由检查来包含基于当前路由的 javascript：
@if (request()->routeis('some.route.name'))
@vite('resources/js/custom.js')
@endif
要根据变量有条件地加载脚本，您可以在控制器或子视图中设置一个标志，然后在布局中检查它：
return view('your.view', ['loadcustomjs' => true]);
@if (!empty($loadCustomJS))
@vite('resources/js/custom.js')
@endif
这种方法允许您根据特定变量或路由控制 javascript 加载，为自定义页面设置提供灵活性。
以下是所讨论方法的快速概述：
这些选项允许您精确控制 javascript 加载，使您的 laravel 11 项目高效且可维护。
