この記事ははじめてのアドベントカレンダー2024の10日目の記事です。
多くの人の目に入って作業を効率化してほしいと思って登録しました。
よろしくお願いします。
はじめに
JavaScript・TypeScriptでサイトやライブラリを作っているみなさん。
バンドラーは何を使っているでしょうか。
Rollup？webpack？それともVite？
私は完璧な物を見つけました。esbuildです。
ということで今回はesbuildの個人的なメリット・デメリットを紹介します。
メリット
速い
とにかく速いです。Rollupでは1~2秒かかっていたのが
esbuildでは0.数秒でした。本当に一瞬でした。
GitHub Actionsでビルドして公開する方なら無料枠の節約になるのではないでしょうか。
TypeScript対応
typescriptやrollup-plugin-typescriptのようなプラグインを入れずとも
デフォルトでTypeScriptに対応しています！！！！！
ミニファイも可
これもTypeScriptと同じくプラグイン無しでミニファイが可能です！！！！！
コマンド・JavaScriptどちらからもバンドルが可能
例えばこのように
$ esbuild --bundle entry_point.js --outdir=dist --minify
というようにコマンドラインでバンドルすることも出来れば、
import esbuild from "esbuild";
esbuild.build({ //Promiseを返します。これなら並行処理が可能なので便利ですね
entryPoints: ["src/entry.ts"],
bundle: true,
outfile: "dist/main.js",
minify: false,
sourcemap: false,
format: "esm"
})
というようにJavaScriptからバンドルも可能です。
このような特性から、設定ファイルが不要というのもありますね。
バンドル時にファイル名も出力する
バンドル時にファイル名が以下のように出力されます。
// node_modules/bge-compiler/dist/compiler.js
var n = [];
....
// src/utils/sutil.ts
var sutil = N();
var isEqual = g("isequal", (addr00, addr01, addr10, addr11, val0, val1) => {
....
しかしnode_modulesがファイルパスそのままなのがちょっとわかりずらいかもしれません。
デメリット
バンドルの出力形式が少ない(?)
esbuildがデフォルトで対応しているバンドル形式は
esモジュール・Commonjs・即時関数の3つのみで、
AMDやSystemJSやUMDは対応していません。十分すぎる気がしますが。
あとAMDで出力するプラグインはあったりするようです。
変数名等が短縮される
Rollupではterserを使わなければ変数名はほぼソースコードのままにすることが可能ですが、
esbuildではminifyオプションを有効にしていなくても変数名が短縮されてしまいます。
終わりに
esbuildのメリット・デメリットを(独断で)紹介しましたが、
やはりTypeScript対応でバンドルが速く、ミニファイも速いため、
開発パフォーマンスの向上やGitHub actionsの無料枠の温存のためにもぜひ使ってみてください。