2017-10-25 2 views
1

어떤 이유로 jQuery가로드를 거부합니다.

ReferenceError: $ is not defined

내 템플릿 views/layouts/editor.blade.php에 있고 내가 jQuery를 내 콘솔에로드 된 것을 볼 수있는이

<script src="{{ asset('js/jquery.min.js') }}"></script> 

처럼 내 템플릿의 머리에 jQuery를로드 오전 : 나는 오류를 얻고있다. 하지만 여전히 오류가 발생합니다.

내가 laravel 믹스 내 webpack.mix.js 파일을 사용하여 내 자바 스크립트를 컴파일하고는 다음과 같습니다

// javascript 
mix.js('resources/assets/js/app.js', 'public/js') 
    .js('node_modules/jquery/dist/jquery.min.js', 'public/js') 
    .autoload({ 
     jquery: ['$', 'window.jQuery', 'jQuery'], 
    }); 
// css 
mix.sass('resources/assets/sass/app.scss', 'public/css') 
    .sass('node_modules/bootstrap/scss/bootstrap.scss', 'public/css'); 

왜 이런 일이?

편집 :

내 템플릿 파일은 다음과 같습니다

<!DOCTYPE html> 
<html lang="{{ app()->getLocale() }}"> 
    <head> 

     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!-- CSRF Token --> 
     <meta name="csrf-token" content="{{ csrf_token() }}"> 
     <title>{{ config('app.name', 'Laravel') }}</title> 
     <!-- Styles --> 
     <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet"> 
     <link href="{{ asset('css/app.css') }}" rel="stylesheet"> 
     <!-- scripts --> 
     <script src="{{ asset('js/jquery.min.js') }}"></script> 

     <script> 
      $(function(){ 
       alert(); 
      }); 
     </script> 

    </head> 
    <body> 


     @yield('content') 

     <!-- Scripts --> 

     <script src="{{ asset('js/app.js') }}"></script> 

    </body> 
</html> 

내 콘솔에서 보면 나는 다음을 참조하십시오

enter image description here

나는 jquery.min를 열면 새 탭에서 .js 파일 다음을 참조하십시오.

enter image description here

그래서 webpack 상용구 아래에 jquery가 있습니다.

나는 또한 모든 webpack 항목을 제거하고 원시 jquery를 남기는 npm run production을 실행했습니다.

+0

시도한'window. $'? – Jonathan

+0

미안합니다. 조나단, 이해가 안갑니다! –

+0

''jQuery가 제 콘솔에로드 된 것을 볼 수 있습니다.하지만 오류가 계속납니다. ''- 브라우저의 디버깅 도구에서 볼 수있는 또 다른 것? 해당 줄에 중단 점을 넣으면 *가 거기에 정의 된 * $입니까? jQuery 라이브러리가 어떤 식 으로든 손상 되었습니까? jQuery *를 사용하려고하면 * 사용하고 있습니까? 다른 제한된 범위에로드 하시겠습니까? 오류는 그것이 무엇인지 ...'$'이 정의되지 않았습니다. 문제를 설명하고 그 예제에서 * 정의해야하는 이유를 설명하기 위해 완벽하지만 최소한의 예를 제공 할 수 있습니까? – David

답변

1

시도해보십시오. 뷰 파일에서 은 템플릿 파일의 @yield ('콘텐츠')에서 콘텐츠 섹션에서 섹션 다음

@section('scripts') 

<script src="{{ asset('js/jquery.min.js') }}"></script> 
<script> 
     $(function(){ 
      alert(); 
     }); 
</script> 
<script src="{{ asset('js/app.js') }}"></script> 

@endsection 

@yield ('스크립트')을 만들 수 있습니다.

<body> 

     @yield('content') 

     <!-- Scripts --> 

     @yield('scripts') 

    </body> 
0

문제와 같은 그래서 그 모습은 내가 node_modules/JQuery와/DIST 폴더 대신/src 폴더에서 내 jQuery를 컴파일하는 것입니다.

관련 문제