TSのバンドラ・トランスパイラなど
色々ありすぎてよくわからないときの選び方
まず前提として
- フレームワーク(Next.jsなど)を使うならフレームワークに従う。
- DenoならDenoのものを使う(deno fmt, deno lint, deno test+@std/testing, etc...)
ビルドツール
- すでにWebpackを使っていて、Viteへの移行が難しそうならRsbuildかRspackを使う。
- DOMを触ったりフロントエンドを作るならViteを使う。
UIライブラリもlibモードでできる。 - その他ライブラリやサーバーサイドなどではtsupを使う。
テストツール
- Vitestを使う。
リンタ
- ESLintにしかないプラグインやルールを使うならESLintを使う。
BiomeにもあるルールではBiomeのほうが遥かに速いので併用してもよし。 - Biomeを使う。
フォーマッタ
- Prettierプラグインやexperimental-ternariesを使うならPrettierを使う。
- Prettier/Biomeだと改行のフォーマットが強すぎて嫌という場合はdprintを使う。
- リンタにBiomeを使っている場合はBiomeを使う。
- PrettierとBiomeはフォーマット結果は大体同じなので好きな方を使う。
Vite
rollupとesbuildを使ったバンドラ
TypeScript、JSX、CSS等が最初からサポートされている。
コンフィグファイルもTypeScriptで書ける(defineConfig
)
開発サーバーも付いている。
開発サーバーではトランスパイルだけしてブラウザにモジュールを読ませているのでHMRが出来て速い。
プラグインはrollupとある程度互換性がある。
ゼロコンフィグで使えるが、viteを使うなら大抵reactとかvueのプラグインを使うのでそこは書く必要がある。
が、コンフィグをTSで書けるし、そもそもコンフィグが書きやすい形なので問題ではない。
libモードでUIライブラリも作れる。
Webフロントの開発するならこれ。
snowpackというのもいたがViteに負けた。
vitestでテストが書けて既にjestより便利だと思う。
テスト用にわざわざコンフィグを書かなくていいのが良い。
アサーションがjest(Jasmine?)より充実していて(Chaiのアサーションも使えるのもある)、型のテストが書けたり、bench
でベンチマークが出来たりする。
vitestというかviteというかrollupがesmoduleを前提としているので、そこで引っかかることがない。
(jestだと"type": "module"
のパッケージを読み込むのにCommonJSへの変換が要る。 https://amitd.co/blog/swc-jest-with-typescript-react-and-esm-modules)
テストのエコシステムがjestを前提としていることが多いので(互換性はあるものの)ごく稀に躓く。
もはやバックエンドとかライブラリのテストにもjestじゃなくてvitest使いたい。
viteは内部でrollupを使っているのだが、rustで書き直したらさらに速くなるのでは?ということでviteのチームによってrollup互換のrolldownというのが作られている。
まだ公開されていないが、vite5のアナウンスを見ると2023年中にソースを公開するとのこと。
ソースが公開されてたりGitHubのorg名がrolldown-rsから変わったりしてたので更新。
tsup
esbuildを使ったバンドラ。
esbuildと同作者。
ゼロコンフィグで使える。書くにしても超絶簡潔に書けるので楽。
ただし、複雑なことはあんまりできない。
と言っても、大抵はそんな複雑なことしないので、UIじゃない所書くときはもう全部これでいいと思う。
tsupのみで(プラグインなどが不要で)型定義ファイル(.d.ts
)を出力できるのが非常に良い。
追加の設定をしなくてもデフォルトでかゆいところに手が届いてる感じ。
formatだけデフォルトでesmにして欲しさはある。
Parcel
こちらもゼロコンフィグ。
殆ど使ったことがないのでわからん。
Turbopack
Next.jsのVercelがwebpackの代わりのバンドラとして開発している。
まだベータ版で、実質next以外で使えない状態?
Rspack
Turbopackと同じくwebpackの後継を目指しているが、Turbopackよりもwebpackとの互換性を重視している。
babelよりもSWCを使う。
TypeScript、JSX、CSS等に最初から対応している。
RspackはByteDanceのweb-infra-devの一部。
他にはRspackをwrapして高級にしたRsbuildや静的サイトジェネレータRspressなど。
Rsbuildは互換性こそないもののviteにかなり似ていそう。
実際立ち位置的にもRsbuildはRollupに対するViteやwebpackに対するcreate-react-appのようなものっぽい。
https://rsbuild.dev/guide/start/index
https://lib.rsbuild.dev/guide/start/index
バンドラのダウンロード数
esbuildはトランスパイラとしても使えて他のツールに組み込まれているのでダウンロード数が多い。
RollupもViteの中で使われているのでViteと一緒に伸びている。
SWC
Rust製トランスパイラ
swcpackというバンドラを開発中らしい。
Babel
最王手トランスパイラ
エコシステムが一番でかくてなんでもできる。
実行速度はesbuildやswcがある今となっては遅い。
tsc
本家本元のTypeScriptトランスパイラ
型チェックをするので非常に遅い。
sucrase
色々と成約を設けることで超高速で変換するトランスパイラ。
TypeScript製だが、esbuildやswcよりも速いらしい。
bun
bunはバンドラの機能もついている。
まだ機能が少ないかも(https://bun.sh/docs/bundler/vs-esbuildにもNot supportedがちらほらある)
プラグインのAPIが強そう。
macro機能とかあってbunって感じがする。
macro使ったらcss-in-jsとか割と簡単にできそうと思ってくっそ雑にPoC書いてみたけど、constとリテラルの値の変数をmacroの引数に渡そうとしたらセグフォった。
https://bun.sh/docs/bundler/macros#argumentsにできるって書いてあるはずなんだけどな。
まあ前提としてるimport attribute proposalがStage 3だし、まだ実験的な機能ってことでしょうきっと。
でも大方ちゃんと動いたし普通にviteとかでも使いたい(それをしてるのがcss-in-jsのプラグインなのだが)
ncc
vercel製のバンドラ(コンパイラ?)
ドキュメントはreadmeだけっぽい。
ゼロコンフィグでオプションがだいぶ少ない。
サブコマンドにrunがあるのでts-node的な使い方もできる?
Oxc
Rust製ツールチェイン基盤
速さをめちゃくちゃ意識してる感じがある。
パーサーがSWCの3倍早いらしい。
Farm
Vite互換のRust製バンドラ。
Rsbuildよりも速いらしい。
Vite/Rollupのプラグインとfarm用Rustプラグインが使える。