Работа с модульными системами

Библиотека iziToast поддерживает использование в современных модульных системах JavaScript, таких как ES Modules (ESM) и CommonJS, что делает её удобной для интеграции в проекты с использованием сборщиков вроде Webpack, Rollup или Parcel.

ES Modules

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

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

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

iziToast.show({
    title: 'Информация',
    message: 'Это уведомление создано с использованием ES Modules',
    position: 'topRight'
});

Важно: стили должны быть импортированы отдельно, иначе уведомления будут отображаться без оформления.

CommonJS

В проектах с CommonJS используется require:

const iziToast = require('izitoast');
require('izitoast/dist/css/iziToast.min.css');

Методы работы идентичны ESM, что обеспечивает совместимость кода при переходе между системами модулей.

iziToast.success({
    title: 'Успех',
    message: 'Уведомление через CommonJS',
    timeout: 3000
});

Настройка путей при использовании сборщиков

Если сборщик не находит модуль, следует проверить package.json библиотеки:

  • main — путь к CommonJS-версии
  • module — путь к ESM-версии

Для Webpack или Rollup достаточно указать:

resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx']
}

Если используется TypeScript, можно добавить типы:

import iziToast from 'izitoast';
declare module 'izitoast';

Динамический импорт

Поддерживается динамический импорт, что полезно для ленивой загрузки:

async function loadToast() {
    const { default: iziToast } = await import('izitoast');
    await import('izitoast/dist/css/iziToast.min.css');

    iziToast.info({
        title: 'Динамический импорт',
        message: 'Уведомление загружено по требованию'
    });
}

loadToast();

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

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

  • React / Vue / Svelte: iziToast можно использовать внутри методов жизненного цикла компонентов или хуков (useEffect в React, onMounted во Vue).
  • Angular: можно обернуть вызовы iziToast в сервис, чтобы централизовать уведомления.

Пример для React:

import React, { useEffect } from 'react';
import iziToast from 'izitoast';
import 'izitoast/dist/css/iziToast.min.css';

function Notification() {
    useEffect(() => {
        iziToast.show({
            title: 'React компонент',
            message: 'Уведомление внутри useEffect',
            position: 'bottomLeft'
        });
    }, []);

    return null;
}

export default Notification;

Советы по работе с модулями

  • Использовать импорт CSS вместе с JS при модульной сборке, иначе оформление будет отсутствовать.
  • Динамический импорт помогает оптимизировать производительность при больших приложениях.
  • Для TypeScript рекомендуется создавать декларации типов, если они отсутствуют в библиотеке.
  • В проектах с SSR (например, Next.js) необходимо вызывать iziToast только на клиенте, чтобы избежать ошибок рендера на сервере.

Итоговые методы iziToast для модульного использования

  • iziToast.show(options) — базовое уведомление
  • iziToast.success(options) — уведомление об успешной операции
  • iziToast.error(options) — уведомление об ошибке
  • iziToast.warning(options) — предупреждение
  • iziToast.info(options) — информационное уведомление
  • iziToast.destroy() — удаляет все уведомления
  • iziToast.settings(options) — глобальная настройка библиотечных параметров

Использование модульных систем делает интеграцию iziToast в современный фронтенд-проект гибкой и поддерживаемой всеми популярными сборщиками.

Оглавление