Open28

TSのバンドラ・トランスパイラなど

ピン留めされたアイテム
uzmoiuzmoi

色々ありすぎてよくわからないときの選び方

まず前提として

  • フレームワーク(Next.jsなど)を使うならフレームワークに従う。
  • DenoならDenoのものを使う(deno fmt, deno lint, deno test+@std/testing, etc...)

ビルドツール

  1. すでにWebpackを使っていて、Viteへの移行が難しそうならRsbuildかRspackを使う。
  2. DOMを触ったりフロントエンドを作るならViteを使う。
    UIライブラリもlibモードでできる。
  3. その他ライブラリやサーバーサイドなどではtsupを使う。

テストツール

  1. Vitestを使う。

リンタ

  1. ESLintにしかないプラグインやルールを使うならESLintを使う。
    BiomeにもあるルールではBiomeのほうが遥かに速いので併用してもよし。
  2. Biomeを使う。

フォーマッタ

  1. Prettierプラグインやexperimental-ternariesを使うならPrettierを使う。
  2. Prettier/Biomeだと改行のフォーマットが強すぎて嫌という場合はdprintを使う。
  3. リンタにBiomeを使っている場合はBiomeを使う。
  4. PrettierとBiomeはフォーマット結果は大体同じなので好きな方を使う。
uzmoiuzmoi

Vite

rollupとesbuildを使ったバンドラ
TypeScript、JSX、CSS等が最初からサポートされている。
コンフィグファイルもTypeScriptで書ける(defineConfig
開発サーバーも付いている。
開発サーバーではトランスパイルだけしてブラウザにモジュールを読ませているのでHMRが出来て速い。
プラグインはrollupとある程度互換性がある。
ゼロコンフィグで使えるが、viteを使うなら大抵reactとかvueのプラグインを使うのでそこは書く必要がある。
が、コンフィグをTSで書けるし、そもそもコンフィグが書きやすい形なので問題ではない。
libモードでUIライブラリも作れる。

Webフロントの開発するならこれ。
snowpackというのもいたがViteに負けた。

https://ja.vitejs.dev

uzmoiuzmoi

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使いたい。

https://vitest.dev

uzmoiuzmoi

viteは内部でrollupを使っているのだが、rustで書き直したらさらに速くなるのでは?ということでviteのチームによってrollup互換のrolldownというのが作られている。
まだ公開されていないが、vite5のアナウンスを見ると2023年中にソースを公開するとのこと。
ソースが公開されてたりGitHubのorg名がrolldown-rsから変わったりしてたので更新。

https://vitejs.dev/blog/announcing-vite5

https://github.com/rolldown/rolldown

https://rolldown.rs

uzmoiuzmoi

tsup

esbuildを使ったバンドラ。
esbuildと同作者。
ゼロコンフィグで使える。書くにしても超絶簡潔に書けるので楽。
ただし、複雑なことはあんまりできない。
と言っても、大抵はそんな複雑なことしないので、UIじゃない所書くときはもう全部これでいいと思う。
tsupのみで(プラグインなどが不要で)型定義ファイル(.d.ts)を出力できるのが非常に良い。

https://tsup.egoist.dev

uzmoiuzmoi

Turbopack

Next.jsのVercelがwebpackの代わりのバンドラとして開発している。
まだベータ版で、実質next以外で使えない状態?

https://turbo.build/pack

uzmoiuzmoi

Rspack

Turbopackと同じくwebpackの後継を目指しているが、Turbopackよりもwebpackとの互換性を重視している。
babelよりもSWCを使う。
TypeScript、JSX、CSS等に最初から対応している。

https://www.rspack.dev

uzmoiuzmoi

RspackはByteDanceのweb-infra-devの一部。
他にはRspackをwrapして高級にしたRsbuildや静的サイトジェネレータRspressなど。

https://github.com/web-infra-dev

Rsbuildは互換性こそないもののviteにかなり似ていそう。
実際立ち位置的にもRsbuildはRollupに対するViteやwebpackに対するcreate-react-appのようなものっぽい。
https://rsbuild.dev/guide/start/index
https://lib.rsbuild.dev/guide/start/index

https://zenn.dev/keita_hino/scraps/849e140e3664f2

uzmoiuzmoi

Babel

最王手トランスパイラ
エコシステムが一番でかくてなんでもできる。
実行速度はesbuildやswcがある今となっては遅い。

https://babel.dev

uzmoiuzmoi

sucrase

色々と成約を設けることで超高速で変換するトランスパイラ。
TypeScript製だが、esbuildやswcよりも速いらしい。

https://sucrase.io

uzmoiuzmoi

bun

bunはバンドラの機能もついている。
まだ機能が少ないかも(https://bun.sh/docs/bundler/vs-esbuildにもNot supportedがちらほらある)
プラグインのAPIが強そう。
macro機能とかあってbunって感じがする。

https://bun.sh/docs/bundler

uzmoiuzmoi

macro使ったらcss-in-jsとか割と簡単にできそうと思ってくっそ雑にPoC書いてみたけど、constとリテラルの値の変数をmacroの引数に渡そうとしたらセグフォった。
https://bun.sh/docs/bundler/macros#argumentsにできるって書いてあるはずなんだけどな。
まあ前提としてるimport attribute proposalがStage 3だし、まだ実験的な機能ってことでしょうきっと。
でも大方ちゃんと動いたし普通にviteとかでも使いたい(それをしてるのがcss-in-jsのプラグインなのだが)

uzmoiuzmoi

ncc

vercel製のバンドラ(コンパイラ?)
ドキュメントはreadmeだけっぽい。
ゼロコンフィグでオプションがだいぶ少ない。
サブコマンドにrunがあるのでts-node的な使い方もできる?

https://github.com/vercel/ncc

uzmoiuzmoi

Oxc

Rust製ツールチェイン基盤
速さをめちゃくちゃ意識してる感じがある。
パーサーがSWCの3倍早いらしい。

https://oxc.rs

uzmoiuzmoi

Farm

Vite互換のRust製バンドラ。
Rsbuildよりも速いらしい。
Vite/Rollupのプラグインとfarm用Rustプラグインが使える。

https://www.farmfe.org/