Установка через менеджеры пакетов

Mithril — это лёгкий и быстрый JavaScript-фреймворк для создания одностраничных приложений (SPA). Он предоставляет минималистичный, но мощный API для работы с виртуальным DOM, компонентами и маршрутизацией. Для интеграции Mithril в проект наиболее удобным способом является использование современных менеджеров пакетов.

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

npm — стандартный менеджер пакетов для экосистемы Node.js, позволяющий легко управлять зависимостями проекта.

npm install mithril --save
  • Флаг --save добавляет Mithril в секцию dependencies файла package.json, что гарантирует установку фреймворка при развертывании проекта.
  • После установки библиотеку можно импортировать в коде проекта:
import m from 'mithril';

const Hello = {
    view: () => m("h1", "Hello, Mithril!")
};

m.mount(document.body, Hello);
  • Альтернативный синтаксис CommonJS:
const m = require('mithril');

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

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

yarn add mithril
  • После этого Mithril доступен для импорта аналогично npm.
  • Yarn использует файл yarn.lock для точной фиксации версий всех пакетов.

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

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

pnpm add mithril
  • pnpm создает pnpm-lock.yaml для точной фиксации версий.
  • Импорт и использование идентичны npm и Yarn.

Использование Mithril в браузере без сборщика

Хотя npm, Yarn и pnpm являются стандартом для современных проектов, Mithril может быть подключён напрямую через <script>:

<script src="https://unpkg.com/mithril/mithril.js"></script>
<script>
    const Hello = {
        view: () => m("h1", "Hello, Mithril!")
    };
    m.mount(document.body, Hello);
</script>
  • Такой способ подходит для прототипов или небольших проектов.
  • Обновление версии выполняется вручную, изменяя ссылку на CDN.

Выбор версии и управление зависимостями

При установке через пакетный менеджер важно учитывать совместимость с проектом:

  • Указывать конкретную версию:
npm install mithril@2.1.0 --save
  • Обновление пакета:
npm update mithril
  • Проверка установленной версии:
npm list mithril
  • Аналогичные команды доступны в Yarn (yarn upgrade mithril) и pnpm (pnpm update mithril).

Настройка сборщиков и модулей

После установки Mithril через npm/Yarn/pnpm можно интегрировать его в сборщики модулей, такие как Webpack, Rollup или Vite:

// Пример для Vite
import m from 'mithril';

const App = {
    view: () => m("div", "Приложение на Mithril")
};

m.mount(document.getElementById('app'), App);
  • Поддержка ES-модулей упрощает tree-shaking и минимизацию.
  • Mithril совместим с TypeScript, обеспечивая автодополнение и проверку типов при подключении соответствующих деклараций типов:
npm install --save-dev @types/mithril
  • После этого можно использовать аннотации типов:
import m, { Component } from 'mithril';

const Hello: Component = {
    view: () => m("h1", "Hello, TypeScript!")
};

Интеграция с системами сборки

  • Webpack и Vite автоматически разрешают модуль mithril через node_modules.
  • Rollup требует подключения через плагин @rollup/plugin-node-resolve.
  • При использовании TypeScript следует убедиться, что tsconfig.json содержит moduleResolution: "node" для корректного поиска модулей.

Итоговые рекомендации по установке

  • Для современных проектов предпочтителен npm, Yarn или pnpm.
  • Для прототипов или простых страниц допустимо подключение через CDN.
  • Всегда фиксировать версии зависимостей для стабильности.
  • TypeScript-проекты требуют установки деклараций типов для полноценной интеграции.

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

Оглавление