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

Для использования Toastify в проектах на JavaScript самым удобным способом является установка через менеджер пакетов npm. Библиотека публикуется в официальном реестре npm и поддерживается актуальными версиями Node.js.

Команда установки

Для добавления Toastify в проект необходимо выполнить следующую команду в терминале в корне проекта:

npm install toastify-js

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

import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";
  • import Toastify from 'toastify-js'; — подключение функционала Toastify.
  • import "toastify-js/src/toastify.css"; — подключение стандартных стилей для корректного отображения уведомлений.

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

Для проверки успешной установки можно вывести версию библиотеки в консоль:

npm list toastify-js

Это покажет точную версию, установленную в проекте, и позволит убедиться, что пакет корректно интегрирован.

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

Если проект использует Yarn, установка Toastify выполняется аналогично, но с использованием команды yarn add.

Команда установки

yarn add toastify-js

После установки структура подключения и импорта идентична npm:

import Toastify from 'toastify-js';
import "toastify-js/src/toastify.css";

Yarn также обновляет файл package.json, добавляя зависимость в секцию dependencies, что обеспечивает консистентность проекта при последующих установках на других машинах.

Отличия между npm и Yarn

  • Скорость установки: Yarn обычно быстрее за счёт параллельной загрузки пакетов и локального кэша.
  • Файл блокировки: npm создаёт package-lock.json, Yarn — yarn.lock. Оба файла фиксируют версии зависимостей, что важно для стабильной работы проекта.
  • Совместимость: Все команды Toastify работают одинаково независимо от менеджера пакетов.

Подключение к проекту без сборщика модулей

Если проект не использует Webpack, Vite или другие сборщики, библиотеку можно подключить напрямую через CDN. После установки через npm или Yarn это не требуется, но для простых страниц возможно использование следующего варианта:

После этого Toastify будет доступен через глобальный объект Toastify:

Toastify({
  text: "Пример уведомления",
  duration: 3000
}).showToast();

Управление версиями при установке

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

npm install toastify-js@1.14.0
yarn add toastify-js@1.14.0
  • Символ @ позволяет зафиксировать версию.
  • Фиксация версии важна для крупных проектов, где стабильность уведомлений критична.

Настройка проекта для TypeScript

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

npm install --save-dev @types/toastify-js

или через Yarn:

yarn add -D @types/toastify-js

Это позволяет получить автодополнение и проверку типов при работе с Toastify в IDE.

Оглавление