Bun JS ローダー

Bun バンドラーは、すぐに使用できる一連のデフォルトローダーを実装しています。

経験則として：バンドラーとランタイムはどちらも、同じファイルタイプのセットをすぐにサポートしています。

.js .cjs .mjs .mts .cts .ts .tsx .jsx .css .json .jsonc .toml .yaml .yml .txt .wasm .node .html .sh

Bun はファイル拡張を使用して、ファイルの解析に使用する組み込みローダーを決定します。すべてのローダーには、js、tsx、json などの名前があります。これらの名前は、カスタムローダーで Bun を拡張するプラグインをビルドするときに使用されます。

'type' インポート属性を使用して、使用するローダーを明示的に指定できます。

import my_toml from "./my_file" with { type: "toml" };
// または動的インポートで使用
const { default: my_toml } = await import("./my_file", { with: { type: "toml" } });

組み込みローダー

`js`

JavaScript ローダー。 .cjs と .mjs のデフォルト。

コードを解析し、デッドコード削除やツリーシェイクなどのデフォルト変換を適用します。Bun は現時点で構文をダウングレードしようとはしないことに注意してください。

`jsx`

JavaScript + JSX ローダー。 .js と .jsx のデフォルト。

js ローダーと同じですが、JSX 構文がサポートされています。デフォルトでは、JSX はプレーンな JavaScript にダウングレードされます。この処理方法は、tsconfig.json の jsx* コンパイラーオプションに依存します。詳細については、TypeScript の JSX に関するドキュメントを参照してください。

`ts`

TypeScript ローダー。 .ts、.mts、.cts のデフォルト。

すべての TypeScript 構文を削除し、js ローダーと同じ動作をします。Bun は型チェックを実行しません。

`tsx`

TypeScript + JSX ローダー。 .tsx のデフォルト。

TypeScript と JSX の両方をバニラ JavaScript にトランスパイルします。

`json`

JSON ローダー。 .json のデフォルト。

JSON ファイルを直接インポートできます。

import pkg from "./package.json";
pkg.name; // => "my-package"

バンドル中、解析された JSON は JavaScript オブジェクトとしてバンドルにインライン化されます。

const pkg = {
  name: "my-package",
  // ... その他のフィールド
};

pkg.name;

.json ファイルがエントリーポイントとしてバンドラーに渡された場合、解析されたオブジェクトを export default する .js モジュールに変換されます。

json

{
  "name": "John Doe",
  "age": 35,
  "email": "johndoe@example.com"
}

export default {
  name: "John Doe",
  age: 35,
  email: "johndoe@example.com",
};

`jsonc`

コメント付き JSON ローダー。 .jsonc のデフォルト。

JSONC（コメント付き JSON）ファイルを直接インポートできます。Bun はコメントと末尾のカンマを削除して解析します。

import config from "./config.jsonc";
console.log(config);

バンドル中、解析された JSONC は json ローダーと同じように JavaScript オブジェクトとしてバンドルにインライン化されます。

var config = {
  option: "value",
};

NOTE

Bun は `tsconfig.json`、`jsconfig.json`、`package.json`、`bun.lock` ファイルに対して自動的に `jsonc` ローダーを使用します。

`toml`

TOML ローダー。 .toml のデフォルト。

TOML ファイルを直接インポートできます。Bun は高速なネイティブ TOML パーサーで解析します。

import config from "./bunfig.toml";
config.logLevel; // => "debug"

// インポート属性経由：
// import myCustomTOML from './my.config' with {type: "toml"};

バンドル中、解析された TOML は JavaScript オブジェクトとしてバンドルにインライン化されます。

var config = {
  logLevel: "debug",
  // ...その他のフィールド
};
config.logLevel;

.toml ファイルがエントリーポイントとして渡された場合、解析されたオブジェクトを export default する .js モジュールに変換されます。

toml

name = "John Doe"
age = 35
email = "johndoe@example.com"

export default {
  name: "John Doe",
  age: 35,
  email: "johndoe@example.com",
};

`yaml`

YAML ローダー。 .yaml と .yml のデフォルト。

YAML ファイルを直接インポートできます。Bun は高速なネイティブ YAML パーサーで解析します。

import config from "./config.yaml";
console.log(config);

// インポート属性経由：
import data from "./data.txt" with { type: "yaml" };

バンドル中、解析された YAML は JavaScript オブジェクトとしてバンドルにインライン化されます。

var config = {
  name: "my-app",
  version: "1.0.0",
  // ...その他のフィールド
};

.yaml または .yml ファイルがエントリーポイントとして渡された場合、解析されたオブジェクトを export default する .js モジュールに変換されます。

yaml

name: John Doe
age: 35
email: johndoe@example.com

export default {
  name: "John Doe",
  age: 35,
  email: johndoe@example.com",
};

`text`

テキストローダー。 .txt のデフォルト。

テキストファイルの内容が読み取られ、文字列としてバンドルにインライン化されます。テキストファイルを直接インポートできます。ファイルは読み取られて文字列として返されます。

import contents from "./file.txt";
console.log(contents); // => "Hello, world!"

// html ファイルをテキストとしてインポートするには
// "type" 属性を使用してデフォルトのローダーをオーバーライドできます。
import html from "./index.html" with { type: "text" };

ビルド中に参照されると、内容は文字列としてバンドルにインライン化されます。

var contents = `Hello, world!`;
console.log(contents);

.txt ファイルがエントリーポイントとして渡された場合、ファイルの内容を export default する .js モジュールに変換されます。

txt

Hello, world!

export default "Hello, world!";

`napi`

ネイティブアドオンローダー。 .node のデフォルト。

ランタイムでは、ネイティブアドオンを直接インポートできます。

import addon from "./addon.node";
console.log(addon);

NOTE

バンドラーでは、`.node` ファイルはファイルローダーで処理されます。

`sqlite`

SQLite ローダー。 with { "type": "sqlite" } インポート属性が必要です。

ランタイムとバンドラーで、SQLite データベースを直接インポートできます。これにより、bun:sqlite を使用してデータベースが読み込まれます。

import db from "./my.db" with { type: "sqlite" };

デフォルトでは、データベースはバンドルの外部にあります（他の場所で読み込まれたデータベースを使用できるようにするため）、ディスク上のデータベースファイルは最終出力にバンドルされません。

"embed" 属性でこの動作を変更できます：

// データベースをバンドルに埋め込む
import db from "./my.db" with { type: "sqlite", embed: "true" };

`html`

HTML ローダー。 .html のデフォルト。

html ローダーは HTML ファイルを処理し、参照されているアセットをバンドルします。以下を行います：

参照された JavaScript ファイルをバンドルしてハッシュ化（<script src="...">）
参照された CSS ファイルをバンドルしてハッシュ化（<link rel="stylesheet" href="...">）
参照された画像をハッシュ化（<img src="...">）
外部 URL を保持（デフォルトでは、http:// または https:// で始まるもの）

例えば、この HTML ファイルが与えられた場合：

html

<!DOCTYPE html>
<html>
  <body>
    <img src="./image.jpg" alt="ローカル画像" />
    <img src="https://example.com/image.jpg" alt="外部画像" />
    <script type="module" src="./script.js"></script>
  </body>
</html>

バンドルされたアセットを持つ新しい HTML ファイルを出力します：

html

<!DOCTYPE html>
<html>
  <body>
    <img src="./image-HASHED.jpg" alt="ローカル画像" />
    <img src="https://example.com/image.jpg" alt="外部画像" />
    <script type="module" src="./output-ALSO-HASHED.js"></script>
  </body>
</html>

内部では、lol-html を使用してスクリプトとリンクタグをエントリーポイントとして抽出し、その他のアセットを外部として処理します。

サポートされている HTML セレクターのリスト

現在、セレクターのリストは次のとおりです：

audio[src]
iframe[src]
img[src]
img[srcset]
link:not([rel~='stylesheet']):not([rel~='modulepreload']):not([rel~='manifest']):not([rel~='icon']):not([rel~='apple-touch-icon'])[href]
link[as='font'][href], link[type^='font/'][href]
link[as='image'][href]
link[as='style'][href]
link[as='video'][href], link[as='audio'][href]
link[as='worker'][href]
link[rel='icon'][href], link[rel='apple-touch-icon'][href]
link[rel='manifest'][href]
link[rel='stylesheet'][href]
script[src]
source[src]
source[srcset]
video[poster]
video[src]

NOTE

異なるコンテキストでの HTML ローダーの動作

html ローダーは、使用方法に応じて異なる動作をします：

静的ビルド：bun build ./index.html を実行すると、Bun はすべてのアセットをバンドルしてハッシュ化した静的サイトを生成します。
ランタイム：bun run server.ts（server.ts が HTML ファイルをインポート）を実行すると、Bun は開発中にオンザフライでアセットをバンドルし、ホットモジュールリプレースメントなどの機能を有効にします。
フルスタックビルド：bun build --target=bun server.ts（server.ts が HTML ファイルをインポート）を実行すると、インポートは Bun.serve が本番環境で事前バンドルされたアセットを効率的に提供するために使用するマニフェストオブジェクトに解決されます。

`css`

CSS ローダー。 .css のデフォルト。

CSS ファイルを直接インポートできます。バンドラーは CSS ファイルを解析してバンドルし、@import 文と url() 参照を処理します。

import "./styles.css";

バンドル中、インポートされたすべての CSS ファイルは、出力ディレクトリ内の単一の .css ファイルにバンドルされます。

css

.my-class {
  background: url("./image.png");
}

`sh`

Bun Shell ローダー。 .sh ファイルのデフォルト。

このローダーは Bun Shell スクリプトの解析に使用されます。Bun 自体の起動時にのみサポートされているため、バンドラーまたはランタイムでは使用できません。

bash

bun run ./script.sh

`file`

ファイルローダー。 すべての認識されていないファイルタイプのデフォルト。

ファイルローダーは、インポートされたファイルへのパス/URL としてインポートを解決します。メディアまたはフォントアセットを参照するためによく使用されます。

// logo.ts
import logo from "./logo.svg";
console.log(logo);

ランタイムでは、Bun は logo.svg ファイルが存在することを確認し、ディスク上の logo.svg の場所への絶対パスに変換します。

bash

bun run logo.ts
# 出力：/path/to/project/logo.svg

バンドラーでは、少し異なります。ファイルはそのまま outdir にコピーされ、インポートはコピーされたファイルを指す相対パスとして解決されます。

// 出力
var logo = "./logo.svg";
console.log(logo);

publicPath の値が指定されている場合、インポートはその値をプレフィックスとして使用して絶対パス/URL を構築します。

パブリックパス	解決されたインポート
`""`（デフォルト）	`/logo.svg`
`"/assets"`	`/assets/logo.svg`
`"https://cdn.example.com/"`	`https://cdn.example.com/logo.svg`

NOTE

コピーされたファイルの場所とファイル名は、`naming.asset` の値によって決定されます。

このローダーはそのまま outdir にコピーされます。コピーされたファイルの名前は naming.asset の値を使用して決定されます。

組み込みローダー ​

js ​

jsx ​

ts ​

tsx ​

json ​

jsonc ​

toml ​

yaml ​

text ​

napi ​

sqlite ​

html ​

サポートされている HTML セレクターのリスト ​

css ​

sh ​

file ​

組み込みローダー

`js`

`jsx`

`ts`

`tsx`

`json`

`jsonc`

`toml`

`yaml`

`text`

`napi`

`sqlite`

`html`

サポートされている HTML セレクターのリスト

`css`

`sh`

`file`