[英]Laravel 5.4 Script loading issue
I'm working on my first Laravel project (5.4), actually I don't understand why my js script doesn't work like I expected.我正在做我的第一个 Laravel 项目(5.4),实际上我不明白为什么我的 js 脚本不能像我预期的那样工作。 I use Mix and Blade :
我使用 Mix 和 Blade :
// webpack.mix.js
let { mix } = require('laravel-mix').mix;
// copy fonts and patterns
mix .copy('resources/assets/vendor/bootstrap/fonts', 'public/fonts')
.copy('resources/assets/vendor/font-awesome/fonts', 'public/fonts')
.copy('resources/assets/patterns', 'public/css/patterns')
// compile scss and concatenate css files
.sass('resources/assets/sass/app.scss', 'public/css')
.styles([
'resources/assets/vendor/bootstrap/css/bootstrap.css',
'resources/assets/vendor/animate/animate.css'
// ...
], 'public/css/vendor.css')
// concatenate js files
.js([
'resources/assets/vendor/jquery/jquery-3.1.1.min.js',
'resources/assets/vendor/bootstrap/js/bootstrap.js',
'resources/assets/js/app.js'
// ...
], 'public/js/app.js')
.options({ processCssUrls: false }); // fix for path issue : https://github.com/almasaeed2010/AdminLTE/issues/1360
After npm run dev
compliation looks good : npm run dev
编译后看起来不错:
DONE Compiled successfully in 6497ms 4:20:57 PM
Asset Size Chunks Chunk Names
fonts/glyphicons-halflings-regular.ttf 45.4 kB [emitted]
/js/app.js 1.2 MB 0 [emitted] [big] /js/app
mix-manifest.json 66 bytes [emitted]
fonts/glyphicons-halflings-regular.eot 20.1 kB [emitted]
fonts/glyphicons-halflings-regular.woff2 18 kB [emitted]
fonts/glyphicons-halflings-regular.svg 109 kB [emitted]
fonts/glyphicons-halflings-regular.woff 23.4 kB [emitted]
/css/app.css 178 kB 0 [emitted] /js/app
fonts/fontawesome-webfont.ttf 166 kB [emitted]
fonts/fontawesome-webfont.svg 444 kB [emitted] [big]
fonts/fontawesome-webfont.eot 166 kB [emitted]
fonts/fontawesome-webfont.woff 98 kB [emitted]
fonts/fontawesome-webfont.woff2 77.2 kB [emitted]
fonts/FontAwesome.otf 135 kB [emitted]
css/patterns/header-profile.png 5.88 kB [emitted]
CSS works fine, bootstrap.js also works and when I check inside /js/app.js
it seems like everything is inside. CSS 工作正常,bootstrap.js 也可以工作,当我检查
/js/app.js
,似乎一切都在里面。
An here is my tempate :这是我的模板:
{{-- app.blade.php--}}
<!DOCTYPE html>
<html lang="{{ config('app.locale', 'en') }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
<link rel="stylesheet" href="{!! asset('css/vendor.css') !!}" />
<link rel="stylesheet" href="{!! asset('css/app.css') !!}" />
</head>
<body>
<!-- Main view -->
@yield('content')
<script src="{!! asset('js/app.js') !!}" type="text/javascript"></script>
@section('scripts')
@show
</body>
</html>
My troubles began when I want to add a script inside the script section from a child.当我想在孩子的脚本部分中添加脚本时,我的麻烦就开始了。
@extends('layouts.app')
@section('scripts')
<script type="text/javascript">
$(document).ready(function () {
alert('test');
});
</script>
@endsection
I got Uncaught ReferenceError: $ is not defined
like if jquery wasn't loaded.我得到了
Uncaught ReferenceError: $ is not defined
就像没有加载 jquery 一样。
I have no clue why, any idea ?我不知道为什么,知道吗?
[note] [笔记]
It works if I replace inside app.blade.php :如果我在app.blade.php 中替换它,它会起作用:
<script src="{!! asset('js/app.js') !!}" type="text/javascript"></script>
with :和 :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I finally figure who was guilty : Mix (or the way I used Mix)我终于弄清楚谁有罪:Mix(或我使用 Mix 的方式)
I wrongly believed that mix.js
and mix.scripts
was the same function.我错误地认为
mix.js
和mix.scripts
是同一个函数。 But mix.scripts
only combine and minify files while mix.js
also do compiling ECMAScript 2015 and module bundling.但是
mix.scripts
只合并和缩小文件,而mix.js
也编译 ECMAScript 2015 和模块捆绑。 I don't really know why but it was a problem in my case.我真的不知道为什么,但这对我来说是个问题。
mix.js(['public/js/admin.js',
'public/js/dashboard.js'], 'public/js');
replaced by :取而代之 :
mix.scripts(['public/js/admin.js',
'public/js/dashboard.js'], 'public/js/all.js');
See more : Laravel doc查看更多: Laravel 文档
I had a similar issue, and the problem was that at the moment I was using jQuery for the first time, the app.js
file generated by webpack wasn't loaded yet.我遇到了类似的问题,问题是我第一次使用jQuery的时候,webpack生成的
app.js
文件还没有加载。
You can do a simple test to see if you have the same issue.你可以做一个简单的测试,看看你是否有同样的问题。 In your first chunk of code where you use jQuery (the line of code that throws you the $ error), wrap that code in this:
在您使用 jQuery 的第一段代码(抛出 $ 错误的代码行)中,将该代码包装为:
document.addEventListener("DOMContentLoaded", function(event) {
// Your jQuery code
});
One workaround is to load app.js
earlier in your blade main layout file, but I am sure it can be done in a better way.一种解决方法是在您的刀片主布局文件中更早地加载
app.js
,但我相信它可以以更好的方式完成。 I am fairly new to Laravel, so I am still figuring out these kinds of things...我对 Laravel 相当陌生,所以我仍在弄清楚这些事情......
Edit:编辑:
Ok, I think I understood now how to do it properly:好的,我想我现在明白如何正确地做到这一点:
app.blade.php
), at the bottom right before the </body>
tag, load your webpack script, all other external scripts you might load, and finally add a yield scripts section.app.blade.php
)中,在</body>
标签前的右下角,加载你的 webpack 脚本,你可能加载的所有其他外部脚本,最后添加一个 yield 脚本部分。 Example:例子:
<script src="/js/app.js"></script>
<script src="other/scripts/that/you/need.js"></script>
@yield('scripts')
Example:例子:
@section('content')
//Your view code
@endsection
@section('scripts')
//Your jQuery code
@endsection
That way, your jQuery code is loaded after the main layout has already loaded the webpack javascript file (which loads jQuery).这样,您的 jQuery 代码在主布局已经加载 webpack javascript 文件(加载 jQuery)之后加载。
Simply include js file as shown below in your blade files as in my case I'm including add-section.js which is placed inside public/js只需在您的刀片文件中包含如下所示的 js 文件,就我而言,我将包含放置在 public/js 中的 add-section.js
<script src="{{ asset('/js/add-section.js') }}"></script>
@yield('scripts')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.