ビルドツールざっくり調べた

DiscordのBOTを作る上でビルドツールをどうしようかと思いビルドツールの比較検討をしている。

Native ESM 時代のフロントエンドビルドツールの動向

一年ちょっと前の記事だけどこれを基準に考えていこうと思っている。

• Vite
  • はじめに | Vite
  • 高速なHMRとNative ESMを利用した拡張機能
  • バンドルはRollup
• Snowpack
  • Snowpack
  • メンテ行ってないので新規プロジェクトへの導入は非推奨らしい
• Rollup
  • rollup.js
  • rollup.jsに爆速esbuildを組み込む方法というのもあるみたい
• esbuild
  • esbuild - An extremely fast JavaScript bundler
  • An extremely fast JavaScript bundlerとあるのでバンドラー？
  • [Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない | Kabuku Developers Blog
  • と思ったらesbuildだけでトランスパイルもバンドルもミニファイもできるらしい
• swc
  • Rust-based platform for the Web – SWC
  • コンパイルとバンドル両方に使えると書いてある

ここらへん。

記事を見るまで、そもそもビルドツールとひとくくりにしていたがバンドルツールかコンパイラ(トランスパイラ)かでそもそも違うし、そこらへんの認識から曖昧だった。

この記事のESM CDNのskypack.devとesm.shで、

どちらもアクセス時に cloudflare workers を挟んでいて、 cache がなければ edge 上でビルドし、 KV Workers の edge cache に保存する(のでビルドされていないファイルを呼ぶと初回アクセスが遅い)。こういうところに cloudflare workers の使い道があるのが面白い。

ここでもCloudflare Workersが使われているらしい。

どれを使うか

どれを使うかが悩ましくて、そもそも自分の中に判断基準が存在していないのが原因。

最近名前をよく聞くのはesbuildなので気になっていたけど、名前を聞くだけとかじゃなくてそれぞれの特性を調べて見ていきたい。

Vite

• No Bundleツール
• 開発時はバンドルしないでESMのimportからソースコードを読み込むことで開発環境のビルドを高速にする
• プロダクションビルドにはRollupを使う
• TypeScriptのサポートはファイルのトランスパイルのみで型チェックを行わない

Rollup

• ちょっと古いけどイマドキは Webpack じゃなくて Rollup だ！Terser とともに Rollup を使ってみる - Neo's World
• ViteやSnowpackのプロダクションビルドに使われてる
• No Bundleじゃないので開発環境のビルドはViteに比べたら遅そう

esbuild

• コンパイルもバンドルもミニファイもできるらしい
• 爆速らしい
• TypeScriptの型チェックは行われない
  • 別でtscをnoEmitで実行する必要がある
• ソースコードの変更監視が行われない
  • 別途saneなどのツールを使う
  • amasad/sane: sane aims to be fast, small, and reliable filesystem watcher. No bells and whistles, just change events.

swc

• コンパイルとバンドルができる
  • ミニファイはできない？
• esbuildと同じくTypeScriptの型チェックは行われない

どれにしよう

悩ましいけど個人的に一番気になっているesbuildを使ってみようかな。

ビルドの早さはesbuildとswcがかなりいい勝負をしているっぽい。

型チェックや変更監視などの整備をしつつesbuildを使い、使ってみたら今度はswcも使ってみたい。