Распространение плагина

Способы установки и доставки пакета

Tom Sel ect распространяется как универсальный JavaScript-пакет, ориентированный на работу в разных окружениях: от классических браузерных страниц до современных сборщиков модулей. Основные каналы распространения включают npm, CDN и ручное подключение файлов из дистрибутива.

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

Наиболее распространённый способ интеграции в современные проекты — установка через npm:

npm install tom-select

После установки пакет становится доступным в node_modules и может быть импортирован как модуль. Такой подход используется в связке с Webpack, Vite, Rollup, Parcel и другими сборщиками.

Импорт основной логики:

import TomSelect fr om 'tom-select'

Подключение стилей:

import 'tom-select/dist/css/tom-select.css'

В некоторых конфигурациях сборщиков требуется явное указание CSS-лоадера или использование постпроцессоров, таких как PostCSS.

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

Альтернативные менеджеры пакетов используют аналогичную структуру:

yarn add tom-select
pnpm add tom-select

Поведение пакета при этом не меняется, так как он полностью совместим с npm-экосистемой.

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

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

Подключение Jav * aScript:

<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>

Подключение стилей:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css">

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

const sel ect = new TomSelect('#sel ect')

CDN-версия обычно включает собранный пакет с зависимостями и дополнительными модулями, поэтому не требует сборщика.

Использование в модульной системе ES Modules

Tom Sel ect поддерживает ES Modules, что позволяет использовать его в современных фронтенд-архитектурах без дополнительных трансформаций.

Пример инициализации:

import TomSelect fr om 'tom-select'

new TomSelect('#sel ect', {
  create: true,
  sortField: 'text'
})

При использовании ESM важно учитывать корректную обработку CSS. В большинстве случаев стили импортируются отдельно:

import 'tom-select/dist/css/tom-select.css'

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

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

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

const TomSelect = require('tom-select').default

Особенность заключается в том, что пакет экспортируется как ES Module, поэтому в CommonJS окружении часто требуется обращение к свойству default.

Использование с классическими HTML-подключениями

В традиционной модели без сборщиков подключение осуществляется через <script> и глобальный объект.

<link rel="stylesheet" href="tom-select.css">
<script src="tom-select.complete.min.js"></script>

Инициализация выполняется после загрузки DOM:

document.addEventListener('DOMContentLoaded', function () {
  new TomSelect('#sel ect')
})

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

Структура дистрибутива

Пакет Tom Select содержит несколько типов сборок:

  • dist/js/ — готовые JavaScript-файлы
  • dist/css/ — стили компонентов
  • esm/ — ES Module версии
  • cjs/ — CommonJS сборки (в зависимости от версии пакета)

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

Различия между полной и облегчённой сборкой

Сборка tom-select.complete включает дополнительные плагины и расширения, поставляемые вместе с ядром. Она предназначена для случаев, когда требуется максимальная функциональность без ручного подключения зависимостей.

Облегчённая версия содержит только базовую функциональность и требует явного подключения расширений при необходимости. Такой подход уменьшает размер финального бандла в production-сборках.

Совместимость с системами сборки

Webpack

При использовании Webpack импорт выглядит стандартно:

import TomSelect fr om 'tom-select'
import 'tom-select/dist/css/tom-select.css'

Дополнительно может потребоваться настройка обработки CSS через style-loader и css-loader.

Vite

Vite поддерживает пакет без дополнительных настроек:

import TomSelect fr om 'tom-select'

Стили подключаются аналогично:

import 'tom-select/dist/css/tom-select.css'

Rollup

В Rollup может потребоваться плагин для обработки CommonJS и CSS:

import commonjs fr om '@rollup/plugin-commonjs'
import nodeResolve fr om '@rollup/plugin-node-resolve'

Глобальная регистрация и использование без модулей

При подключении через CDN библиотека автоматически регистрируется в глобальной области видимости. Это позволяет использовать её без импортов:

const instance = new TomSelect('#sel ect', {
  maxItems: 3
})

Такой режим характерен для интеграции в CMS, шаблонные системы и серверно-рендеренные страницы.

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

В реактивных фреймворках Tom Select интегрируется как внешний DOM-плагин. Библиотека не навязывает собственную реактивность, поэтому работает поверх элементов формы.

Пример концептуального подключения:

import TomSelect fr om 'tom-select'

function mountSelect(el) {
  return new TomSelect(el, {
    persist: false
  })
}

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

Версионирование и обновление

Пакет следует семантическому версионированию. Обновления могут включать:

  • изменения API и поведения инициализации
  • корректировки внутренних плагинов
  • обновления стилей
  • исправления совместимости с браузерами

Обновление через npm:

npm update tom-select

или фиксация конкретной версии:

npm install tom-select@2.3.1

Портативность и переносимость

Tom Select спроектирован как независимый компонент без жёстких зависимостей от фреймворков. Это позволяет:

  • использовать одну и ту же сборку в разных проектах
  • переносить конфигурации между окружениями
  • подключать библиотеку точечно без глобальной интеграции

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

Оглавление