Установка

Htmx — это библиотека JavaScript, не имеющая зависимостей и ориентированная на браузеры. Это означает, что использование htmx так же просто, как добавление тега <script> в заголовок вашего документа. Нет необходимости в системе сборки для её использования.

Через CDN

Самый быстрый способ начать работу с htmx — загрузить его через CDN. Вы можете просто добавить это в ваш тег head и начать:

unpkg

<script src="https://unpkg.com/htmx.org@2"></script>

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/htmx.org@2/dist/htmx.min.js"></script>

Также доступна неминифицированная версия:

unpkg

<script src="https://unpkg.com/htmx.org@2/dist/htmx.js"></script>

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/htmx.org@2/dist/htmx.js"></script>

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

Локальная копия

Следующий по простоте способ установки htmx — это просто скопировать скрипт в ваш проект.

Скачайте htmx.min.js с unpkg.com и добавьте его в соответствующий каталог вашего проекта, а затем подключите в нужном места с помощью тега <script>:

<script src="/path/to/htmx.min.js"></script>

Менеджер пакетов

В проектах, использующих сборку, можно установить htmx через npm:

npm

npm i htmx.org@2

pnpm

pnpm add htmx.org@2

yarn

yarn add htmx.org@2

После установки вам потребуется использовать соответствующие инструменты для работы с node_modules/htmx.org/dist/htmx.js (или .min.js). Например, вы можете объединить htmx с расширениями и кодом, специфичными для вашего проекта.

Webpack

Если вы используете webpack для управления своим кодом:

1. Установите htmx через ваш любимый пакетный менеджер.

2. Добавьте импорт в ваш index.js:

   import 'htmx.org';

Если вы хотите использовать глобальную переменную htmx (рекомендуется), вам нужно добавить её в область видимости window:

3. Создайте пользовательский JS файл.

4. Импортируйте этот файл в ваш index.js (под импортом из шага 2):

   import 'path/to/my_custom.js';

5. Затем добавьте этот код в файл:

   window.htmx = require('htmx.org');

6. Наконец, пересоберите ваш пакет.