Настройка среды разработки

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

Рекомендуется использовать актуальную LTS-версию Node.js. После установки в системе становятся доступны команды:

node -v
npm -v

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

Инициализация проекта

Рабочая директория проекта создаётся заранее, после чего инициализируется npm-проект:

npm init -y

В результате появляется файл package.json, который служит центральной точкой конфигурации. В нём хранятся сведения о проекте, списки зависимостей и пользовательские скрипты.

Минимально важные поля на этом этапе:

  • name — имя проекта
  • scripts — команды для запуска и сборки
  • dependencies и devDependencies — библиотеки времени выполнения и разработки

Установка Riot.js

Riot распространяется как npm-пакет. Для современных проектов используется версия 6+:

npm install riot

Riot устанавливается как зависимость времени выполнения, поскольку используется непосредственно в браузере или при серверном рендеринге.

Дополнительно часто устанавливаются:

  • @riotjs/compiler — компилятор тегов
  • @riotjs/dom-bindings — DOM-движок (обычно устанавливается автоматически)

Выбор стратегии сборки

Riot.js не навязывает конкретный инструмент сборки. Поддерживаются любые современные бандлеры. Наиболее распространённые варианты:

  • Vite
  • Rollup
  • Webpack

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

Настройка проекта с Vite

Установка Vite и плагина для Riot:

npm install -D vite @riotjs/vite-plugin-riot

Создание конфигурационного файла vite.config.js:

import { defineConfig } from 'vite'
import riot from '@riotjs/vite-plugin-riot'

export default defineConfig({
  plugins: [riot()]
})

Vite автоматически обрабатывает .riot-файлы, компилируя их в JavaScript-модули.

Структура каталогов

Типичная структура проекта с Riot.js:

project/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.js
    └── components/
        └── app.riot

Назначение элементов:

  • index.html — точка входа браузерного приложения
  • src/main.js — инициализация Riot
  • components/ — переиспользуемые теги Riot

Точка входа приложения

Файл src/main.js отвечает за монтирование корневого компонента:

import { mount } from 'riot'
import App from './components/app.riot'

mount(App, {
  title: 'Riot Application'
})

Функция mount создаёт экземпляры компонентов и связывает их с DOM. Передача второго аргумента используется для передачи начальных свойств.

HTML-шаблон

index.html содержит минимальную разметку:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Riot App</title>
</head>
<body>
  <app></app>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

Тег <app> соответствует имени компонента в файле app.riot.

Компиляция .riot-файлов

Riot использует собственный формат компонентов, объединяющий шаблон, логику и стили:

<app>
  <h1>{ props.title }</h1>

  <script>
    export default {}
  </script>

  <style>
    h1 {
      color: #333;
    }
  </style>
</app>

Компилятор Riot преобразует этот файл в стандартный ES-модуль. Вручную компиляция не требуется — она выполняется бандлером.

Настройка npm-скриптов

Для удобства добавляются команды запуска и сборки:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}
  • dev — режим разработки с hot reload
  • build — production-сборка
  • preview — локальный просмотр собранного проекта

Поддержка современных стандартов JavaScript

Riot.js полностью совместим с ES-модулями. Рекомендуется использовать:

  • import / export
  • стрелочные функции
  • async / await
  • опциональную типизацию через TypeScript (при необходимости)

При использовании TypeScript добавляется соответствующая конфигурация Vite и установка typescript.

Инструменты разработки

Для комфортной работы применяются дополнительные инструменты:

Редактор кода Visual Studio Code с расширениями:

  • Riot Tag
  • ESLint
  • Prettier

Линтинг Установка ESLint:

npm install -D eslint

Настройка правил позволяет поддерживать единый стиль и предотвращать ошибки на раннем этапе.

Горячая перезагрузка и отладка

Vite обеспечивает мгновенную перезагрузку модулей при изменении .riot-файлов. Компоненты Riot корректно пересобираются без полной перезагрузки страницы.

Отладка осуществляется стандартными средствами браузера:

  • вкладка Sources
  • breakpoints
  • просмотр состояния компонентов через JavaScript-консоль

Работа с окружением

Переменные окружения задаются через .env-файлы:

VITE_API_URL=https://api.example.com

Использование в коде:

const apiUrl = import.meta.env.VITE_API_URL

Vite автоматически подставляет значения при сборке.

Минимальные требования к среде

Корректно настроенная среда для Riot.js включает:

  • Node.js LTS
  • npm или альтернативный менеджер пакетов
  • бандлер с поддержкой ES-модулей
  • компилятор Riot

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

Оглавление