javascript - 使用 webpack Laravel 5.4 加载 Materialize 时出现 jQuery 错误

Question

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

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();
});

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

Uncaught TypeError: $(...).materialbox is not a function

它可以与此一起使用:

<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>

但是，如果我将 jquery 文档准备就绪 放入 app.js 中，它就不起作用:

 <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>

app.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');

这解决了我的问题。