Open22

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

rizzzserizzzse

Vite

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

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

https://ja.vitejs.dev

rizzzserizzzse

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

rizzzserizzzse

tsup

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

https://tsup.egoist.dev

rizzzserizzzse

Turbopack

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

https://turbo.build/pack

rizzzserizzzse

Rspack

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

https://www.rspack.dev

rizzzserizzzse

Babel

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

https://babel.dev

rizzzserizzzse

sucrase

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

https://sucrase.io

rizzzserizzzse

bun

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

https://bun.sh/docs/bundler

rizzzserizzzse

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

rizzzserizzzse

ncc

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

https://github.com/vercel/ncc