使用 webpack Laravel 5.4 加载物化时的 jQuery 错误

Question

我想在 Laravel 5.4（用 webpack 编译）上使用http://materializecss.com/ 。

window.$ = window.jQuery = require('jquery');

require('materialize-css');
// or
// require('materialize-css/dist/js/materialize.js');
// but same issue

$(document).ready(function(){
    $('.materialboxed').materialbox();
    $('.modal').modal();
    $('.parallax').parallax();
});

这是我的代码，但错误是：

未捕获的类型错误：$(...).materialbox 不是函数

它适用于：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="{{ asset('js/materialize.min.js') }}"></script>
<script>
   $(document).ready(function(){
      $('.materialboxed').materialbox();
      $('.modal').modal();
      $('.parallax').parallax();
   });
</script>

但是如果我在 app.js 中jquery document ready ，它就不起作用：

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script src="{{ asset('js/materialize.min.js') }}"></script>
 <script src="{{ mix('js/app.js') }}"></script>

应用程序.js：

$(document).ready(function(){
    $('.materialboxed').materialbox();
    $('.modal').modal();
    $('.parallax').parallax();
});

Answer 1

我在Laravel 5.4中也遇到了materialize-css的问题，我的快速解决方案是手动将materializecss源下载到/ resources / assets /。 这是我的目录现在的样子

/resources
----/js
-------app.js
-------bootstrap.js
----/materialize
-------/css
-------/fonts
-------/js

然后，在我的bootstrap.js ，添加了以下代码

require('../materialize/js/materialize.js');

这解决了我的问题。

Answer 2

在刀片中包含javascript的方式（在laravel中）是：

<script src="{{ asset('assets\bower\jquery\dist\jquery.min.js') }}"></script>
<script src="{{ asset('assets\bower\materialize\dist\js\materialize.min.js') }}"></script>

您的资产（js和CSS）必须位于/public下的某个位置

我建议您在资产管理中使用Bower，但这不是必需的。