スポンサーリンク

parcelでelmアプリを作成してみる(1)

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の作成

index.html
index.js

package.jsonの編集

(変更前)

(変更後)

npm run dev する

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

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

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

index.html
index.js

src/Main.elmの新規作成

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

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

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

途中