LoginSignup
1
0

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-04-06

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.jsontasks を記述することでカスタムコマンドを定義できます:

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0