parcelでelmアプリを作成してみる（1）

2019年3月26日2019年3月28日

elmと bulmaでググったら、以下のサイトを見つけたので、写経してみたいと思います。
2019/3/26時点で、途中みたいですが、とりあえず、途中まででも写経してみたいと思います。
特徴的なのは、parcel.jsというバンドラーを用いており、index.htmlに、cssフレームワークbulmaと、fontawesomeアイコンを簡単に導入できるところが魅力的です。

→（20190328追記）create-elm-appでも、public/index.htmlに、簡単に、bulmaとFontAwesome5のCDNを記載することができることが後で分かりました。

https://dev.to/mickeyvip/writing-a-word-memory-game-inelm—part-1-setting-up-an-elm-application-with-parcel-1ppk

開発環境

Windows 10 Pro
Chrome
VisualStudioCode 1.32.3
git version 2.20.1.windows.1
nvm 1.1.7
node 10.2.0
npm 6.4.1
elm 0.19.0-bugfix6
elm-format 0.8.1
VisualStudioCodeの拡張機能でelmをインストールして、settings.jsonに以下のようにelmを設定。
（『Alt + Shift + F』と『Ctrl + S』を使用。）

    "[elm]": {
        "editor.formatOnSave": true
    },

今回構築した環境

parcel-bundler@1.12.3

package.jsonの作成

C:/elm/　フォルダに、word-memory-game/ ファルダを作成し、そのフォルダを、VisualStudioCodeで開き、Ctrl+@でターミナル画面を開き、以下を入力。

npm init -y

package.jsonファイルが作成されます。

parcelのインストール

npm i -D parcel-bundler

数分かかります。

index.htmlとindex.jsの作成

package.jsonの編集

（変更前）

（変更後）

npm run dev　する

開発サーバを起動します。

Chromeが開いて真っ白ですが、Ctrl+Shift+I を押して、Console画面を出すと、以下のようになります。

Elmアプリ作成のために、index.htmlとindex.jsを編集

src/Main.elmの新規作成

src/ フォルダを作成し、その中にMain.elmを作成します

うまくいかないので、一度、Ctrl+C => Enter　でサーバを停止してから、再度、npm run devでサーバを起動すると、3回目くらいで動きました。原因はよくわかりません。

src/Main.elmを編集して、Msg, Model, view, updateを記載する

途中