Команда elm make выдаёт ошибку «I cannot find module 'Html'» — это самый частый первый барьер у тех, кто только начинает пользоваться Elm, и почти всегда она означает, что в файле elm.json не подключён пакет elm/html. Чтобы уверенно работать с языком, нужно понимать его основной цикл: установка компилятора, создание проекта, написание кода по архитектуре The Elm Architecture и компиляция в JavaScript. Именно этот путь разберём по шагам.
Elm — функциональный язык программирования, который компилируется в JavaScript и применяется для создания веб-интерфейсов. Его отличают строгая статическая типизация, отсутствие runtime-исключений в скомпилированном коде и понятные сообщения об ошибках. Дальше — практика: как установить инструменты, какие команды использовать и как собрать первое работающее приложение.
Установка компилятора Elm
Самый простой способ установить Elm — через пакетный менеджер npm, который идёт вместе с Node.js. Команда установки выполняется один раз и делает компилятор доступным глобально:
npm install -g elmПосле завершения установки проверьте, что всё встало корректно. Для этого в терминале выполните elm --version — в ответ должна вывести версия компилятора. Если команда не найдена, перезапустите терминал или проверьте, что глобальный каталог npm добавлен в переменную окружения PATH.
Альтернативные варианты — официальные установщики с сайта проекта или пакетные менеджеры операционных систем. Конкретные команды зависят от вашей ОС и версии, поэтому сверяйтесь с официальной документацией Elm.
⚠️ Внимание: устанавливайте Elm только из официальных источников — через npm-пакет elm или установщик с официального сайта. Сторонние сборки могут содержать устаревшую или изменённую версию компилятора.
Создание первого проекта: elm init
Любой проект на Elm начинается с инициализации. Создайте пустую папку, перейдите в неё и выполните:
elm initКомпилятор создаст файл elm.json — это манифест проекта, где перечислены зависимости, версия Elm и папки с исходным кодом. Вам будет предложено подтвердить создание стандартной конфигурации: ответьте Y. После этого в каталоге появится также папка src, куда помещаются файлы с кодом на языке.
Основные команды Elm
Вся работа с языком строится вокруг нескольких команд компилятора. Их немного, и освоить их можно за один вечер.
- 🚀
elm init— создаёт новый проект и файл elm.json; - ⚛️
elm reactor— запускает локальный сервер для быстрого просмотра и отладки кода в браузере; - 🔨
elm make— компилирует исходники в JavaScript или HTML; - 📦
elm install— добавляет пакеты из официального репозитория; - 🔁
elm repl— интерактивная консоль для экспериментов с выражениями.
Для повседневной разработки чаще всего используются связки elm reactor на этапе прототипирования и elm make для сборки готового файла. Например, компиляция модуля в JavaScript выглядит так:
elm make src/Main.elm --output=main.jsЕсли флаг --output не указать, результатом станет готовый HTML-файл, который можно сразу открыть в браузере.
Архитектура The Elm Architecture
Ключ к пониманию того, как пользоваться Elm, — это The Elm Architecture (TEA). Каждое приложение строится из трёх обязательных частей: Model (состояние), View (функция отрисовки интерфейса) и Update (функция обновления состояния в ответ на сообщения). Пользователь нажимает кнопку — возникает сообщение Msg, функция update возвращает новую модель, а view перерисовывает интерфейс на её основе.
Минимальное приложение-счётчик выглядит примерно так:
module Main exposing (main)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
type Msg = Increment | Decrement
main =
Browser.sandbox { init = 0, update = update, view = view }
update msg model =
case msg of
Increment -> model + 1
Decrement -> model - 1
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, text (String.fromInt model)
, button [ onClick Increment ] [ text "+" ]
]
Сохраните этот код в src/Main.elm и запустите elm reactor. Откройте в браузере предложенный локальный адрес, выберите файл — и увидите работающий счётчик. Если код не компилируется, Elm не «молча падает», а выводит подробное сообщение с указанием строки и подсказкой по исправлению — внимательно читайте эти сообщения, они фактически заменяют отладчик на первых порах.
☑️ Проверка первого проекта на Elm
Работа с пакетами: elm install
Экосистема Elm централизована: все библиотеки публикуются в официальном каталоге пакетов, а версионирование строго следует семантическим правилам — компилятор сам проверяет совместимость. Чтобы добавить библиотеку, используется команда вида:
elm install elm/httpПосле установки пакет появится в секции зависимостей файла elm.json, и его модули можно импортировать в коде через import. Популярные пакеты для старта перечислены ниже.
| Пакет | Назначение |
|---|---|
| elm/browser | Запуск приложения в браузере, работа с навигацией |
| elm/html | Построение разметки и обработка событий |
| elm/http | Сетевые запросы к серверу |
| elm/json | Кодирование и декодирование JSON |
| elm/url | Разбор и построение URL-адресов |
⚠️ Внимание: в Elm нельзя установить произвольный JavaScript-пакет из npm и использовать его напрямую. Взаимодействие с JS возможно только через механизм портов (ports) или custom elements — учитывайте это при планировании проекта.
Типичные ошибки новичков и их решения
Большинство проблем на старте связаны не со сложностью языка, а с незнанием его строгих правил. Разберём самые частые сценарии.
- 🧩 Ошибка «cannot find module» — нужный пакет не добавлен: выполните
elm installс именем пакета; - ✏️ Ошибки типов — проверьте, что функция возвращает именно тот тип, который ожидает вызывающий код; сообщение компилятора укажет несовпадение;
- 📁 Компилятор не видит файл — убедитесь, что модуль лежит в папке из списка
source-directoriesв elm.json и имя модуля совпадает с путём к файлу; - 🚫 Попытка изменить переменную — в Elm все значения неизменяемы; обновляйте состояние только через функцию update.
Отдельно стоит упомянуть отступы: Elm чувствителен к пробелам, как Python. Если тело функции сдвинуто не на тот уровень, компилятор выдаст синтаксическую ошибку. Используйте автоформаттер elm-format — он приводит код к единому стилю и снимает эту проблему полностью.
Отладка и интерактивный режим REPL
Для быстрых экспериментов удобен режим elm repl: вводите выражения и сразу видите результат. Это хороший способ проверить работу функции до того, как встраивать её в приложение. Выход из консоли — команда :exit.
Классическая отладка через console.log в Elm недоступна напрямую, но есть функция Debug.log, которая печатает значение в консоль браузера. Учтите: модуль Debug запрещён в оптимизированной сборке, поэтому перед релизом все вызовы нужно удалить — компилятор с флагом --optimize сам об этом напомнит.
Как собрать проект для продакшена
Выполните elm make src/Main.elm --optimize --output=main.js. Флаг --optimize включает минификацию и удаление отладочного кода. Полученный JS-файл подключается в HTML через тег script, после чего приложение инициализируется вызовом Elm.Main.init с указанием DOM-узла.
Полезные ресурсы для дальнейшего изучения
После освоения базового цикла логично двигаться к официальному руководству по языку — оно последовательно раскрывает TEA, порты, подписки и работу с эффектами. Документация всех пакетов доступна в едином каталоге с поиском по функциям и типам.
Практика важнее теории: попробуйте переписать счётчик в список задач, добавьте HTTP-запрос через elm/http, затем разбейте приложение на несколько модулей. Каждый такой шаг закрепляет понимание архитектуры.
Часто задаваемые вопросы
Чем Elm отличается от JavaScript-фреймворков вроде React?
Elm — это отдельный язык со статической типизацией и собственной архитектурой, а не библиотека. Компилятор гарантирует отсутствие большинства runtime-ошибок ещё на этапе сборки, а структура Model-Update-View задана самим языком, а не выбранными библиотеками.
Нужно ли знать JavaScript, чтобы пользоваться Elm?
Нет, для написания приложений на Elm знание JavaScript не обязательно — код пишется целиком на Elm. Однако базовое понимание HTML и работы браузера полезно, а для интеграции со сторонним JS-кодом пригодится механизм портов.
Почему elm make выдаёт ошибку о несовместимости версий?
Компилятор строго проверяет зависимости по семантическому версионированию. Обычно помогает повторная установка пакета через elm install — команда сама подберёт совместимую версию. Ручное редактирование диапазонов версий в elm.json требуется редко.
Можно ли использовать Elm вместе с существующим JavaScript-проектом?
Да. Скомпилированный Elm-модуль встраивается в обычную HTML-страницу как JS-файл и инициализируется внутри указанного DOM-элемента. Обмен данными между Elm и JavaScript выполняется через порты — это позволяет внедрять Elm постепенно, по одному виджету.
Где искать готовые пакеты для Elm?
Все библиотеки публикуются в официальном каталоге пакетов Elm, доступном с сайта языка. Там же размещена документация по каждому модулю с примерами типов и функций. Сторонних репозиториев, аналогичных npm, у Elm нет — это осознанное архитектурное решение экосистемы.