Установка через yarn

Muuri — это современная библиотека для организации сеточных и динамических макетов с поддержкой drag-and-drop, анимаций и фильтрации. Для работы с Muuri в проекте на JavaScript чаще всего используют пакетный менеджер Yarn, который обеспечивает простую установку и управление зависимостями.

Инициализация проекта

Перед установкой Muuri необходимо убедиться, что проект инициализирован как Node.js проект. Если package.json ещё нет, выполняется команда:

yarn init -y

Параметр -y создаёт файл package.json с настройками по умолчанию, что позволяет сразу переходить к установке зависимостей.

Установка Muuri

Для установки последней версии Muuri используется команда:

yarn add muuri

Эта команда скачивает библиотеку и добавляет её в раздел dependencies вашего package.json. После установки можно проверить, что пакет присутствует, командой:

yarn list muuri

Вывод покажет текущую версию библиотеки и путь к её размещению в node_modules.

Использование с модульной системой

Muuri поддерживает работу с современными сборщиками модулей, такими как Webpack, Parcel, Vite, а также с нативными ES-модулями. После установки подключение выглядит следующим образом:

import Muuri from 'muuri';

// Создание сетки с элементами контейнера
const grid = new Muuri('.grid', {
  layout: {
    rounding: false
  }
});

Ключевые моменты при работе с импортом:

  • Импорт по умолчанию import Muuri from 'muuri' является стандартным способом для большинства сборщиков.
  • Для использования через CommonJS можно применять const Muuri = require('muuri');.

Настройка локального окружения

Для корректной работы Muuri необходимо, чтобы HTML-разметка содержала контейнер и элементы, на которых будет строиться сетка. Например:

<div class="grid">
  <div class="item"><div class="item-content">Элемент 1</div></div>
  <div class="item"><div class="item-content">Элемент 2</div></div>
  <div class="item"><div class="item-content">Элемент 3</div></div>
</div>

Muuri автоматически считывает элементы с классом .item и управляет их позиционированием и анимацией.

Управление зависимостями и обновления

После установки Muuri через Yarn поддерживать библиотеку в актуальном состоянии можно командой:

yarn upgrade muuri

Она обновляет пакет до последней версии с учётом правил семантического версионирования, указанных в package.json. Чтобы зафиксировать определённую версию, используется синтаксис:

yarn add muuri@0.10.8

Интеграция с CSS

Muuri не поставляется с визуальными стилями по умолчанию, поэтому необходимо подключить CSS для сетки и элементов. Простейший вариант через CSS:

.grid {
  position: relative;
}

.item {
  position: absolute;
  width: 200px;
  height: 200px;
}

.item-content {
  background-color: #ccc;
  width: 100%;
  height: 100%;
}

CSS обеспечивает корректное отображение сетки, а Muuri управляет позиционированием и анимацией через JavaScript.

Итоговые шаги установки через Yarn

  1. Инициализация проекта (yarn init -y).
  2. Установка Muuri (yarn add muuri).
  3. Подключение библиотеки в проекте через import или require.
  4. Подготовка HTML-контейнера и элементов.
  5. Настройка CSS для визуальной структуры.
  6. Управление обновлениями через yarn upgrade.

Такой подход обеспечивает полное подключение Muuri в проект и готовность к дальнейшей работе с динамическими сетками, drag-and-drop и фильтрацией элементов.

Оглавление