0

私は最初の 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 definedjqueryがロードされていないかのようになりました。

理由がわかりません。

[注] 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>
4

3 に答える 3