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* コンパイラーオプションに依存します。詳細については、JSX に関する TypeScript ドキュメントを参照してください。

`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 オブジェクトとしてバンドルにインライン化されます。

var 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 with Comments ローダー。.jsonc のデフォルト。

JSONC（JSON with Comments）ファイルを直接インポートできます。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);

バンドラーでは、.node ファイルは file ローダーを使用して処理されます。

`sqlite`

SQLite ローダー。with { "type": "sqlite" } インポート属性

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

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

これは target が bun の場合にのみサポートされます。

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

この動作は "embed" 属性で変更できます。

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

スタンドアロン実行可能ファイルを使用する場合、データベースは単一ファイル実行可能ファイルに埋め込まれます。

それ以外の場合、埋め込むデータベースはハッシュされたファイル名で outdir にコピーされます。

`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="Local image" />
    <img src="https://example.com/image.jpg" alt="External image" />
    <script type="module" src="./script.js"></script>
  </body>
</html>

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

html

<!DOCTYPE html>
<html>
  <body>
    <img src="./image-HASHED.jpg" alt="Local image" />
    <img src="https://example.com/image.jpg" alt="External image" />
    <script type="module" src="./output-ALSO-HASHED.js"></script>
  </body>
</html>

内部では、lol-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 が HTML と一緒にバンドルされるフルスタックアプリケーションで役立ちます。

import "./styles.css";

インポートから返される値はありません。副作用のためにのみ使用されます。

`sh` ローダー

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

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

bun run ./script.sh

`file`

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

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

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`](/ja/bundler#naming) の値によって決定されます。

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

TypeScript のインポートエラーを修正する

TypeScript を使用している場合、以下のようなエラーが発生する可能性があります。

// TypeScript エラー
// モジュール './logo.svg' またはその対応する型宣言が見つかりません。

これは、プロジェクト内の任意の場所に *.d.ts ファイル（名前は何でも構いません）を作成することで修正できます。

declare module "*.svg" {
  const content: string;
  export default content;
}

これにより、.svg からのデフォルトインポートは文字列として扱われることを TypeScript に指示します。

組み込みローダー ​

js ​

jsx ​

ts ​

tsx ​

json ​

jsonc ​

toml ​

yaml ​

text ​

napi ​

sqlite ​

html ​

css ​

sh ローダー ​

file ​

TypeScript のインポートエラーを修正する ​

組み込みローダー

`js`

`jsx`

`ts`

`tsx`

`json`

`jsonc`

`toml`

`yaml`

`text`

`napi`

`sqlite`

`html`

`css`

`sh` ローダー

`file`

TypeScript のインポートエラーを修正する