Laravel 5.5 ReferenceError：$ 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46939027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel 5.5 ReferenceError: $ is not defined
提问by Jethro Hazelhurst
For some reason my jQuery refuses to load. I am getting an error:
出于某种原因，我的 jQuery 拒绝加载。我收到一个错误：
ReferenceError: $ is not defined
参考错误：$ 未定义
My template is in views/layouts/editor.blade.phpand I am loading jQuery in the head of my template like this
我的模板在views/layouts/editor.blade.php，我正在像这样在模板的头部加载 jQuery
<script src="{{ asset('js/jquery.min.js') }}"></script>
I can see that jQuery is loaded in my console. but still I get the error.
我可以看到 jQuery 已加载到我的控制台中。但我仍然收到错误消息。
I am compiling my javascript using laravel mix and my webpack.mix.js file looks like this:
我正在使用 laravel mix 编译我的 javascript，我的 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');
Why is this happening?
为什么会这样？
EDIT:
编辑：
My template file looks like this:
我的模板文件如下所示：
<!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>
If I look in my console I see the following
如果我查看我的控制台，我会看到以下内容
If I open the jquery.min.js file in a new tab I see the following:
如果我在新选项卡中打开 jquery.min.js 文件，我会看到以下内容：
So it's jquery underneath all that webpack boilerplate stuff.
所以它是所有 webpack 样板文件下面的 jquery。
I have also run npm run productionwhich removes all that webpack stuff and leaves the raw jquery.
我还运行了npm run production它删除了所有 webpack 内容并保留了原始 jquery。
回答by Jason
Try this. In your view file create a section under content section
尝试这个。在您的视图文件中，在内容部分下创建一个部分
@section('scripts')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script>
$(function(){
alert();
});
</script>
<script src="{{ asset('js/app.js') }}"></script>
@endsection
Then @yield('scripts') just under the @yield('content') in your template file. So its looks like
然后@yield('scripts') 就在模板文件中的@yield('content') 之下。所以它看起来像
<body>
@yield('content')
<!-- Scripts -->
@yield('scripts')
</body>
回答by Sóstenes DIas
Use mix.combine() instead mix.js() :
使用 mix.combine() 代替 mix.js() ：
mix.combine([
'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap/dist/js/bootstrap.min.js'
],'public/js/outputFile.js');
回答by Jethro Hazelhurst
The problem is that I was compiling my jquery from the node_modules/jquery/dist folder instead of the /src folder.
问题是我从 node_modules/jquery/dist 文件夹而不是 /src 文件夹编译我的 jquery。
