Laravel 5.4 脚本加载问题答案

【问题标题】：Laravel 5.4 Script loading issueLaravel 5.4 脚本加载问题
【发布时间】：2017-08-24 21:57:02
【问题描述】：

我正在开发我的第一个 Laravel 项目 (5.4)，实际上我不明白为什么我的 js 脚本不能像我预期的那样工作。我使用混合和刀片：

// 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 编译后看起来不错：

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 内部时，似乎一切都在里面。

这里是我的模板：

{{-- 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>

当我想从一个孩子的脚本部分添加一个脚本时，我的麻烦就开始了。

@extends('layouts.app')

@section('scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            alert('test');
        });
    </script>
@endsection

我得到了Uncaught ReferenceError: $ is not defined，就像没有加载 jquery 一样。

我不知道为什么，有什么想法吗？

[注]
如果我在 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>

【问题讨论】：

为了好玩，如果您将$ 替换为jQuery（所以您将拥有jQuery(document).ready(function () {），它是否有效？另外，如果你打开浏览器的开发工具，app.js 是否加载成功？
jQuery 出现同样的错误。据我所知，app.js 已加载，这就是为什么我不明白出了什么问题。

标签： javascript laravel laravel-mix

【解决方案1】：

我终于知道谁有罪了：Mix（或我使用 Mix 的方式）

我错误地认为mix.js 和mix.scripts 是同一个功能。但是mix.scripts 只合并和缩小文件，而mix.js 也编译 ECMAScript 2015 和模块捆绑。我真的不知道为什么，但这对我来说是个问题。

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 doc

【讨论】：

您需要为 mix.scripts 指定目标文件名选项，例如 'public/js/all.js' 仅指定目录会导致 EISDIR：对目录错误的非法操作。跨度>
对不起，我的意思是只有 mix.scripts 一个，mix.js 一个可以作为文件夹

【解决方案2】：

我也遇到过类似的问题，问题是在我第一次使用jQuery的时候，webpack生成的app.js文件还没有加载。

您可以做一个简单的测试，看看您是否有同样的问题。在您使用 jQuery 的第一段代码（引发 $ 错误的代码行）中，将该代码包装在以下代码中：

document.addEventListener("DOMContentLoaded", function(event) { 
 // Your jQuery code
});

一种解决方法是在刀片主布局文件中更早地加载app.js，但我相信它可以以更好的方式完成。我对 Laravel 还很陌生，所以我还在弄清楚这些事情......

编辑：

好的，我想我现在明白了如何正确地做到这一点：

在您的主刀片布局中（在我的情况下为app.blade.php），在</body> 标记之前的右下角，加载您的webpack 脚本，您可能加载的所有其他外部脚本，最后添加一个yield 脚本部分。

例子：

<script src="/js/app.js"></script>
<script src="other/scripts/that/you/need.js"></script>
@yield('scripts')

在需要 jQuery 代码的刀片模板中，您无需直接将其添加到内容部分，而是创建一个名为 scripts 的新部分。

例子：

@section('content')
//Your view code
@endsection

@section('scripts')
//Your jQuery code
@endsection

这样，您的 jQuery 代码在主布局已经加载 webpack javascript 文件（加载 jQuery）之后加载。

【讨论】：

不错的尝试，但它不起作用，document.addEventListener 不能解决问题。你建议的html结构是我目前使用的。
这让我省去了几个小时的挫败感。谢谢老兄。

【解决方案3】：

只需在刀片文件中包含如下所示的 js 文件，在我的例子中，我包含了位于 public/js 中的 add-section.js

<script src="{{ asset('/js/add-section.js') }}"></script>
@yield('scripts')

【讨论】：