#заметка дня

Многие из вас наверняка используют CodePen. Кто-то потому что так требуют в чатах 👀, a кто-то — для развлечения. Тут я напоминаю вам про рубрику #codepen дня 🔥.

Но сегодня попробуем поговорить о том, как использовать в ваших экспериментах npm-пакеты. Ибо не всегда нужная библиотека есть на CDN, а копировать код целиком ну откровенно неудобно.

Давайте возьмём для примера sal.js: https://github.com/mciastek/sal

Что говорит документация? А говорит она нам: установите npm-пакет и импортируйте модуль.

Ну что же, давайте откроем настройки нашего кодпена (шестерёнка) и посмотрим на раздел JS. Там есть поиск по npm.

Как только вы ввели в поле название и выбрали нужный пакет, CodePen вставит в блок JS что-то такое:

import * as salJs from "https://cdn.skypack.dev/sal.js";

Это отличается от того, что в документации:

import sal from 'sal.js’;

И дело тут вовсе не в кавычках. А дело в том, что существуют разные форматы экспорта модулей из пакетов. Я рекомендую обратиться к учебникам: https://learn.javascript.ru/modules или https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/import

Но у нас тут не гвоздями же прибито, давайте просто исправим импорт:

import sal from "https://cdn.skypack.dev/sal.js";

И вот нужная функция импортирована. Остались стили.

Документация рекомендует и их импортировать, но заодно поставляет и собранные, чтобы добавить классическим способом.

Судя по документации, это каталог dist. Ну, давайте попробуем открыть через наш Skypack CDN: https://cdn.skypack.dev/sal.js/dist/sal.css

Надо же, стили нашлись. Опять открываем настройки кодпена и просто добавляем в раздел CSS этот адрес.

И вот готовый результат: https://codepen.io/alinaki/pen/RwVROKN

Если вы уже самостоятельно открыли ссылку на модуль: https://cdn.skypack.dev/sal.js, то могли заметить, что некая инструкция есть и там. Крайне рекомендую ознакомиться.

Например, можно просто найти пакет на самом https://www.skypack.dev/ и нажать на кнопку «Open in CodePen».

А вообще, не бойтесь экспериментировать и внаглую писать то, что ожидаете увидеть. Иногда оно так и работает.

#es6 #modules #javascript #scroll #animation