在 Laravel 中组织不同页面的脚本文件


organizing script files for different pages in laravel

假设我有两个基于laravel的页面,并且这两个页面都有不同的脚本文件。现在我正在加载index.blade.php中的所有脚本。根据当前的实现,在这两种情况下都加载了所有脚本。如何为不同的页面加载不同的脚本文件,并在html之后加载脚本。

我不熟悉require.js这是@jsxqf在评论中作为替代方案陈述的。

我个人在我的主布局中yields(一个用于js,一个用于css),我正在使用刀片进行处理。在你的views,你也可以这样做。

文件layout/master.blade.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    @yield('css-scripts')
  </head>
  <body>
     @yield('content')
  </body>
  <script src="script.js"></script>
  @yield('js-scripts')
</html>

然后,您的视图将扩展此布局,并将脚本独立地放在相应的部分中,如下所示:

文件myview.blade.php

@extends('layout.master')
@section('content')
    // your content...
@stop
@section('js-scripts')
    // here, you have control over additionally loaded scripts...
    <script src="otherscript.js"></script>
@stop

但看起来require.js可能是这种方法的一个很好的替代方案,直到现在我才意识到。

您可以做的最好的方法是创建一个部分,以便在主布局上使用堆栈放置可选脚本

<html>
<head>
    <!-- At the end of head -->
    @stack('styles')
</head>
<body>
    <!-- At the end of body -->
    @stack('scripts')
   
</body>
</html>

在正常视图中,这将是您的页面,

@extends('layouts.app')
@push('styles')
<link rel="stylesheet" href="{{ asset('css/page1.css')}}">
@endpush
@section('content')
    // page content
@endsection

@push('scripts')
    <script src="{{ asset('js/page1.js')}}"></script>
@endpush

这允许您从其他视图向主布局添加其他可选脚本和样式,从而完全安全地在视图中组织样式/脚本