バンドル

既定では、Wrangler は esbuild ↗ を使って Worker コードをバンドルします。そのため、package.json に定義した npm ↗ からのモジュールインポートが組み込みで使えます。Wrangler が Cloudflare へアップロードする正確なコードを確認するには、npx wrangler deploy --dry-run --outdir dist を実行します。Wrangler のバンドル後の Worker コードが表示されます。

Worker コードのバンドルは、複数のモジュールを 1 つのファイルにまとめます。 バンドルへ直接インライン化できないモジュールがあることもあります。 たとえば、Wasm ファイルを JavaScript の Worker へバンドルする代わりに、実行時にインポートできる別モジュールとしてアップロードしたい場合があります。 Wrangler は、次のファイル種別を既定でサポートします。

これらのファイル種別をカスタマイズするには、バンドルの設定 を参照してください。

たとえば次のインポートでは、text は example.txt の内容を含む文字列になります。

import text from "./example.txt";

Wasm のインポートも同じ仕組みです。次の例を参照してください。

import wasm from "./example.wasm";

// Instantiate Wasm modules in the module scope
const instance = await WebAssembly.instantiate(wasm);

export default {
	fetch() {
		const result = instance.exports.exported_func();

		return new Response(result);
	},
};

設定ファイルで find_additional_modules を true にすると、Wrangler は base_dir 以下のファイルツリーを走査します。 定義した rules に一致するファイルも、バンドルされない外部モジュールとしてデプロイする Worker に含まれます。

この方法は、大きいファイルや動的インポートする JavaScript ファイルの遅延読み込みに役立ちます。

• 通常、遅延インポートする大きなファイル（たとえば await import("./large-dep.mjs")）はエントリポイントへ直接バンドルされ、遅延読み込みの効果が下がります。 一致するルールを rules に追加すると、このファイルは実際にインポートされた実行時にだけ読み込まれ、実行されます。
• 以前は、変数ベースの動的インポート（たとえば await import(`./lang/${language}.mjs`)）は、アップロードに含めるモジュールを Wrangler が判断できず、実行時に必ず失敗していました。 { "type": "EsModule", "globs": ["./lang/**/*.mjs"], "fallthrough": true } のように、これらのファイルすべてに一致するルールを指定すると、実行時にモジュールを利用できます。
• find_additional_modules が true で、ソースファイルが設定した rules のいずれかに一致する場合は、「部分バンドル」が使えます。Wrangler はそのファイルを「external」として扱い、エントリポイントファイルへバンドルしません。

process.env.NODE_ENV はビルド時に、次のいずれかの値へ静的に置き換えられます。

process.env.NODE_ENV を使い、ビルドの文脈に応じてコードを条件実行できます。

if (process.env.NODE_ENV === "development") {
	console.log("Running in development mode");
}

process.env.NODE_ENV はビルド時に置き換わるため、開発専用のコードは本番バンドルから削除できます。

コマンド実行時に NODE_ENV 環境変数を設定すると、既定値を上書きできます。

NODE_ENV=staging npx wrangler dev

NODE_ENV=staging yarn wrangler dev

NODE_ENV=staging pnpm wrangler dev

Wrangler は package.json の 条件付き exports フィールド ↗ を尊重します。これにより、動いている JavaScript ランタイムに応じて実装を変えるライブラリを作れます。バンドル時、Wrangler は workerd キー ↗ の読み込みを試みます。ランタイムごとに実装を切り替えるパッケージの例は、Wrangler リポジトリの サンプル ↗ を参照してください。

ビルドツールが、Cloudflare へ直接デプロイできる成果物をすでに出している場合は、--no-bundle コマンドラインフラグでバンドルをオプトアウトできます。npx wrangler deploy --no-bundle です。バンドルをオプトアウトすると、Wrangler はコードを処理しません。ミニファイやポリフィルの注入など、Wrangler のバンドルが導入する機能は使えなくなります。

wrangler dev と wrangler deploy で Wrangler がバンドルして Cloudflare のグローバルネットワークへアップロードする内容をカスタマイズするには、カスタムビルド を使います。

一部のフレームワークツールやカスタムの事前ビルド処理は、Worker コードのデプロイに使う変更済みの Wrangler 設定を生成します。 Wrangler は、元のユーザー設定ではなく、この生成された設定を自動で使えることがあります。

詳細は 生成された Wrangler 設定 を参照してください。