Pal*_*diN 5 jquery laravel laravel-mix
我正在使用laravel mix捆绑我的js库和代码。我正在尝试使用ES6样式的导入,并尽可能使用ES6代码。我还需要导入jQuery及其库。
因此,我已经导入了jQuery和bootstrap,如下所示:
import "jquery";
import "bootstrap";
Run Code Online (Sandbox Code Playgroud)
起初,当我导入它们时,我得到了:
Uncaught ReferenceError: jQuery is not defined
at Object../node_modules/bootstrap/js/transition.js (vendor.js?id=74f7f0c463b407c6bdf5:2449)
Run Code Online (Sandbox Code Playgroud)
这是由于引导程序未获取jQuery。
为了解决这个问题,我添加了此配置以将$,jQuery替换为jquery
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
]
};
});
Run Code Online (Sandbox Code Playgroud)
这适用于所有需要jQuery的脚本和库。
现在问题出在我们添加的其他脚本中,而没有使用单个js或使用blade部分来混合。
@section('scripts')
<script type="application/javascript">
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
console.log("Yeah!");
} else {
// jQuery is not loaded
console.log("Doesn't Work");
}
}
$().ready(function () {
console.log('works');
})
</script>
@endsection
Run Code Online (Sandbox Code Playgroud)
控制台错误显示:
datatables:125 Uncaught ReferenceError: $ is not defined
at datatables:125
(anonymous) @ datatables:125
vendor.js?id=2b5ccc814110031408ca:21536 jQuery.Deferred exception: $(...).uniform is not a function TypeError: $(...).uniform is not a function
at HTMLDocument.<anonymous> (http://localhost/assets/admin/app.js?id=da888f45698c53767fca:18419:18)
at mightThrow (http://localhost/assets/admin/vendor.js?id=2b5ccc814110031408ca:21252:29)
at process (http://localhost/assets/admin/vendor.js?id=2b5ccc814110031408ca:21320:12) undefined
jQuery.Deferred.exceptionHook @ vendor.js?id=2b5ccc814110031408ca:21536
process @ vendor.js?id=2b5ccc814110031408ca:21324
setTimeout (async)
(anonymous) @ vendor.js?id=2b5ccc814110031408ca:21358
fire @ vendor.js?id=2b5ccc814110031408ca:20986
fireWith @ vendor.js?id=2b5ccc814110031408ca:21116
fire @ vendor.js?id=2b5ccc814110031408ca:21124
fire @ vendor.js?id=2b5ccc814110031408ca:20986
fireWith @ vendor.js?id=2b5ccc814110031408ca:21116
ready @ vendor.js?id=2b5ccc814110031408ca:21596
completed @ vendor.js?id=2b5ccc814110031408ca:21606
datatables:122 Doesn't Work
vendor.js?id=2b5ccc814110031408ca:21545 Uncaught TypeError: $(...).uniform is not a function
at HTMLDocument.<anonymous> (app.js?id=da888f45698c53767fca:18419)
at mightThrow (vendor.js?id=2b5ccc814110031408ca:21252)
at process (vendor.js?id=2b5ccc814110031408ca:21320)
Run Code Online (Sandbox Code Playgroud)
当我使用laravel mix编译和混合脚本时,问题得到解决,但是当我在刀片中编写相同的脚本或不混合使用而显示了jQuery / $时,未定义错误。
在这种情况下最好的方法是什么?
母版页如下所示:
<body>
@yield('body')
<script src="{{ mix('/assets/admin/manifest.js') }}"></script>
<script src="{{ mix('/assets/admin/vendor.js') }}"></script>
<script src="{{ mix('/assets/admin/app.js') }}"></script>
@section('scripts')
@show
@yield('footer')
</body>
Run Code Online (Sandbox Code Playgroud)
Mah*_*our 11
根据此答案,您需要以jquery这种方式导入
window.$ = window.jQuery = require('jquery');
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
3285 次 |
| 最近记录: |