esbuild とは、Go で書かれた速くてシンプルな JavaScript のバンドラーです。
この記事では、esbuild を使って TypeScript のコンパイルを行う方法について紹介します。
ご存知の通り、TypeScript は JavaScript に型を付けた言語で、コードの品質や保守性を高めることができますが、TypeScript を実行するには一度 JavaScript への変換が必要です。
変換するにはコンパイラが必要ですが、プロジェクトの規模によってはコンパイルにかなりの時間がかかることがあります。esbuild は TypeScript のコンパイルを一瞬で行うことができるので、開発体験を大幅に高められます。
esbuild のインストール
まず、npm を使って esbuild をインストールします。
$ npm install -g esbuildインストールが完了したら、esbuild のバージョンを確認してみましょう。バージョンが表示されたら、正常にインストールできています。
$ esbuild --version
0.18.10グローバルにインストールしたくない場合は、以下のように -g オプションを外すことでローカルにインストールすることもできます。
$ npm install esbuildローカルにインストールした場合は、以下のようにフルパスで esbuild を呼び出す必要があります。
$ ./node_modules/.bin/esbuild --version
0.18.10TypeScript のコンパイル
次に、esbuild を使って TypeScript ファイルをコンパイルしてみます。
以下のようなコードを input_typescript.ts というファイルに保存します。
let message: string = "Hello, esbuild!";
console.log(message);CLI を使って TypeScript をコンパイルします。
$ esbuild input_typescript.ts --outfile=output.js --bundle --loader:.ts=ts
output.js 99b Done in 7msコンパイルしたファイルの内容を確認してみましょう。
(() => {
// input_typescript.ts
var message = "Hello, esbuild!";
console.log(message);
})();esbuild コマンドは input_typescript.ts (ファイル名) を引数として受け取ります。これをエントリーポイントと呼びます。エントリーポイントにはプログラムの開始ファイル (ex. index.ts) を指定します。
outfile オプションには出力ファイルを指定します。このオプションを省略すると、コンパイル結果は stdout に出力されます。
loader オプションは TypeScript の拡張子を読み込むためのものですが、このオプションは省略できます。省略した場合、esbuild がファイル拡張子から一致するローダーを自動で読み込んでくれます。
bundle オプションを付けると、すべての依存関係を出力ファイルにインライン化して埋め込みます。わかりにくいと思うので具体的に解説します。以下のようなファイル (main.ts) を作成します。
import { SayHello } from "./library";
SayHello();main.ts ファイルは library.ts から SayHello をインポートしています。library.ts の内容は以下の通りです。
export function SayHello() {
console.log("Hello, esbuild!");
}bundle オプションを使わない場合、依存関係をただインポートするだけになります。
$ esbuild main.ts
import { SayHello } from "./library";
SayHello();が、bundle オプションを使うと、library.ts の内容がインライン化されます。
$ esbuild main.ts --bundle
(() => {
// library.ts
function SayHello() {
console.log("Hello, esbuild!");
}
// main.ts
SayHello();
})();このように、esbuild を使うと TypeScript ファイルを簡単にバンドルできます。
しかし、注意点があります。esbuild は TypeScript を JavaScript にコンパイルすることはできますが、型チェックは行われません。
型チェックや型宣言ファイルの生成は、標準の tsc を特定のオプションを指定して実行することで対応できます。その方法については以下で説明しています。
型チェックと型宣言ファイルの生成
esbuild は TypeScript のコンパイルを高速に行いますが、その代償として型チェックや型宣言ファイルの生成をサポートしません。これらの機能は TypeScript コンパイラが提供するものですが、TypeScript コンパイラはコンパイルに時間がかかることがあります。そこで、TypeScript コンパイラを noEmit モードで実行することで、コンパイルをスキップして型チェックや型宣言ファイルの生成だけを行うことができます。
noEmit モードを使うには、tsconfig.json ファイルに以下のような設定を追加します。
{
"compilerOptions": {
"noEmit": true,
"declaration": true, // これは型定義を生成する場合のみ
"outDir": "dist"
}
}noEmit オプションはコンパイルをスキップするものです。declaration オプションは型宣言ファイルを生成するものです。outDir オプションは出力ディレクトリを指定するものです。これらのオプションを設定したら、以下のように TypeScript コンパイラを実行します。
$ tsc --project tsconfig.jsonこれで、dist ディレクトリに型宣言ファイルが生成されます。例えば、以下のようなコードを input_typescript.ts というファイルに保存した場合、
export let message: string = "Hello, esbuild!";dist/input_typescript.d.ts というファイルに以下のような内容が生成されます。
export declare let message: string;このように、esbuild と TypeScript コンパイラを併用することで、高速なコンパイルと正確な型チェックや型宣言ファイルの生成を両立できます。
まとめ
この記事では、esbuild を使って TypeScript のコンパイルを行う方法について紹介しました。esbuild は Go で書かれた高速でシンプルな JavaScript バンドラーです。TypeScript のコンパイルに時間がかかる問題を解決することができます。しかし、esbuild は型チェックや型宣言ファイルの生成をサポートしません。これらの機能は TypeScript コンパイラを noEmit モードで実行することで対応できます。
コメント