2021年5月2日

Nekobitoのビルドをcreate-elm-appからParcelに移行した

趣味で作っている、NekobitoというElm製Markdownメモ帳のビルドを、create-elm-appからParcelに移行しました。

なぜParcelに移行したのか

create-elm-appの依存パッケージが多いのが少し嫌でした。Dependabotを設定しているので自動でPRが作成されるのですが、なぜ必要なのかよくわからないパッケージの更新をチェックするのはなんだかなあという気分がして、なるべく依存が少ないものに乗り換えたいなと思っていました。

移行時のコミットのpackage-lock.jsonを見ると、追加行数より削除行数のほうがだいぶ多いので、やってよかったのではと思います。

package-lock.jsonのdiff:1818 additions and 6077 deletions

ParcelはElmをサポートしているので、ほぼガイドの通りにやればできます。

parcel-bundlerをインストールして、エントリポイントとなるHTMLファイルを指定すればビルドできるようです。

# 開発サーバー立ち上げ
parcel index.html

# ビルド
parcel build index.html

１からやる場合は何も考えることはなさそうですが、今回はcreate-elm-appからの移行です。create-elm-app用の設定になっているようなところは修正が必要でした。

create-elm-appではHTMLにscriptタグを指定する必要がありませんでしたが、Parcelでは指定が必要でした。

create-elm-appでは%PUBLIC_URL%という変数をHTMLに埋め込んで、アセットファイルなどのパスの指定をしていましたが、ParcelではHTMLファイルからの相対パスにする必要がありました。

PWA用のマニフェストファイルで用意していた（というかcreate-elm-appが勝手に作ってくれていた）manifest.jsonですが、Parcelだとjsonファイルもjsに変換されてしまっていました。拡張子を.webmanifest にする必要がありました。

Service Workerの設定もcreate-elm-appが勝手にやってくれていた設定の一つです。

これがないとPWAの挙動にならないので、最低限の設定をしたservice-worker.jsを用意して、それを読み込ませました。

だいたいこんな感じでParcelに移行できました。変更のPRは以下です。これから同じような移行作業を考えている方がいたら、参考になれば幸いです。