我有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:
"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"
}
在我的刀片脚注脚本中:
@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
并加载我的页面后,我收到错误:
未捕获的ReferenceError:$未定义
我的alert(jQuery.fn.jquery);
没有被触发
我如何从npm加载jquery所以然后我可以在刀片中的内联html代码中使用它?
在main.js文件中尝试这个
global.$ = global.jQuery = require('jquery');
当我尝试使用它提供的一些默认视图时,我在Laravel 5.7中遇到了这个问题。我试图在一些扩展默认layout/app.blade.php template
的刀片视图模板中使用JavaScript(需要使用jQuery)。
但对我来说问题不是window.$
没有被分配window.jQuery库,因为它被添加到resources/js/bootstrap.js
文件有关。 (这是一个似乎由Laravel Mix预编译到public/js/app.js
的文件。你可以通过查看webpack.mix.js
看到这种情况,在其中,你会发现这个声明:
mix.js('resources/js/app.js', 'public/js')
哪里
resources/js/app.js
需要resources/js/bootstrap.js
。
如果你想自己手动编译这个第一次运行:
npm install
然后npm run dev
在开发模式,或npm run prod
在生产模式。
事实证明问题出在这里:
resources/views/layouts/app.blade.php
有一个带有defer属性的脚本标记实例,如下所示:
<script src="{{ asset('js/app.js') }}" defer></script>
defer
属性引起了所有问题。
所以我把它删除了:
<script src="{{ asset('js/app.js') }}"></script>
并且解决了未定义jQuery的问题。
我更喜欢通过简单地将脚本标签移动到body
HTML标签的末尾来推迟我的JavaScript加载。
在app.blade.php中
<script src="{{ asset('js/app.js') }}" defer></script>
删除defer所以做它
<script src="{{ asset('js/app.js') }}" ></script>
https://github.com/laravel/framework/issues/17634#issuecomment-375473990