Laravel,将javascript导入刀片模板的正确方法

我用的是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>
    ...

当我单击“添加新披萨”按钮时,会得到一个引用错误,on click=“add pizza()”,addpizza()未定义。 但是,我尝试在index.blade.php中导入pizza.js。

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

打印资产(“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

编辑:当我在里面复制pizza.js时 <script><script> 它工作正常,但我收到一个语法错误: import declarations may only appear at top level of a module . 当我通过SRC导入脚本时,这种语法错误就不复存在了,就像在我的代码示例中看到的那样。对于我来说,这表示脚本根本没有加载。

edit2&solution:我使用了@kerbholz解决方案。我补充说 @stack('scripts') 到 body 在里面 app.blade.php 里面 @section('content') 属于 index.blade.php 我知道 @push('stack') 这个 pizza.js 文件。

我现在更进一步,但我仍然收到编辑中所述的语法错误。是否有解决方法,或者我只需要删除 PizzaService.js 添加一个 <scipt>-Tag 还有这个文件吗?

伊迪丝3:好吧,这个问题不相关。浏览器似乎还不支持ES6模块。