Laravel，将javascript导入刀片模板的正确方法答案

【问题标题】：Laravel, right way to import javascript into Blade TemplatesLaravel，将javascript导入刀片模板的正确方法
【发布时间】：2019-01-06 14:11:23
【问题描述】：

我正在使用 Laravel 5.6。 This page 对我不起作用。

pizza/index.blade.php 看起来像这样：

@extends('layouts.app')


@section('content')
    <!-- Styles -->
    <link href="{{ asset('css/pizza.css') }}" rel="stylesheet">
    <!-- Scripts -->
    <script src="{{ asset('js/components/pizza.js')}}"></script>
    <div class="container">
        <div class="row justify-content-center">
            <div class="card">
                <div class="card-header">Pizza</div>
                <div class="card-body">
                    <form action="/pizzas" method="post">
                        @if ($errors->any())
                            <div class="alert alert-danger" role="alert">
                                Please fix the following errors
                            </div>
                        @endif
                        @include('pizza.table')
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

披萨/table.blade.php：

<div class="pizza-selection">
    <b>Thanks god its pizza day! Select your pizza of the day!</b>
    <table id="pizzas" class="md-box">
        <tr>
            ...
        </tr>
        @foreach ($pizzas as $pizza)
            ...
        @endforeach
        <tr>
            ...
            <input type="button" class="md-box btn btn-default" 
             id="add_new_pizza" onClick="addPizza()" value="Add Pizza!">
            </td>
        </tr>
    </table>
    ...

单击“add_new_pizza”按钮时出现参考错误，onClick="addPizza()"，未定义 addPizza()。但是，我尝试在 index.blade.php 中导入 Pizza.js

<script src="{{ asset('js/components/pizza.js')}}"></script>

打印出asset('js/components/pizza.js') 返回http://localhost:8080/js/components/pizza.js，这对我来说是正确的。

public/js/components/pizza.js 如下所示：

import PizzaService from '../services/PizzaService.js';

async function addPizza(){
    // some functionality
}

当我在 .blade.php 的脚本中添加函数 addPizza() 时，它也可以工作。

此外，如果您需要任何进一步的代码审查，请在 GitHub 上查找存储库： https://github.com/andrelandgraf/laravel-docker

编辑：当我在 <script><script> 中复制 Pizza.js 时，它工作正常，但我收到 SyntaxError：import declarations may only appear at top level of a module。当我通过 src 导入脚本时，此 SyntaxError 消失，就像您在我的代码示例中看到的那样。对我来说，这表明脚本根本没有加载。

EDIT2 和解决方案：我使用了@kerbholz 解决方案。我在app.blade.php 中的body 底部和index.blade.php 的@section('content') 中添加了@stack('scripts') 我知道@push('stack') pizza.js 文件。

我现在更进一步，但我仍然收到 EDIT 中所述的 SyntaxError。是否有解决方法，或者我只需要删除PizzaService.js 的导入并为此文件添加<scipt>-Tag？

EDIT3：好的，这个问题不相关。浏览器似乎还不支持 ES6 模块。

【问题讨论】：

@section 块之外的任何内容都不会被渲染。
@kerbholz 非常感谢，我不知道。我刚开始使用laravel。我编辑了我的问题以解决此问题，但我仍然收到相同的错误消息。

标签： javascript php laravel laravel-blade

【解决方案1】：

对于特定页面上的自定义脚本，

将@yield('footer-scripts') 添加到layouts/app.blade.php
在views文件夹中创建一个名为'scripts'的文件夹

在views/scripts文件夹内创建一个文件'pizza-script.blade.php'并在里面添加js文件内容

<script src="/path/to/pizza.js" />   <!-- it might not work if path isn't clear -->

<script type="text/javascript">
    console.log('executing js here..')
   js file contents....

  #if jquery needed add it like, 

  $(document).ready(function(){
    ...
  }
</script>

在您的 index.blade.php（或您希望脚本执行的页面）最后在 @endsection 之后添加脚本
```
  @section('footer-scripts')
      @include('scripts.pizza-script')
  @endsection
```

现在刷新页面，可以在控制台看到'executing js here..'。

【讨论】：

【解决方案2】：

尝试将 Pizza.js 移到 index.blade.php

的底部

    @section('extra-script')

    {{Html::script('js/components/pizza.js')}}

    @endsection

希望对你有帮助。

【讨论】：

感谢您的回复！我以前见过 Html:: 但它在 Blade.php 模板中不可用。您从哪里获得 Html 类？
您的 config/app.php 应该在 providers 数组 'providers' => [ Collective\Html\HtmlServiceProvider::class, ] 中包含以下代码，别名应该包含 'aliases' => [ 'Form' => Collective\Html\FormFacade::class, 'HTML' => Collective\Html\HtmlFacade::class, ] 您还可以添加：如果 html 不起作用。
我看到 Laravel Collective 是另一个我没有安装的 package。
我现在在您的解决方案中使用了asset()，我仍然收到同样的错误...
当然可以，但它们并没有真正帮助：网络控制台说：ReferenceError: addPizza is not defined. onClick localhost:8080/pizzas:1:1

【解决方案3】：

@section 块之外的任何内容都不会被渲染。

您可以编辑您的layouts/app.blade.php 并添加一个@stack('head')，以便您的样式/javascript 出现（最好在您的HTML 的<head> 部分）。

然后在@extends('layouts.app') 可以使用的任何刀片文件中

@push('head')
<!-- Styles -->
<link href="{{ asset('css/pizza.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/components/pizza.js')}}"></script>
@endpush

将内容推送到该堆栈中。

欲了解更多信息，请访问https://laravel.com/docs/5.6/blade#stacks

【讨论】：

感谢您的回复。我编辑了我的问题并将两个脚本放在 @section 中，但我仍然收到相同的错误。当我尝试您的解决方案时，它会禁用我的 css，并且我收到与之前关于 addPizza 函数相同的错误。我还尝试在 app.blade.php 头中添加 @stack('scripts') 并推送到脚本...
我通常在头部有一个@stack('head')，在app.blade.php 的末尾有一个@stack('scripts')。我这样做的方法是在我的app.js 中创建一个文件resources/assets/js/_pizza.js 然后require('./pizza');。（当然在我的app.blade.php 中加载app.js）
感谢您的支持@kerbholz。它现在为我工作。 push('scripts') 为我工作！
@Andre require 在纯 JS 中不可用，对。我想那是来自webpack/mix。
War mir ein Vergnügen ;)