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

Dexie.js распространяется как npm-пакет и может быть установлен в большинстве современных JavaScript-проектов, использующих систему модулей и сборку.

Базовая установка через npm выполняется следующим образом:

npm install dexie

При использовании yarn:

yarn add dexie

При использовании pnpm:

pnpm add dexie

После установки пакет попадает в node_modules и становится доступным для импортирования в коде приложения через ES Modules или CommonJS в зависимости от конфигурации сборщика.

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

Современные сборщики (Vite, Webpack, Rollup, esbuild) поддерживают стандарт ES Modules, что является основным способом работы с библиотекой.

Импорт выполняется напрямую из пакета:

import Dexie from 'dexie';

После импорта создаётся экземпляр базы данных:

const db = new Dexie('MyDatabase');

На этом этапе формируется логическое имя базы, которое будет использоваться в IndexedDB-хранилище браузера.

Подключение в браузере без сборщика

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

Подключение через <script>:

<script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>

После загрузки скрипта глобальный объект становится доступным через Dexie:

const db = new Dexie('MyDatabase');

Такой способ характерен для небольших проектов, прототипов и учебных примеров, где отсутствует модульная система.

Использование в CommonJS окружении

В проектах, использующих Node.js и CommonJS-модули, подключение осуществляется через require:

const Dexie = require('dexie');
const db = new Dexie('MyDatabase');

Несмотря на поддержку CommonJS, современная экосистема постепенно смещается в сторону ES Modules, где интеграция более предсказуемая и оптимизированная.

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

Dexie предоставляет встроенную поддержку TypeScript-типов, что позволяет описывать структуру базы данных с высокой степенью строгости.

Импорт в TypeScript:

import Dexie, { Table } from 'dexie';

Далее определяется класс базы данных:

class MyDatabase extends Dexie {
  users!: Table<{ id: number; name: string }, number>;

  constructor() {
    super('MyDatabase');
  }
}

TypeScript-типы позволяют заранее фиксировать структуру таблиц и снижать количество ошибок при работе с данными.

Инициализация экземпляра базы данных

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

import Dexie from 'dexie';

const db = new Dexie('AppDatabase');

Имя базы данных передаётся строкой и сохраняется в браузере как идентификатор хранилища.

Определение схемы после подключения

Подключение библиотеки не завершает настройку — следующим шагом задаётся схема базы данных через version и stores.

db.version(1).stores({
  users: '++id, name, email',
  orders: '++id, userId, total'
});

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

Проверка готовности базы

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

await db.open();

Открытие выполняется асинхронно и инициирует создание структуры IndexedDB, если она ещё не существует.

Подключение в Vite-проектах

В среде Vite Dexie интегрируется без дополнительной конфигурации:

import Dexie from 'dexie';

export const db = new Dexie('ViteDatabase');

db.version(1).stores({
  cache: 'key, value'
});

Vite автоматически оптимизирует импорт и исключает лишние части библиотеки из финального бандла.

Подключение в Webpack-проектах

В Webpack-проектах подключение аналогично ES Modules, однако важную роль играет корректная настройка транспиляции:

import Dexie from 'dexie';

const db = new Dexie('WebpackDatabase');

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

Подключение как глобальной зависимости

В некоторых архитектурах Dexie подключается как глобальный объект, особенно при микрофронтенд-подходах:

window.db = new Dexie('GlobalDatabase');

Такой подход упрощает доступ к базе из разных частей приложения, но снижает модульную изоляцию и усложняет тестирование.

Структура подключения в реальных приложениях

Типичная схема интеграции включает три шага:

  1. Импорт или подключение библиотеки
  2. Создание экземпляра базы данных
  3. Определение версии и схемы хранилища
import Dexie from 'dexie';

const db = new Dexie('ProductionDB');

db.version(1).stores({
  logs: '++id, timestamp, level'
});

await db.open();

После выполнения этих шагов база становится доступной для операций чтения и записи через IndexedDB API, инкапсулированный библиотекой.

Оглавление