esbuildでお手軽にbookmarkletを作る

javascript esbuild

bookmarkletをnpm scriptで簡単に作成できないか検討してみました。

前提

即時関数化

メインの話とはずれますが、
bookmarkletはglobal汚染してしまうので、即時関数化が必要です。
これはJS側に書いておくことにします。
（※即時関数もbookmarklet生成時に追加することは可能ですが、今回やってませんよという話。）

ご参考） IIFE (即時実行関数式) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

minify

esbuildはtsでの利用も可能で軽量なのと、minifyオプションが付いていて簡単に1liner化できます。
今回は、これを利用することにしました。

npm script

shellを書いてもよかったのですが、JSで完結したく、npm scriptでできないか検討しました。 当初 echo -n javascript: & esbuild ... で実施しようとしましたが、 npmでは複数コマンドを実行することができず、少しはまっていました。

最終的に

shell側でnestすることで対応しました。

  "scripts": {
    "bookmarkletize": "echo javascript:$(esbuild --bundle *.js --minify)"
  }