Parcel2.0を試してみた

気付いたら10月も終わりです。もう今年も残りは二ヶ月ということで、月日の流れは本当に速い。

さて、先日登場したParcel2.0を個人のプロダクトで試してみたので、それについてライトに書いてみます。

Parcelとは

まずparcelとはなにか・・・ということですが、こちらについては公式ページを見てもらうのが一番早いです。あえてまとめるとすると

という特徴があります。特にRustで構築されているということと、後述するようにtype checkingを省いているため、特にTypeScriptのビルドおよびbundleは特筆すべき速度です。

犠牲となるのはこのリポジトリになります。元の構成はWebpack5でゼロから構築したものになります。

個人開発では、create-react-appとかNext.jsとかはあんまり使いたくない派閥です

parcelは、各種ツール(組み込まれているものに限る)の設定ファイルは自動的に読み込んでくれるので、設定ファイル群はそのまま残っています。

具体的な手順は以下のようになりました。

TypeScriptを利用しているとき、importでめっちゃ ../ のような相対パス表記が出るのを防ぐため、 paths に以下のような設定をしている場合があると思います。

{
  ...,
  basePath: "./",
  paths: {
    "@/*": ["src/ts/*"]
  }
}

実はこの挙動ですが、TypeScriptのオリジナルコンパイラにおける独自拡張であり、Parcelでは動作しません。

parcel2.0のドキュメントではこのあたりの記述が存在しており、基本的には↓のような記述にする必要があります。

{
  ...,
  basePath: ".",
  paths: {
    "~*": ["./*"]
  }
}

こうしないと、bundle時に超大量のエラーが出て涙することになります。

結果としては、若干書き換えは必要でしたが、 JSでの設定レス でビルドできることは確認しました。postcssとかeslintの設定に関しては、デフォルトの挙動で構わないのであれば、本当に設定レスで動かすことができるでしょう。

ただし、JSONベースというのは静的に決定されているものであるため、例えば production ビルドの場合は・・・というような置き換えは、Parcelの範囲ではなくソースの中に書き加える必要があります。

個人的にはこのへん、 #ifdef とかと大体一緒やなぁ、と思いました

↑のところが実例ですが、ビルド先の環境毎に変更したいというような場合は、自分でNODE_ENVを見てやる必要があります。

bundle速度については、minificationを含まないビルドについては、おおよそ10倍を超える速度でビルドができました。

minificationを含む場合は、どうしても途中で直列になってしまうので若干開発時よりは遅いですが、それでも倍以上の速度でビルドできています。フィードバックループが非常に短くなるのは確実で、開発体験としてもスムーズです。

あります。特にTypeScriptでは、swcと同様にtranspileのみを実施しているという都合上、ビルド時のtype checkingは行いません。だからくっそ速いのですが。

意見的には、開発時にLSPとかでtype checkingしているだろう、というのもありましたが、複数人での開発とかを考えると、絶対にCIでtype checkingを流すというのは必要だと思います

また、Parcelは プロダクションビルド や 開発のdev server は提供してくれますが、テストに関しては完全にノータッチです。そのため、例えばJest + TypeScriptとかを利用する場合は、自分で設定を行う必要があります。

という感じかなぁ、と思います。個人開発とかでとりあえずサクッと実装したりする、というケースには非常にマッチすると思いますし、create-react-appやNext.jsみたいなもののバックエンドとして使われる、というのがあるあるなのかな、という感触です。

ただ、transpileだけするというやつは、非常に複雑になったTypeScriptのtype checkingによるビルド速度の低下に対するカウンターパンチになるので、試したことがない場合は試してみると、考えかたが変わるかもしれません。

これもまた、考えとしては動的型付言語と静的型付言語の揺り戻しをまた見ている感じではあるのですが

個人的には、webpackとかで開発環境をミニマムに構築したりする、というのが好きなので、ちょっと味気ない感じもありますが。