Laravel Mix + Slick Carousel答案

【问题标题】：Laravel Mix + Slick CarouselLaravel Mix + Slick Carousel
【发布时间】：2017-08-05 10:48:48
【问题描述】：

我使用 laravel mix (webpack) 来编译我的项目。尝试添加 slick carousel 插件但出现错误：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')

所有文件都成功出现在适当的公共目录中，并且这些文件可以在源选项卡中看到（在浏览器检查器中）。

在我插入 slick 样式后，然后是 jquery（尝试了几个版本），然后是 html 头中的 slick.js。我什至使用了cdn url。如果我在没有 laravel mix 的情况下做同样的事情，那么光滑就可以了。

它不起作用，我不明白出了什么问题。请帮忙！

【问题讨论】：

标签： javascript php webpack laravel-mix

【解决方案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

【讨论】：

【解决方案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>

【讨论】：