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

Mithril.js — лёгкий и быстрый фронтенд-фреймворк, который не навязывает сложной архитектуры и прекрасно интегрируется с современными инструментами сборки. Эффективная работа с Mithril невозможна без грамотной настройки сборщиков модулей, таких как Webpack, Rollup или Vite, которые обеспечивают трансформацию, бандлинг и оптимизацию кода.

Подключение Mithril к проекту

Mithril распространяется через NPM и доступен как модуль ES6 и CommonJS. Установка осуществляется командой:

npm install mithril

В файле исходного кода можно импортировать библиотеку:

import m from "mithril";

или через CommonJS:

const m = require("mithril");

ES-модули позволяют интегрировать Mithril с современными сборщиками, поддерживающими tree-shaking, что уменьшает размер итогового бандла.

Webpack

Конфигурация Webpack обеспечивает трансформацию современного JavaScript и JSX-подобных структур для Mithril.

Пример минимальной конфигурации:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
  resolve: {
    extensions: [".js"],
  },
  mode: "development",
};

Ключевые моменты настройки Webpack:

  • entry — основной файл приложения, где начинается выполнение кода.
  • output — файл бандла, который будет подключён в HTML.
  • module.rules — настройка загрузчиков (loaders) для трансформации ES6 в ES5.
  • resolve.extensions — разрешение расширений файлов при импорте.
  • mode — режим сборки (development или production) влияет на минификацию и оптимизацию.

Для оптимизации производительности можно добавить плагин TerserPlugin и включить optimization.splitChunks для разбиения кода на чанки.

Rollup

Rollup ориентирован на создание оптимизированных бандлов для библиотек и приложений, использующих ES-модули. Он идеально подходит для Mithril благодаря поддержке tree-shaking.

Пример конфигурации rollup.config.js:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";

export default {
  input: "src/index.js",
  output: {
    file: "dist/bundle.js",
    format: "iife",
    name: "App",
  },
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ],
};

Основные аспекты:

  • @rollup/plugin-node-resolve позволяет импортировать модули из node_modules.
  • @rollup/plugin-commonjs конвертирует CommonJS-модули в ES-модули.
  • rollup-plugin-terser минифицирует код для продакшн-сборки.
  • format: “iife” — подходит для подключения бандла напрямую в браузер через <script>.

Vite

Vite — современный сборщик с высокой скоростью запуска и «горячей» перезагрузкой модулей (HMR). Для Mithril достаточно базовой конфигурации:

import { defineConfig } from "vite";

export default defineConfig({
  root: "./src",
  build: {
    outDir: "../dist",
    rollupOptions: {
      input: "src/index.js",
    },
  },
});

Преимущества использования Vite с Mithril:

  • Нативная поддержка ES-модулей без дополнительной конфигурации.
  • Быстрая разработка благодаря HMR.
  • Возможность подключать плагины Rollup для оптимизации бандла.
  • Лёгкая интеграция с TypeScript и SCSS.

Работа с JSX-подобным синтаксисом в Mithril

Хотя Mithril использует функцию m() для создания виртуальных DOM-элементов, возможно применение JSX через Babel:

/** @jsx m */
import m from "mithril";

const App = {
  view: () => <div className="app">Hello Mithril</div>,
};

Для этого необходимо:

  1. Установить Babel и плагин @babel/preset-react.
  2. Настроить pragma через @babel/plugin-transform-react-jsx:
{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "pragma": "m" }]
  ]
}

Webpack, Rollup и Vite корректно обрабатывают JSX, если настроен соответствующий Babel-loader или плагин.

Оптимизация сборки

Для продакшн-сборок важно:

  • Использовать tree-shaking для удаления неиспользуемого кода.
  • Минифицировать код через Terser или встроенные плагины.
  • Разделять код на чанки для ленивой загрузки.
  • Настроить source maps только для разработки.

Пример оптимизации Webpack:

optimization: {
  splitChunks: {
    chunks: "all",
  },
  minimize: true,
}

Rollup автоматически выполняет tree-shaking и минификацию при использовании плагина terser.

Интеграция с CSS и ассетами

  • В Webpack применяются css-loader и style-loader:
{
  test: /\.css$/,
  use: ["style-loader", "css-loader"],
}
  • В Vite достаточно импортировать CSS напрямую:
import "./style.css";
  • Rollup требует плагин rollup-plugin-postcss.

Резюме принципов

  • Mithril хорошо работает с современными сборщиками модулей, поддерживая ES-модули и CommonJS.
  • Webpack предоставляет гибкую настройку для больших проектов.
  • Rollup подходит для создания библиотек и минимизированных бандлов.
  • Vite обеспечивает быструю разработку и HMR без сложной конфигурации.
  • JSX-подобный синтаксис возможен через Babel с pragma m.
  • Оптимизация сборки включает tree-shaking, минификацию, разбиение на чанки и управление ассетами.

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

Оглавление