Загрузка библиотеки

Awesomplete подключается к проекту как лёгкая автономная библиотека без внешних зависимостей, что позволяет использовать её как в простых HTML-страницах, так и в современных сборках на базе модульных систем. Основные способы загрузки зависят от окружения: подключение через CDN, установка через пакетные менеджеры, импорт как ES-модуля или интеграция в сборщики вроде Webpack, Vite и Rollup.

Самый быстрый способ начать работу — использование готовых файлов библиотеки через CDN. В этом случае не требуется установка зависимостей и настройка сборки.

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>

Подключение CSS-файла обязательно, так как он отвечает за базовую визуализацию выпадающего списка автодополнения. Без него библиотека продолжит работать, но интерфейс будет неоформленным.

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

<input id="city">

<script>
  new Awesomplete(document.querySelector("#city"), {
    list: ["London", "Paris", "Berlin"]
  });
</script>

CDN-способ особенно удобен для прототипов, учебных примеров и небольших проектов без сборки.

Подключение локальных файлов

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

  • awesomplete.min.js
  • awesomplete.min.css

Структура подключения аналогична CDN-варианту:

<link rel="stylesheet" href="/assets/awesomplete.css">
<script src="/assets/awesomplete.js"></script>

Такой подход обеспечивает полный контроль над версией библиотеки и исключает зависимость от внешних сервисов.

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

В проектах с Node.js Awesomplete устанавливается через npm:

npm install awesomplete

После установки пакет попадает в node_modules, и его можно импортировать в коде.

Важно учитывать, что сама библиотека распространяется как UMD-модуль, поэтому поддерживает разные сценарии импорта.

Использование с ES-модулями

В современных сборщиках поддерживается импорт через ES Modules:

import Awesomplete from "awesomplete";
import "awesomplete/awesomplete.css";

Данный вариант удобен в проектах на базе Vite или Rollup, где нативная работа с ESM является стандартом.

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

const input = document.querySelector("#city");

new Awesomplete(input, {
  list: ["Tokyo", "Seoul", "Kyoto"]
});

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

В средах, использующих CommonJS (например, старые конфигурации Webpack или Node-окружения), применяется require:

const Awesomplete = require("awesomplete");
require("awesomplete/awesomplete.css");

Такой способ сохраняется для совместимости с устаревшими проектами и конфигурациями сборки.

Интеграция в сборщики (Webpack, Vite, Rollup)

В сборочных системах важно учитывать обработку CSS. Awesomplete не разделяет стили и логику в едином JS-файле, поэтому стили должны быть импортированы отдельно.

Типовой сценарий для Webpack:

import Awesomplete from "awesomplete";
import "awesomplete/awesomplete.css";

const input = document.querySelector("#city");

new Awesomplete(input, {
  list: ["Madrid", "Rome", "Lisbon"]
});

При использовании Vite поведение аналогичное, так как он нативно поддерживает импорт CSS из node_modules.

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

В проектах без сборщика можно комбинировать npm-установку и ручное подключение файлов из node_modules:

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

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

Особенности загрузки CSS

CSS-файл Awesomplete является обязательной частью визуального слоя. Он содержит стили для:

  • контейнера выпадающего списка
  • подсветки активного элемента
  • позиционирования относительно input
  • базовой адаптивности

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

Порядок загрузки скриптов

При подключении через <script> важно соблюдать последовательность:

  1. CSS должен быть загружен до отображения интерфейса
  2. JS-библиотека должна быть загружена до инициализации Awesomplete
  3. Инициализация выполняется после появления DOM-элемента

Корректный порядок:

<link rel="stylesheet" href="awesomplete.css">
<script src="awesomplete.js"></script>

<input id="city">

<script>
  new Awesomplete(document.querySelector("#city"), {
    list: ["Oslo", "Helsinki", "Stockholm"]
  });
</script>

Глобальное пространство имён

При подключении через CDN или <script> библиотека регистрируется в глобальном объекте window:

window.Awesomplete

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

Совместимость загрузки

Awesomplete рассчитана на работу в:

  • современных браузерах (Chrome, Firefox, Edge, Safari)
  • старых окружениях при подключении через UMD-сборку
  • модульных системах ES6+
  • Node-сборках через npm

Отсутствие зависимостей делает загрузку предсказуемой и минимизирует конфликты с другими библиотеками интерфейсного уровня

Оглавление