microbundle で custom build

いつもライブラリのカスタムビルドの仕方を忘れるので、メモしておきます。 まず今回カスタムビルドとは <script src="https://hoge.com/fuga.js"> で利用する UMD 形式のライブラリを指します。 最近は <script type="module"> した後に import する ESM 形式も出てきましたが、やはり基本は UMD 形式です。 ESM は UMD を defer して、ちょっと安全にしたようなイメージです。 UMD 形式はレガシーとも言われますが、なんだかんだ使いやすいです。 ただ自分で作ろうとすると、意外とうまく作れない形式でもあります。

そもそもの原因は Webpack というか Node.js です。 ライブラリも大きくなってくると Node.js に起因するパス周りの設定が混沌とするので、そこを Webpack がよしなにやってくれます。 なので UMD 形式のライブラリは、普通なら Webpack を使って作るのが一般的です。 ただ Webpack は事前準備がとにかく面倒なのでなるべく使いたくはありません。 esbuild や swc が UMD 形式をサポートしてくれることに期待していますが、現状ではまだ駄目。 ESM 形式を作りたいなら esbuild --bundle --format=esm fuga.js でいいんですけどね。

結論として、Webpack の設定ファイルがなかったり、自分でカスタマイズしないといけないけど、すぐにビルドしたいような時、今のところ一番簡単そうなのは、microbundle を使う方法です。 以下のコマンドでいけます。

microbundle --name=SugoiPad app.js

UMD ビルドする時にはクラス名 (モジュール名) を付ける必要があるので、 package.json がない場合には --name で名前を付けてあげます。

microbundle を使えば ESM 形式なども同時に作れるので、とても良いです。