webpack.config.jsが出来たので、まずはelmで最小限のアプリを書いて動作させて見ます。
この辺りはelm tutorialとほぼ一緒です。
ソースディレクトリを作ります。
$ mkdir src
src/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Elm SPA Sample</title>
</head>
<body>
<div id="main"></div>
<script src="/app.js"></script>
</body>
</html>
src/index.js
ここはまだ仕組みがよくわかりません。エントリーポイントはこのindex.jsなのでまずここに入り、中でMain.elmを呼んでいます。embedというメソッドが魔法のようです。webpack.dev.jsにelmファイルのローディング方法とかを書いているので、webpackがうまくやってくれるということなのかな。
'use strict';
require('ace-css/css/ace.css');
require('font-awesome/css/font-awesome.css');
require('./index.html');
var Elm = require('./Main.elm');
var mountNode = document.getElementById('main');
var app = Elm.Main.embed(mountNode);
ここまで出来たら、次はelmのコードを書いていくのでパッケージをダウンロードしましょう。これもelm tutorialと一緒です。
$ elm-package install elm-lang/html
それから、勝手に生成されているelm-package.jsonのsource-directoriesを.からsrcに変更しましょう。
"source-directories": [
"src"
],
src/Main.elm
module Main exposing (..)
import Html exposing (Html, div, text, program)
type alias Model =
String
init : (Model, Cmd Msg)
init =
( "Hello", Cmd.none )
type Msg
= NoOp
view : Model -> Html Msg
view model =
div []
[ text model ]
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
NoOp ->
( model, Cmd.none )
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
main : Program Never Model Msg
main =
program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
src/index.html, src/index.js, src/Main.elmが出来たので、動かしてみます。
以下のコマンドでビルド
# （webpackコマンドにパスが通っている場合はそのまんまwebpackだけで良い）
$ yarn webpack
成功すると、distフォルダが出来て、中に色々ファイルが生成されます。index.htmlだけそのままで、app.jsがwebpackでコンパイルされて生成されたエントリーポイントです。
以下のコマンドでdev server立ち上げ
# （さっきと同じく、パスが通っているならyarnは要らない）
yarn webpack-dev-server --port 3000
で、http://localhost:3000/へアクセスすると、Helloと表示されるはずです。
次はこのコマンドをyarnから実行できるようにし、さらに前回の記事で作ったjson serverと今回のwebpackサーバーとを一つのコマンドで同時に起動できるようにしていきます。
elmでwebアプリ作成 4