Обновление 2018–11–19: обновлены ссылки для использования стабильной версии Phoenix 1.4.

Elm 0.19 был выпущен не так давно, а Phoenix 1.4 только вышел, что принесло с собой переход с Brunch на Webpack.

Поскольку мне нравится играть с новыми вещами, я создал проект Phoenix 1.4, способный создавать код Elm. Столкнувшись с несколькими причудами, я решил написать простое пошаговое руководство с подробным описанием процесса и парочку приемов, которые могут оказаться полезными.

1 - Установите Phoenix 1.4

Если вы еще не установили новую версию Phoenix, вы можете сделать это с помощью следующих команд

$ mix archive.uninstall phx_new
$ mix archive.install hex phx_new 1.4.0

2 - Создайте проект

В том, как работает создание проекта, мало что изменилось. Я создам проект с флагом --no-ecto, чтобы я мог протестировать его без установки базы данных, но вы можете удалить его, если он вам нужен.

$ mix phx.new my_project --no-ecto

После создания проекта позвольте Phoenix установить ресурсы и перейти к следующему шагу.

3 - Установить и настроить elm-webpack-loader

Следующим шагом будет установка elm-webpack-loader.

$ cd my_project/assets
$ npm install --save-dev elm-webpack-loader

Это также позаботится об установке компилятора Elm локально, что я предпочитаю вместо того, чтобы устанавливать его глобально, так как я большой поклонник автономных проектов, где я могу сказать: «Клонируйте репозиторий, выполните эти команды, и вы хорошо идти ».

Чтобы настроить elm-webpack-loader, добавьте это в массивrules ​​вашего webpack.config.js

...
  module: {
    rules: [
    ...    
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: {
          loader: 'elm-webpack-loader',
          options: {
            debug: options.mode === "development"
          }
        }
      }
...

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

4 - Инициализировать проект Elm

Если вы находитесь в каталоге assets, вы можете получить доступ к двоичному файлу Elm (поскольку версия 0.19 объединила все в одном исполняемом файле) с помощью ./node_modules/.bin/elm, но обычно я добавляю в свой package.json сценарий, который просто

{
...
  "scripts": {
  ...
    "elm": "elm"
  }
}

Таким образом, я могу использовать npm run elm как эквивалент команды elm.

Теперь мы инициализируем наш проект Elm. Пока все еще в каталоге assets, просто выполните

$ npm run elm init # (or ./node_modules/.bin/elm init)

Это создаст elm.json файл с основными зависимостями и src папку, в которую вы поместите свои источники Elm.

Это также хороший момент для добавления каталога elm-stuff в ваш .gitignore, если вы используете Git для своего проекта, поскольку он будет содержать артефакты компиляции, которые не следует возвращать в систему контроля версий.

5 - Создайте основной вяз вяза

Создайте src/Main.elm и заполните его этой базовой программой Elm, которая просто печатает «Hello» на экране:

module Main exposing (main)
import Html exposing (text)
main =
    text "Hello Elm and Phoenix!"

6. Вставьте вяз в свое приложение Phoenix.

Откройте шаблон Phoenix вашего приложения (мое было в lib/my_project_web/templates/layout/app.html.eex) и замените раздел body на:

<body>
    <div id="elm-main"></div>
    <script type="text/javascript" src="<%= Routes.static_url(@conn, "/js/app.js") %>"></script>
</body>

Затем откройте assets/js/app.js и добавьте

import { Elm } from "../src/Main.elm";

var app = Elm.Main.init({
  node: document.getElementById('elm-main')
});

Эти скобки вокруг импорта Elm - это то, что почти свело меня с ума, но, опять же, я не эксперт по инструментам Javascript, поэтому я уверен, что они должны быть там по какой-то причине.

На этом этапе вы можете запустить приложение Phoenix с помощью

$ mix phx.server

а посещение http: // localhost: 4000 должно предложить вам тщательно разработанное веб-приветствие.

Если вы измените строку в исходном файле Elm, не отключая сервер, функция автоматической перезагрузки Phoenix перекомпилирует файл и обновит страницу за вас.

7 - Создайте свой потрясающий проект!

Отсюда вы можете продолжить разработку своего приложения Elm + Phoenix. Если вам нужно установить дополнительную зависимость Elm (например, mdgriffith/elm-ui), вам просто нужно перейти в каталог assets и запустить:

$ npm run elm install mdgriffith/elm-ui

Этого достаточно, чтобы вы начали, и это избавит вас от боли, связанной со всеми шаблонами. С этого момента все зависит от вас!

Если вам нравятся вещи, созданные с помощью Elixir, Phoenix, а также немного Elm, попробуйте Astarte, нашу платформу Интернета вещей с открытым исходным кодом.