WebAssembly 版 esbuild を使って Deno で JavaScript を Minify する

esbuild の公式が推奨している方法ではインストール時に Node.js と npm が必要ですが、WebAssembly 版を使用する場合は Node.js も npm も不要です。

ただし、WebAssembly 版はネイティブ版より esbuild の実行速度が遅くなることに注意が必要です。

本記事では説明しませんが、他の方法として実行バイナリを直接ダウンロードすることもできます。

参考「esbuild - Getting Started」

1. 例

下記のコードがあるとします:

src/main.js

const divElement = document.createElement('p');

divElement.textContent = 'うさぎさん';
divElement.style = 'height: 64px; background-color: #fde;';

document.body.appendChild(divElement);

scripts/minify.js

import * as esbuild from 'https://deno.land/x/esbuild@v0.17.15/wasm.js';

const code = await Deno.readTextFile('./src/main.js');

const result = await esbuild.transform(code, { minify: true, format: 'iife', charset: 'utf8' });

for (const warning of result.warnings) {
	console.warn(warning);
}

await Deno.writeTextFile('./dist/main.min.js', result.code);

esbuild.stop();

参考「Transform - esbuild - API」
参考「Minify - esbuild - API」

上記のコードがある状態で以下のようなコマンドで Deno を実行すると Minify できます:

deno run --allow-read=./src --allow-write=./dist --allow-net=deno.land scripts/minify.js

実行結果は以下のようになります:

dist/main.min.js

(()=>{const e=document.createElement("p");e.textContent="うさぎさん";e.style="height: 64px; background-color: #fde;";document.body.appendChild(e);})();

Deno から esbuild を利用する場合、実行終了したいタイミングで esbuild.stop() を呼ぶ必要があります。

参考「Deno instead of node - esbuild - Getting Started」

ここでは WEB ブラウザ向けのモジュールでない JavaScript コードにするため、フォーマットを iife にしています。

参考「Format - esbuild - API」

ちなみに esbuild で文字コード charset の設定をしないとコード中の文字列が Unicode エスケープされますが、ここでは Unicode エスケープしないために文字コードを utf8 に設定しています。

参考「Charset - esbuild - API」

2. Deno でカスタムコマンドを定義する

deno.json に tasks を記述することでカスタムコマンドを定義できます:

deno.json

{
	"tasks": {
		"minify": "deno run --allow-read=./src --allow-write=./dist --allow-net=deno.land scripts/minify.js"
	}
}

deno task minify

参考「deno task | Manual | Deno」