BunがViteに勝ちました。
これはBunを推奨する記事ですが、Viteがいらないと言っているわけではありません。
Viteとは
ViteとはWebフロントエンドのビルドツールです。
HTML関係の処理とアセット管理などがあります。
そして開発用にHMRサーバーを立ち上げれたりします。
Bunとは
公式では
A fast all-in-one JavaScript runtime
となっており、まあ要するに爆速NodeJS互換欲張りパックです。
何があるかというと...
- 爆速npm互換パッケージマネージャー
- デフォルトTypeScript・JSX対応
- Postgres・SQLite・S3クライアント
- テストランナー・ハッシュ等の便利API
- Web標準HTTP・WebSocketサーバー
- ホットリロード
などなど。
Bunの進化
BunにはBun.buildというesbuild互換バンドラーが搭載されており、これはとても進化してきました。
その一つとしてHTMLが挙げられます。
なぜかHTMLのバンドルもできるんです。Viteと同じようにそのHTMLが読み込んでいるプログラムをバンドルしてくれます。
それに加えアセット管理機能もちゃんとあって、
特に設定されてないファイル等をインポートするとファイルパスがインポートされます。
import icon from "./assets/icon.svg";
console.log(icon); // "./assets/icon.svg"などになる。コンパイルするといい感じに解決される。
この時点でViteの代替になりうるんですが、Bunにはまだすごい機能があります。
JSX
デフォルトでJSXに対応していて、tsconfig.json等から読んだ設定でコンパイルします。
export const App = () =>
<div>Hello!</div>;
esbuildプラグイン
esbuild互換なのでもちろんesbuildプラグインを使えます。
例えばesbuild-plugin-vue3(Vue SFCプラグイン)やesbuild-svelte(Svelteプラグイン)など。
import esbuildPluginVue3 from "esbuild-plugin-vue3";
Bun.build({
entrypoints: ["./index.html"],
plugins: [esbuildPluginVue3],
outdir: "dist"
})
速い
速いです。esbuildの1.76倍、Viteの内部で使われてるRollupにTerserを追加した場合188倍の速度......恐ろしい
サーバー標準搭載
BunではこのようにHTMLを実行しようとするとそのページのWebサーバーを起動できます。
$ bun index.html
そしてホットリロードは以下のようにできます。
$ bun --hot index.html
プラグインはbunfig.tomlで指定できます。
他にも色々
オーバーキルだな...
Viteと比較
| 論点 | Vite | Bun |
|---|---|---|
| 速度 | △ | ◎ |
| 標準搭載機能 | △ | ◎ |
| アセット管理 | ◎ | ○ |
| 学習難易度 | ○ | △ |
| 依存関係の追加 | 必要 | 不要 |
結論
Bunはすごい。
自分みたいなBunを信仰している人は参考にしてください。
そして速度を求める人も試してみてください。
おまけ：wasm-packでちょっと苦労した
wasm-packが出力したパッケージは以下のような構造になっています。
なのでラッパーにうまくWasmファイルを渡す必要があります。
普段はラッパーがうまく読み込んでくれるのですが、
残念ながらBunのインポートシステムでWebAssemblyをそのままインポートできません。
なのでwasm-packで--target bundlerで出力したパッケージを読み込めません。
--target webはViteが上手く解決してくれましたがBunは上手く解決してくれません。
なので手動で伝える必要があります。
このようにして解決できました。
import wasm from "bge-wasm/wasm"; // WebAssemblyのパス
import init from "bge-wasm/web"; // ラッパー
init(wasm);
以上。