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

Для работы с библиотекой iziToast в проекте на JavaScript удобнее всего использовать пакетный менеджер Yarn, который позволяет быстро подключить и управлять зависимостями. Библиотека распространяется через npm, поэтому установка через Yarn выполняется стандартной командой:

yarn add izitoast

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

Подключение стилей и скриптов

После установки через Yarn необходимо подключить CSS и JS файлы iziToast в проект. Если используется модульная система (ES6 или CommonJS), подключение выполняется следующим образом:

import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';
  • iziToast — основной объект для создания уведомлений.
  • iziToast.min.css — стили для корректного отображения всплывающих уведомлений.

Если проект использует HTML-файлы без сборщика модулей, можно подключить файлы напрямую из папки node_modules:

<link rel="stylesheet" href="node_modules/izitoast/dist/css/iziToast.min.css">
<script src="node_modules/izitoast/dist/js/iziToast.min.js"></script>

Проверка успешной установки

После подключения библиотеки можно проверить её работу простым тестовым уведомлением:

iziToast.success({
    title: 'Успех',
    message: 'Библиотека iziToast успешно установлена через Yarn!',
    position: 'topRight'
});

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

Управление зависимостью

После установки через Yarn izitoast будет указан в разделе dependencies файла package.json:

"dependencies": {
  "izitoast": "^1.4.0"
}

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

yarn upgrade izitoast

Чтобы удалить библиотеку из проекта:

yarn remove izitoast

Интеграция с сборщиками модулей

При использовании сборщиков, таких как Webpack или Vite, установка через Yarn обеспечивает корректное включение библиотеки в бандл. Важный момент: стили нужно обязательно импортировать через import, иначе уведомления будут работать, но без оформления.

Пример настройки с Vite:

import { createApp } from 'vue';
import App from './App.vue';
import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

const app = createApp(App);
app.config.globalProperties.$toast = iziToast;
app.mount('#app');

После этого уведомления iziToast доступны глобально через this.$toast внутри компонентов Vue.

Дополнительные опции установки

  • Локальная установка — библиотека устанавливается только в конкретный проект (yarn add izitoast).
  • Глобальная установка не применяется, так как iziToast предназначена для использования внутри проекта.
  • Версионирование — можно указать конкретную версию:
yarn add izitoast@1.4.0
  • Совместимость с TypeScript — установка через Yarn добавляет файлы JS и CSS, для типов рекомендуется использовать отдельный пакет @types/izitoast, если требуется автодополнение в редакторе:
yarn add -D @types/izitoast

Настройка проекта для CSS-модулей

Если проект использует CSS-модули или PostCSS, стили iziToast можно импортировать напрямую в нужный компонент, чтобы избежать глобальных стилей:

import 'izitoast/dist/css/iziToast.min.css';

При этом уведомления будут корректно отображаться внутри компонентов, и стили не будут конфликтовать с другими CSS-модулями.

Yarn обеспечивает удобное управление библиотекой, быструю установку и обновление, а также полную интеграцию с современными сборщиками и фреймворками.

Оглавление