Parcelからwebpackに乗り換えた話
こんにちは、ころちゃんです。最近焼き茄子のカレーを作ったんですがめっちゃ美味かったのでオススメです。ベイガンバルタというそうです。
直近はキャスターの社内ツールの改修を手伝っておりました。この社内ツールですが Rails + Vue + Parcel で動いてます。Parcelはzero configurationを謳ったフロントエンド向けのモジュールバンドラですね。今日はその話です。
昨今、VueやReactと聞くとSPAを思い浮かべちゃう人も多いと思うのですが、基本的なRoutingやViewはRailsに任せた上で、その上にVueが乗ってる感じのTraditionalな構成になってます。小さく導入するのが好きです。
Parcelどうだったか
何も考えず小さくはじめたい場合は選択して良いと思います。そういう意味では素早く導入でき便利でしたし、初期の開発ではお世話になりました。ただしTypeScriptを導入しようとすると厳しいなという感じです（後述）。
出力されたダイジェスト付きのjsファイルを読み込むためにRailsのViewと繋ぎこむコードを自前で書く必要がありますが、これはwebpacker gemを参考にすると良いでしょう。なお、乗り換え先はwebpackerではなくwebpackなので今も結局自分で繋いでます。
Simpackerも検討しましたが、それほど移行コストが変わらなかったので、よりコントロールしやすいwebpackをそのまま使うことにしました。
なぜWebpackに移行したか
乗り換えを検討したのは TypeScript導入のタイミングでした。小さく始めていたVueコンポーネントも増え、バケツリレーも増えてきて型が欲しくなってきたのです。
TypeScriptの導入自体はすんなりできた（これはParcelの恩恵ですねｗ）のですが、Parcelだと開発時のType Checkingでエラーが出力されないので諦めました。これじゃ型の恩恵を受けれないので。TypeScript用のプラグインも試しましたがしばらく更新が停止してるのもあってか、動作しませんでした。
以下のブログの方も私と同じ理由で諦めてますね。
そしてなんだかんだwebpackに戻ってきたという感じです。
同時期にbosyuがTypeScript化を進めていたので、そっちのメンバーにも話を聞きつつwebpack化を進めました。進めました、といっても実質1日ぐらいで移行できちゃいました。
Parcelで辛かった点
Parcelで辛かった点を挙げていきます。
・TypeScriptを導入する場合のtype checkingの問題
前述の通りです。
・Vueの閉じタグ周りの挙動がおかしい
カスタムコンポーネントの閉じタグを省略すると挙動が不穏になるので、閉じタグを強制させられます。（<hoge /> ではなく <hoge></hoge> と書けという意味です。）。
eslint で self-closing-tagに自動修正されて動かなくなる。。という現象に遭遇したので、auto correct恐怖症に陥りました 😭
・出力されるjsファイル名がコントロールできなかった
最初に呼ばれたVueのコンポーネントがファイル名として出力されます。
例えばfront/components/hoge/HogeModal.vue のようなコンポーネントを作成し、これが最初に読み込まれるVueファイルだとすると、HogeModalという名前を含んでバンドルされたjsが出力されてきます。
この名前が変更されるとRailsのView側でjsをロードするときに困ってしまいますし、そもそも、その名前のバンドルファイルはおかしいｗ
上記問題を解決するために、ダミーのVueコンポーネント（application.vue）を作成し、必ずapplication.vueが最初に読み込まれるようにすることで出力ファイル名をコントロールしてました。ただしコレじゃない感が漂ってました。
・パス解決の挙動が謎
import対象のパスを適当に書いてもいい感じに解決して取り込んでくれてしまうので、複数の書き方が混在していました。import from '~/hoge' になっていたり、import from '/hoge' になっていたりと。webpackに移行する時に '@/hoge' に統一しましたが、正直この変更が多かったなと思いました。
頑張って直していったほうが良いと思うんですが、ちょっと色々多すぎて心が折れました。ごめんなさい！ 🙏
まとめ
ふわっと始めるならParcelは強力な武器です。ただし最初からTypeScript等でカッチリ書きたいのであれば、まだまだwebpackから逃れられないという感想でした。
↓ツイッターでは採用やエモい話をよくしてます！