Laravel 5.4脚本加载问题 [英] Laravel 5.4 Script loading issue
问题描述
我正在做我的第一个Laravel项目(5.4)，实际上我不明白为什么我的js脚本无法按预期工作.我使用Mix and Blade:
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. I use Mix and 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
在 npm run dev 编译后看起来很不错:
After npm run dev compliation looks good :
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可以很好地工作，bootstrap.js也可以工作，当我检查/js/app.js 内部时，似乎一切都在内部.
CSS works fine, bootstrap.js also works and when I check inside /js/app.js it seems like everything is inside.
这是我的脾气:
{{-- 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
我得到了未捕获的ReferenceError:未定义$ ，就像没有加载jquery一样.
I got Uncaught ReferenceError: $ is not defined like if jquery wasn't loaded.
我不知道为什么，有什么主意吗?
I have no clue why, any idea ?
[note]
如果我在 app.blade.php 中替换:
<script src="{!! asset('js/app.js') !!}" type="text/javascript"></script>
与:
<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>
推荐答案
我终于弄清了谁是有罪的:Mix(或我使用Mix的方式)
I finally figure who was guilty : Mix (or the way I used Mix)
我错误地认为 mix.js 和 mix.scripts 是同一功能.但是 mix.scripts 仅合并和缩小文件，而 mix.js 也可以编译ECMAScript 2015和模块捆绑.我真的不知道为什么，但这对我来说是个问题.
I wrongly believed that mix.js and mix.scripts was the same function. But mix.scripts only combine and minify files while mix.js also do compiling ECMAScript 2015 and module bundling. 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');
替换为:
mix.scripts(['public/js/admin.js',
'public/js/dashboard.js'], 'public/js/all.js');
查看更多信息: Laravel文档
这篇关于Laravel 5.4脚本加载问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
