我有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并加载页面后，我收到错误：
未捕获引用错误：$未定义
并且我的alert(jQuery.fn.jquery);未触发
如何从npm加载jquery，以便在blade中的内联html代码中使用它？
；
<script src="{{ asset('js/app.js') }}" defer></script>
删除延迟，使其成为
<script src="{{ asset('js/app.js') }}" ></script>
https://github.com/laravel/framework/issues/17634#issuecomment-375473990
在你的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标签实例，如下所示：
<script src="{{ asset('js/app.js') }}" defer></script>
defer属性导致了所有的问题。
所以我这样删除了它：
<script src="{{ asset('js/app.js') }}"></script>
解决了jQuery未定义的问题。
无论如何，我更喜欢通过简单地将脚本标记移到bodyHTML标记的末尾来推迟JavaScript加载。
我在jQuery中使用了mix.copy而不是mix.js，效果很好！
示例：
mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/vendor/jquery/jquery.min.js');