jquery - 如何使用 NPM 和 Gulp 安装 Slick Carousel？

Question

除了在 npm website 上的 npm install slick-carousel 之外，我找不到任何关于此的文档.我没有太多以这种方式安装插件的经验，所以如果有人能帮助我，那就太好了。

这是我目前收集到的:

• 我通过 npm 安装 jquery，这样 slick-carousel 就可以运行，我使用 npm install jquery --save 安装它，这样(根据我收集的)它包含在依赖项中在我的 package.json 文件中。
• 然后我以同样的方式安装 slick carousel，使用 npm install slick-carousel --save

然后呢？我见过有人说我也需要 require/import 我的 global.js 和 style.scss 文件中的一些文件，但我可以似乎想知道哪些或如何？我添加的任何内容都不起作用。

谁能给我简要介绍一下，或者指出正确的阅读方向，因为我真的迷路了？

谢谢!

Answer 1

他们正在谈论您可以对文件执行的捆绑过程。如果你是这个概念的新手，你可以想象 Gulp(我知道你正在使用它)可以获取一些文件，修改它们，并将它们编译成更复杂的东西:比如编译你的 scss 或更少的文件css，或者让您使用较新版本的 javascript 并将其转换为与较新的浏览器兼容的代码。感兴趣的可以从这里开始

https://css-tricks.com/gulp-for-beginners/

对于 slick carousel，你可以这样做:

脚本

import $ from 'jquery'
import 'slick-carousel'
    
window.jQuery = window.$ = $; 

样式

在我的 Assets 文件夹中，我从项目目录中的 node_modules 复制 Assets :

slick
|_fonts 
|_ajax-loader.gif 
|_slick.scss / .less
|_slick-theme.scss / .less

这是因为我可以轻松地将它们导入到我的项目中，并根据需要进行自定义

@import 'components/slick/slick';
@import 'components/slick/slick-theme'; // if you need default theme

初始化

$('.carousel-selector').slick({
    //options
});

最后请注意:npm 包 slick-carousel 已过时(1.8.1 版)如果您需要 1.9，您可以在 npm 包 slick-carousel-latest 中找到它。在这种情况下，脚本部分的第一部分变为:

import $ from 'jquery'
import 'slick-carousel-latest'

window.jQuery = window.$ = $; 

希望对你有帮助干杯!