elm-liveで簡単開発サーバー構築

かいてあるないよう：elm-live使ってみた

注：普通に機能について知りたいならREADME読みに行ってください

次の記事

webpack好きですか？

webpackが好き、webpack.config.jsを書くのに何の抵抗もない、大好き、という方はお帰りください。

elm-liveはwebpack分からんさんに与えられたelm用のbuildツール、というわけではなくて¹、HMR（Hot Module Replacement: オートリロードみたいなの）ができる開発サーバーです

elm-liveはすごく簡単に開発環境が整うなー

開発するとき、動作確認とかするのにdev server建てますよね。JSだとwebpack-dev-serverしか知らないんですが一択なんですかね。Elmでの選択肢は：

1. elm reactorを使う
2. webpack系のものを使う
3. elm専用のものを使う

今回はelm専用のelm-liveを使うという話なんですが、普通にwebpackでいいという人はそれでいいですし、elm reactorもHMRはないですがelmいれればついてくるしそれなりにリッチなので悪くないです。

create-elm-appと比べて

create-elm-appはcreate-react-appみたいなやつです。つまり、設定はいじれないし、create-elm-appしたわけではない既存のプロジェクトにあとから入れるのは手間です

elm-liveはいつでも導入できるし、設定もある程度いじれます。そもそもやってることが少ないので設定も少ないです
ツールは単機能でいいんですよ

実際に使ってるとこを見てみよう

ここにmiyamoen/elm-local-packagesというリポジトリがあります
これはcarloを使ったElm用の開発ツールなのですが、ローカルにキャッシュされたelm packageのドキュメントを読み込んでElmのパッケージサイトの見た目で見ることができます。キャッシュを読んでいるのでオフラインで動作します。
よかったら使ってみてください。ちなみに今日マルチカラムできるようになりました²

package.jsonのこの行を見てみましょう

package.json

 "bib": "elm-live src/elm/Views/Bib.elm --open --pushstate --start-page=bib.html --dir=public -- --output=public/bib.js",

bibはbiblipolaの略で、biblipolaはelm版のstorybookです。つまり上記スクリプトはstorybookの起動コマンドですね³

細かい使い方はREADME見ればいいと思うんですが、まずmakeするElmファイルを指定して、オプションをいくつか指定して、--の後ろにelm makeのオプションを指定するだけです

input, outputはelm makeをそのまま叩いている感じなので分かりやすいです

--start-pageでエントリーポイントを指定します（defaultはindex.html）。elm-liveはこのファイルにHMR用のコードを挿入してブラウザで開いてくれます。このHTMLとelmのbuild結果をバンドルなんてことはしません。HTML内で読み込むことを忘れずに

--pushstateはelmアプリケーションがルーティングしてたら付けるやつです。Browser.applicationを使ってたら付けてください

感想

かんたん
ちょっとREADME読んでinとout設定してちゃんと読み込むようにすればできるのでとてもよいです
create-elm-appはエントリーポイントが決まっちゃってるのでアプリケーション用とbibliopola用に分けて書けませんが、elm-liveなら複数書けるし
あとから簡単に導入できるし
JSのバンドルツール（とわたしは認識している）のwebpackさんを酷使しないで済むし

elm reactorでがんばってた人には特におすすめするので使ってみてください

1. elmコマンドはバンドルもoptimizeもするのでそもそもElmだけならwebpackは絶対にいらないと思うんです ↩

2. 自作ツールの宣伝でした ↩

3. 自作ツールの宣伝でした。2回目 ↩