Установка и подключение

Для начала работы с Unpoly необходимо установить и подключить библиотеку к своему проекту. Существует несколько способов интеграции Unpoly в проект, в зависимости от того, используется ли система сборки или библиотека будет подключена через CDN. В любом случае, интеграция Unpoly достаточно проста и не требует значительных усилий.

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

Если проект использует Node.js и менеджер пакетов NPM, можно установить библиотеку с помощью команды:

npm install unpoly

После успешной установки, Unpoly будет доступен как модуль, который можно импортировать в JavaScript файлы проекта. В случае использования сборщиков типа Webpack, библиотека будет автоматически добавлена в зависимости.

import 'unpoly';

Для использования определённых компонентов библиотеки можно импортировать их по частям, чтобы уменьшить размер итогового бандла:

import 'unpoly/dist/unpoly.min.css';
import {up} from 'unpoly';

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

Если в проекте используется Yarn, команда для установки будет следующей:

yarn add unpoly

После этого также необходимо импортировать библиотеку в соответствующие файлы:

import 'unpoly';

Подключение через CDN

Если в проекте не используется система сборки, можно подключить Unpoly напрямую через CDN. Это подходящий способ для быстрого старта и тестирования. Для этого нужно добавить в HTML файл следующие теги:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/unpoly@3.0.0/dist/unpoly.min.css">
<script src="https://cdn.jsdelivr.net/npm/unpoly@3.0.0/dist/unpoly.min.js"></script>

Подключив эти ресурсы, библиотека будет доступна в глобальной области видимости, и можно сразу начать использовать её функционал.

Подключение через локальные файлы

Если необходимо подключить библиотеку локально, можно скачать нужные файлы с официального репозитория или CDN. Для этого достаточно загрузить файл CSS и JS, а затем подключить их в HTML документе:

<link rel="stylesheet" href="path/to/unpoly.min.css">
<script src="path/to/unpoly.min.js"></script>

Где path/to/ — это путь к скачанным файлам библиотеки на сервере.

Инициализация Unpoly

После подключения Unpoly, библиотека готова к использованию. Важно помнить, что Unpoly взаимодействует с DOM, обновляя страницы без перезагрузки, и поэтому требует корректной инициализации.

Наиболее распространённый способ инициализации — использование глобальной переменной up, которая становится доступной после загрузки библиотеки. Простое использование библиотеки может выглядеть так:

up.on('up:load', function() {
  console.log('Unpoly is ready!');
});

Этот код сработает при каждом обновлении страницы с помощью Unpoly, после того как библиотека завершит свою работу.

Интеграция с другими фреймворками

Unpoly можно интегрировать в проекты, использующие популярные фреймворки, такие как React, Vue или Angular. В этом случае библиотека может быть использована для управления запросами и обновлением частей страницы, сохраняя при этом работу с виртуальными DOM.

Для работы с React, например, можно создать компонент, который будет инициировать действия Unpoly:

import { useEffect } from 'react';
import 'unpoly';

function MyComponent() {
  useEffect(() => {
    up.on('up:load', function() {
      console.log('Page loaded with Unpoly');
    });
  }, []);

  return <div>My Unpoly Component</div>;
}

export default MyComponent;

Подобным образом можно интегрировать Unpoly в Vue и Angular, используя соответствующие жизненные циклы и хуки компонентов.

Дополнительные настройки

Библиотека предоставляет возможность настройки и расширения функционала. Например, можно настроить базовые параметры, такие как задержка переходов, таймауты запросов и прочее, через глобальные параметры библиотеки.

Для настройки задержки переходов между страницами можно использовать следующий код:

up.config({
  delay: 1000 // Задержка в 1 секунду
});

Это обеспечит плавные переходы и уменьшит количество запросов на сервер.

Проверка правильности подключения

После того как библиотека будет установлена и подключена, можно проверить её работоспособность. Для этого достаточно выполнить базовую команду Unpoly, например:

up.history.pushState('/new-page');

Если код не вызовет ошибок в консоли, значит, библиотека подключена правильно и готова к использованию.

Оглавление