Laravel，将 javascript 导入 Blade 模板的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51592054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel, right way to import javascript into Blade Templates
提问by Andre
I am using Laravel 5.6. This pagedid not work for me.
我正在使用 Laravel 5.6。这个页面对我不起作用。
pizza/index.blade.php looks like this:
披萨/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
pizza/table.blade.php:
披萨/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>
...
I get a reference error when I click on the "add_new_pizza" button, onClick="addPizza()", addPizza() is not defined. However, I try to import pizza.js in index.blade.php
单击“add_new_pizza”按钮时出现参考错误，onClick="addPizza()"，addPizza() 未定义。但是，我尝试在 index.blade.php 中导入pizza.js
<script src="{{ asset('js/components/pizza.js')}}"></script>
printing out asset('js/components/pizza.js') returns http://localhost:8080/js/components/pizza.jswhich looks right to me.
打印出 asset('js/components/pizza.js') 返回http://localhost:8080/js/components/pizza.js这对我来说是正确的。
public/js/components/pizza.js looks like follows:
public/js/components/pizza.js 如下所示：
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.
当我在 .blade.php 的脚本中使用 addPizza() 函数时，它也能工作。
Also, find the repository on GitHub if you need any further code reviews: https://github.com/andrelandgraf/laravel-docker
另外，如果您需要任何进一步的代码，请在 GitHub 上找到存储库：https: //github.com/andrelandgraf/laravel-docker
EDIT: When I copy the pizza.js inside <script><script>it works fine, but I receive a SyntaxError: import declarations may only appear at top level of a module. This SyntaxError dissapears when I import the script via src like you can see in my code examples. For me, this indicates that the script is not loaded at all.
编辑：当我复制里面的pizza.js 时<script><script>它工作正常，但我收到一个 SyntaxError: import declarations may only appear at top level of a module。当我通过 src 导入脚本时，这个 SyntaxError 消失了，就像你在我的代码示例中看到的那样。对我来说，这表明脚本根本没有加载。
EDIT2 & Solution: I used @kerbholz solution. I added @stack('scripts')to the bottom of the bodyin app.blade.phpand inside @section('content')of index.blade.phpI know @push('stack')the pizza.jsfile.
EDIT2 & 解决方案：我使用了@kerbholz 解决方案。我添加@stack('scripts')到的底部body在app.blade.php和里面@section('content')的index.blade.php，我知道@push('stack')的pizza.js文件。
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.jsand add a <scipt>-Tagfor this file as well?
我现在更进了一步，但我仍然收到 EDIT 中所述的 SyntaxError。是否有解决方法，或者我是否只需要删除导入PizzaService.js并<scipt>-Tag为此文件添加一个？
EDIT3: Okay this issue is not related. It looks like ES6 modules are not yet supported by browsers.
EDIT3：好的，这个问题不相关。浏览器似乎还不支持 ES6 模块。
回答by kerbh0lz
Anything outside of your @sectionblock will not be rendered.
@section块之外的任何东西都不会被渲染。
You could edit your layouts/app.blade.phpand add a @stack('head')where you want your styles/javascript to appear (preferably in the <head>section of your HTML).
您可以编辑layouts/app.blade.php并添加@stack('head')您希望样式/javascript 出现的位置（最好在<head>HTML 部分）。
In any blade file that @extends('layouts.app')you can then use
在@extends('layouts.app')您可以使用的任何刀片文件中
@push('head')
<!-- Styles -->
<link href="{{ asset('css/pizza.css') }}" rel="stylesheet">
<!-- Scripts -->
<script src="{{ asset('js/components/pizza.js')}}"></script>
@endpush
to push content into that stack.
将内容推送到该堆栈中。
For more information visit https://laravel.com/docs/5.6/blade#stacks
回答by Zeeshan Tariq
Try to move pizza.js at the bottom of index.blade.php
尝试在 index.blade.php 底部移动pizza.js
@section('extra-script')
{{Html::script('js/components/pizza.js')}}
@endsection
Hope it helps.
希望能帮助到你。
