Как правильно подключать библиотеки в main.js?

Question

[LevSuprem]

Не могу понять почему если я подключаю библиотеки в index.html:

<script src="/assets/libs/jquery/jquery.min.js"></script>
<script src="/assets/libs/slick-carousel/slick.min.js"></script>

<script type="text/javascript">
    $('.designer-slick-slider').slick({
        dots: true,
        infinite: true,
        speed: 1000,
        slidesToShow: 1
    });

    $('.second-scr-slider').slick({
        dots: true,
        infinite: true,
        speed: 1000,
        fade: true,
        cssEase: 'linear',
        arrows: false,
        autoplay: true,
        autoplaySpeed: 6000,
    });
</script>

то все ок и все работает. Но если я делаю тоже самое внутри файла main.js:

import "../../node_modules/slick-carousel/slick/slick.js"
import "../../node_modules/jquery/dist/jquery.js"

window.onload = function() {

    $('.designer-slick-slider').slick({
        dots: true,
        infinite: true,
        speed: 1000,
        slidesToShow: 1
    });

    $('.second-scr-slider').slick({
        dots: true,
        infinite: true,
        speed: 1000,
        fade: true,
        cssEase: 'linear',
        arrows: false,
        autoplay: true,
        autoplaySpeed: 6000,
    });

}

то не работает. В билде в файле main.js - минимизированный код библиотек присутствует, ломаю голову почему не работает должным образом. Как правильно подключать библиотеки из node_modules?

Answer 1

[Dima Polos]

попробуйте просто так:
import $ from 'jquery';
import 'slick-carousel';

Comments

[LevSuprem]

Спасибо. import $ from 'jquery'; пробовал, но slick подключал таким же образом. Что в данном случае означает "$" и почему слик подключается иначе?

[Dima Polos]

LevSuprem, советую вникнуть в тему ES6 import, поищите и почитайте.
Система импорта работает так: в библиотеке пишется экспорт и передается та часть кода, которую хотят сделать доступной, а в другом файле пишется импорт то и то из такой-то библиотеки. Собственно из jquery экспортируется функция, которую мы импортируем и записываем в переменную $.
Слик сделали немного по-другому, видимо он просто подключается целиком и исполняется. Посмотрите документацию - там так и написано, просто import 'slick-carousel';