Laravel 5 WebPack JQuery-未定义$ [英] Laravel 5 WebPack JQuery - $ is not defined
本文介绍了Laravel 5 WebPack JQuery-未定义$的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有webpack.min.js:
I Have 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();
和package.json:
and 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
运行npm run dev
并加载页面后,我收到错误消息:
after i run npm run dev
and load my page, i receive error:
未捕获的ReferenceError:未定义$
Uncaught ReferenceError: $ is not defined
而我的alert(jQuery.fn.jquery);
没有触发
如何从npm加载jquery,以便可以在刀片中的内联html代码中使用它?
how do i load jquery from npm so then i can use it at inline html code in blade?
推荐答案
在main.js文件中尝试
Try this in your main.js file
global.$ = global.jQuery = require('jquery');
这篇关于Laravel 5 WebPack JQuery-未定义$的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文