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

Для использования iziToast в проекте на JavaScript самым удобным способом является установка через npm. Это позволяет интегрировать библиотеку в сборщики модулей, такие как Webpack, Parcel или Vite, а также управлять зависимостями проекта централизованно.

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

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

npm init -y

Параметр -y автоматически подтверждает все стандартные настройки, создавая базовый файл package.json.

2. Установка iziToast

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

npm install izitoast

Эта команда скачивает библиотеку и добавляет её в раздел dependencies файла package.json. После установки папка node_modules будет содержать все необходимые файлы iziToast.

3. Подключение в проекте

После установки iziToast можно импортировать библиотеку в JavaScript-код:

import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';
  • Первый импорт подключает функционал библиотеки для создания уведомлений.
  • Второй импорт подключает стили iziToast. Без подключения CSS уведомления будут отображаться некорректно.

4. Настройка сборщика

Для корректной работы с сборщиками модулей важно, чтобы CSS и JS были обработаны соответствующими загрузчиками. В Webpack это может выглядеть так:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

Такая конфигурация позволяет импортировать CSS непосредственно в JavaScript, обеспечивая интеграцию iziToast в сборку.

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

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

iziToast.show({
  title: 'Привет!',
  message: 'iziToast успешно установлен через npm',
  position: 'topRight'
});

Если уведомление отображается корректно, установка выполнена успешно.

6. Обновление библиотеки

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

npm update izitoast

После выполнения обновления проверяется совместимость с текущим проектом и корректность отображения уведомлений.

7. Дополнительные возможности npm

Использование iziToast через npm даёт следующие преимущества:

  • Контроль версий – можно зафиксировать определённую версию, указав её в package.json.
  • Совместимость с модульными системами – легко интегрировать с современными фронтенд-фреймворками.
  • Управление зависимостями – все библиотеки проекта централизованно хранятся и обновляются через npm.

8. Фиксация версии

Чтобы использовать конкретную стабильную версию iziToast, команда установки выглядит так:

npm install izitoast@1.4.0

Фиксация версии предотвращает непредвиденные ошибки при обновлении библиотеки в будущем.

9. Удаление библиотеки

Если необходимо удалить iziToast из проекта:

npm uninstall izitoast

После удаления записи из package.json и папки node_modules библиотека полностью удаляется из проекта.

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

Для React, Vue или Angular iziToast можно использовать через npm и импортировать в компоненты, обеспечивая глобальное или локальное уведомление. Например, в React:

import React from 'react';
import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

function App() {
  const notify = () => {
    iziToast.success({
      title: 'Успех',
      message: 'Уведомление через iziToast',
    });
  };

  return (
    <button onCl ick={notify}>Показать уведомление</button>
  );
}

export default App;

Таким образом, установка через npm обеспечивает гибкость, упрощает поддержку проекта и интеграцию с современными инструментами фронтенда.

Оглавление