create-elm-app

create-elm-app

前、elm-webpack-starterを使っていると言う記事を書いたのだけど、最近は変わって今はcreate-elm-appを使っている、このツールとても良い。

halfzebra/create-elm-app: Create Elm apps with zero configuration

create-elm-appは設定的なものを一つも書かずとも、Elm用プロジェクトを作ってくれるツール。（元ネタはcreate-react-app)

ElmやらJSやらHTMLやらwebpackやらホットリロードの設定を書くのは面倒くさい、ワンコマンドですべてやってくれないか。というツール。
中で使っている設定を出してもくれる。

インストール。

npm install create-elm-app -g

クイックスタート

create-elm-appでプロジェクトを作って移動して、elm-app startを行う。
ブラウザにアプリケーションが表示される。

npm install create-elm-app -g
create-elm-app my-app
cd my-app/
elm-app start

create-elm-appで作られるプロジェクト

my-app/
  .gitignore
  README.md
  elm-package.json
  src/
    App.elm
    favicon.ico
    index.html
    index.js
    main.css
  tests/
    elm-package.json
    Main.elm
    Tests.elm

webpackを使っていたら何となく分かる構成。

作られるREADME.mdファイルに使い方が載っている。create-elm-app/README.md

プロジェクト内でnpmも使える。

npm init -y # Add package.json
npm install --save-dev pouchdb-browser # Install library from npm

// Use in your JS code
var PouchDB = require('pouchdb-browser');
var db = new PouchDB('mydb');

使えるようになるコマンド

create-elm-app
elm-app build
elm-app start
elm-app test
elm-app eject
elm-app <elm-platform-comand>

elm-app startでブラウザでアプリケーションが立ち上がる。webpackのホットリロード。

elm-app ejectで脱create-elm-app。設定が手に入る

elm-app ejectコマンドで、脱create-elm-appが出来る。

コマンドを実行すると、create-elm-app内部で使っているnpmやwebpackの設定などが書き出される。
プロジェクトにwebpackの設定をまとめたconfig、scriptsフォルダが作られる。elm-app startはnpm startに設定される。

なので、create-elm-app内で使っているwebpackの設定を変えたい、足したいと思ったら、ejectしてやっていくということが出来る。

まとめ

Elm、JS、webpackのプロジェクトをワンコマンドで作れる。webpackの初期設定だけもらうというのも可能。ホットリロードは高速でとても良いです。