Laravel混合+光滑輪播

Question

我使用laravel mix（webpack）編譯我的項目。 嘗試添加光滑的輪播插件，但出現錯誤： Uncaught TypeError: $(...).slick is not a function 。 我在webpack.mix.js文件中使用.copy()方法從node_modules目錄復制到公共目錄：

.copy('node_modules/jquery/dist/jquery.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/css')

所有文件都成功出現在正確的公共目錄中，並且這些文件在“源”選項卡（在瀏覽器檢查器中）中可見。

在插入平滑樣式后，然后是jQuery（嘗試了多個版本），然后在html頭中插入了slick.js。 我什至使用了CDN網址。 如果我不使用laravel混音也可以使用浮油，那一切都可以。

它不起作用，我不明白怎么了。 請幫忙！

Answer 1

嘗試更改如下：

.copy('node_modules/jquery/dist/jquery.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.min.js', 'public/assets/js')
.copy('node_modules/slick-carousel/slick/slick.css', 'public/assets/css')
.copy('node_modules/slick-carousel/slick/slick-theme.css', 'public/assets/css')

參考： https : //new.laravel.su/docs/5.4/mix

Answer 2

首先npm install slick-carousel

如果您使用副本，則

mix.copy('node_modules/slick-carousel/slick', 'public/assets/slick');

或者您可以手動復制粘貼

在.html文件中

<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
<script type="text/javascript" src="/assets/slick/slick.min.js"></script>