Laravel，将javascript导入Blade模板的正确方法

I am using Laravel 5.6. This page did not work for me.

pizza/index.blade.php looks like this:

@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

pizza/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>
    ...

当我点击"添加新披萨"按钮，onClick="addPizza()"时，我得到一个参考错误，addPizza()没有定义.

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

打印出assets资源 (‘js/Components/Pizza.js’)返回http://localhost:8080/js/components/pizza.js，这在我看来是正确的.

public/js/components/pizza.js looks like follows:

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

async function addPizza(){
    // some functionality
}

It also worked when I had the function addPizza() inside the script at .blade.php.

Also, find the repository on GitHub if you need any further code reviews: https://github.com/andrelandgraf/laravel-docker

编辑:当我复制披萨时.js inside <script><script>工作正常，但我收到一个SyntaxError:import declarations may only appear at top level of a module.当我通过src导入脚本时，这个语法错误就会消失，就像你在我的代码示例中看到的那样.对我来说，这表明脚本根本没有加载.

EDIT2 & Solution: I used @kerbholz solution. I added @stack('scripts') to the bottom of the body in app.blade.php and inside @section('content') of index.blade.php I know @push('stack') the pizza.js file.

I am now one step further but I still receive the SyntaxError stated in EDIT. Is there a workaround for that or do I just have to remove the import of PizzaService.js and add a <scipt>-Tag for this file as well?

EDIT3:好吧，这个问题没有关系.看起来浏览器还不支持ES6模块.