esbuild-deno-loader を使ってみる

esbuild-deno-loader という esbuild 向けのプラグインを使うと、Deno と互換なモジュール解決ルールで、プログラムをバンドルすることが出来ます。

使い道としては、例えば、Deno で動くように書いてあるツール/ライブラリなどを、esbuild-deno-loader でバンドルし、それをブラウザ、Node、Cloudflare Workers など、いろいろなランタイム上で使うというような使い道が考えられます。

筆者は、esbuild-deno-loader でバンドルしたコードを VSCode Extension のカスタムエディター WebView の中に読み込んで、Deno 用のライブラリなどに依存しつつ、カスタムエディタの UI を開発するという使い方をしています。

サンプルリポジトリ
https://github.com/kt3k/vscode-pixeledit

以下では、esbuild-deno-loader の基本的な使い方を紹介します。

import * as esbuild from "npm:esbuild@0.24";
import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@0.11";
import { resolve } from "jsr:@std/path@1";

const result = await esbuild.build({
  plugins: [...denoPlugins({
    configPath: resolve("path/to/deno.json")
  })],
  entryPoints: ["入力ファイル.ts"],
  outfile: "./出力ファイル.js",
  bundle: true,
  format: "esm",
});

console.log(result.outputFiles);

esbuild.stop();

上記サンプルが基本的な使い方です。入力ファイル.ts と 出力ファイル.js の部分は適宜置き換えてください。

上のスクリプトを実行すると、入力ファイル.ts の内容がバンドルされて 出力ファイル.js として書き出されます。ファイル名が表すように、入力ファイルは TypeScript ですが、出力ファイルは JavaScript になることに注意してください。

denoPlugins() という呼び出しで、Deno 互換のリゾルバーとローダーが作成され、それを esbuild に渡しています。configPath というオプションに deno.json の絶対パスを渡していて、これを渡すことで import map の解決が出来るようになります (なお、configPath は絶対パスしか受け付けていないため、@std/path モジュールの resolve 関数で絶対に解決してから渡しています)。

Happy Isomorphic Coding!