Laravel 5 WebPack JQuery - $ 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51595843/
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 WebPack JQuery - $ is not defined
提问by AnD
I Have webpack.min.js:
我有 webpack.min.js：
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
})
]
};
});
mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
.js('resources/assets/scripts/index.js', 'public/js/app.js')
.copyDirectory('resources/assets/static', 'public/static')
.version()
.sourceMaps();
and package.json:
和 package.json：
"devDependencies": {
"jquery": "^3.3.1",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-datepicker": "^1.7.1",
"browser-sync": "^2.24.6",
"browser-sync-webpack-plugin": "^2.0.1",
"chart.js": "^2.7.2",
"cross-env": "^5.2.0",
"datatables": "^1.10.18",
"easy-pie-chart": "^2.1.7",
"font-awesome": "4.7.0",
"fullcalendar": "^3.9.0",
"jquery-sparkline": "^2.4.0",
"jvectormap": "^2.0.4",
"laravel-mix": "^2.1.11",
"load-google-maps-api": "^1.2.0",
"lodash": "^4.17.10",
"masonry-layout": "^4.2.2",
"perfect-scrollbar": "^1.1.0",
"popper.js": "^1.14.3",
"skycons": "^1.0.0",
"vue": "^2.5.16"
}
and in my blade footer script:
在我的刀片页脚脚本中：
@section('footer')
<script type="text/javascript">
if (typeof jQuery != 'undefined') { alert(jQuery.fn.jquery); }
$(function() {
$('#cc-number').validateCreditCard(function(result) {
$('.log').html('Card type: ' + (result.card_type == null ? '-' : result.card_type.name)
+ '<br>Valid: ' + result.valid
+ '<br>Length valid: ' + result.length_valid
+ '<br>Luhn valid: ' + result.luhn_valid);
});
});
</script>
@endsection
after i run npm run devand load my page, i receive error:
在我运行npm run dev并加载我的页面后，我收到错误：
Uncaught ReferenceError: $ is not defined
未捕获的 ReferenceError: $ 未定义
and my alert(jQuery.fn.jquery);is not triggered
而我alert(jQuery.fn.jquery);的没有被触发
how do i load jquery from npm so then i can use it at inline html code in blade?
我如何从 npm 加载 jquery 以便我可以在刀片中的内联 html 代码中使用它？
回答by Odyssee
Try this in your main.js file
在你的 main.js 文件中试试这个
global.$ = global.jQuery = require('jquery');
回答by Ahmed Aboud
in app.blade.php
在 app.blade.php
<script src="{{ asset('js/app.js') }}" defer></script>
remove defer so make it
删除延迟所以让它
<script src="{{ asset('js/app.js') }}" ></script>
https://github.com/laravel/framework/issues/17634#issuecomment-375473990
https://github.com/laravel/framework/issues/17634#issuecomment-375473990
回答by racl101
I had this issue in Laravel 5.7 when I tried using some of the default views that it provided. I was trying to use JavaScript (which required using jQuery) in some blade view templates that extended the default layout/app.blade.php template.
当我尝试使用它提供的一些默认视图时，我在 Laravel 5.7 中遇到了这个问题。我试图在一些扩展默认layout/app.blade.php template.
But for me the problem was notthe window.$not being assigned the window.jQuery library, because it was being added as far as the resources/js/bootstrap.jsfile was concerned. (This is a file that appears to be precompiled into public/js/app.jsby Laravel Mix. You can see this is the case by looking into webpack.mix.js, within it, you'll find this statement:
但对我来说，问题不在于window.$没有分配 window.jQuery 库，因为就resources/js/bootstrap.js文件而言，它是被添加的。（这是一个似乎public/js/app.js由 Laravel Mix预编译的文件。您可以通过查看 了解情况webpack.mix.js，在其中，您会发现以下语句：
mix.js('resources/js/app.js', 'public/js')
mix.js('resources/js/app.js', 'public/js')
where
在哪里
resources/js/app.jsrequires resources/js/bootstrap.js.
resources/js/app.js需要resources/js/bootstrap.js.
If you wish to manually compile this for yourself first run:
如果您希望自己手动编译它，请首先运行：
npm installthen npm run devwhen in development mode, or npm run prodwhen in production mode.
npm install那么npm run dev当处于开发模式时，或npm run prod处于生产模式时。
but anyways (I've digressed) ....
但无论如何（我离题了）....
It turned out that the issue was here:
原来问题出在这里：
resources/views/layouts/app.blade.php
resources/views/layouts/app.blade.php
There was an instance of script tag with a defer attribute like so:
有一个带有 defer 属性的 script 标签实例，如下所示：
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/app.js') }}" defer></script>
That deferattribute was causing all the problems.
该defer属性导致了所有问题。
So I removed it like so:
所以我像这样删除了它：
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
and the problem of jQuery not being defined was solved.
并且解决了jQuery未定义的问题。
I prefer to defer my JavaScript loading by simply moving the script tags closer to the end of bodyHTML tag anyways.
我更喜欢通过简单地将脚本标签移动到更接近bodyHTML 标签末尾的方式来推迟我的 JavaScript 加载。
回答by Денис Кисель
I use mix.copy instead mix.js for jQuery and it works great!
我使用 mix.copy 代替 mix.js for jQuery 并且效果很好！
example:
例子：
mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/vendor/jquery/jquery.min.js');
