豊田高専 Advent Calendar 2021、18日目の記事です。
Parcel とは
Parcelは主にブラウザ向けのバンドラとして登場し、Webpackのような複雑怪奇な設定ファイルが不要ということでWebフロントエンド界隈を賑わせました。
とはいえ、結局Webpackを打倒することはできずにいたように思います。
React周辺のツールを見ても明らかです。
WebフロントエンドはReact一強時代(npmtrends)のなか、create-react-appも、Next.jsもWebpackが利用されています。
Rust/Go製ツールの台頭
AltJSとしてTypeScriptが当たり前のように使われるJavaScript開発ですが、TypeScriptのトランスパイラ"tsc"はかなり遅いです。
そこで、esbuild(Go)やswc(Rust)が登場します。
いずれも圧倒的な速度で動作します。（型チェックをしていないので高速という話もあります）
また、RomeもRustで実装する方針に寄った模様です。
また、esbuildを利用したバンドラとして、Snowpackや、Vue.js作者であるEvan You氏のViteも出てきました。
~~Snowpackは流行りませんでしたが、~~Viteはrollup.jsのプラグインが流用でき新たにプラグインを作る必要がないので、Vue.js界隈(Nuxt.js)だけでなくSvelte界隈(SvelteKit)にも利用されています。
ここまで出てきたやつをまとめる
- Parcel (v1)
- バンドラ
- 設定不要でWebpackを打倒するかに思われたがそんなことはなかった
- Webpack
- バンドラ
- 設定が複雑
- 1,2年前は一強？
- rollup.js
- バンドラ
- Webpackがアプリ向きならこっちはライブラリ向き
- tsc
- TypeScript公式のトランスパイラ
- バンドルはできないし、遅いけど型チェック（と
.d.tsの生成）ができる
- esbuild
- Go製のトランスパイラ
- 速くてバンドルもできちゃうけど型チェックはしてくれない
- swc
- Rust製のトランスパイラ
- 速くてバンドルもできちゃうけど型チェックはまだしてくれない
- 対応したいIssue #571
- Rome
- トランスパイル、バンドル、Lint、フォーマット、minify、テスト etc...
- ツールを一つにまとめたい
- Snowpack
- esbuildを利用したバンドラ
- Vite
- esbuildを利用したバンドラ
- Vue.js作者Evan You氏
- rollup.jsのライブラリが利用できる
本題 Parcel (v2)
だいたい5個の面白そうポイント
1. 作者
作者はAdobeのエンジニア Devon Govett氏。AdobeのデザインシステムSpectrumのReact実装、React Spectrumなども携わっている。
2. Flowを使ってる
型チェッカーとしてTypeScriptではなくFlowを採用している。
3. Rust製CSS Minifier
CSSのminifierとしてparcel-cssを作成しており、これがRust製。
意訳
このCSSコンパイラ、まるで本物のプロジェクトみたいに思えてくるで…2万行突破したもん😅
まだ、速く、小さくなってんだよね🚀
4. alt chokidar
chokidarはNode.jsのファイル変更監視ライブラリで、多くのプロジェクトで利用されてきましたが、Parcel v2に合わせて@parcel/watcherがリリースされました。
これはC++で書かれており、各OSのネイティブAPIが直接利用されます。
それ故に高速で、JSのプロセスを圧迫しないなどメリットが有るようです。
5. 公式で対応しているファイル種の多さ
ざっと以下がドキュメントに載ってます
JavaScript/HTML/CSS/SVG/TypeScript/CoffeeScript/Sass/Stylus/Less/SugarSS/Vue/Elm/JSON/TOML/GraphQL/YAML/GLSL/Pug/MDX/XML
個人的に好きなSvelteも、コミュニティ発のプラグインが公式になる動きもあり対応はまだ増えるかもしれません。
https://github.com/orlov-vo/parcel-transformer-svelte/issues/28
おわりに
Parcel v2はリリースから2ヶ月経っていますが、まだ動きがありそうなので要チェックです。
とはいえ、Viteがかなり強力なので厳しいかもしれません。
おまけ
Svelte作者(Rich Harris)とParcel作者(Devon Govett)の会話（ツイート）
意訳
Rich Harris
Parcelはすげぇらしいけど、エコシステムがなぁ。
いろんなフレームワーク(おそらくNuxt.jsやSvelteKit)がViteを選んでる。
良くも悪くも、このグラフのように無視できない。
Devon Govett
悲しい