載入器

Bun 捆綁器實作了一組預設的載入器。原則上，捆綁器和執行時期都支援相同的檔案類型。

.js .cjs .mjs .mts .cts .ts .tsx .jsx .toml .json .txt .wasm .node

Bun 使用檔案副檔名來決定應該使用哪個內建的載入器來解析檔案。每個載入器都有名稱，例如 js、tsx 或 json。這些名稱在建置 外掛程式 時使用，這些外掛程式會使用自訂載入器來擴充 Bun。

內建載入器

js

JavaScript。預設為 .cjs 和 .mjs。

解析程式碼並套用一組預設轉換，例如死碼消除和樹狀搖晃。請注意，Bun 目前不會嘗試向下轉換語法。

jsx

JavaScript + JSX。預設為 .js 和 .jsx。

與 js 載入器相同，但支援 JSX 語法。預設情況下，JSX 會向下轉換為純 JavaScript；執行方式的詳細資料取決於 tsconfig.json 中的 jsx* 編譯器選項。有關 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 物件的形式內嵌到綑綁中。

var pkg = {
  name: "my-package",
  // ... other fields
};
pkg.name;

如果將 .json 檔案傳遞為綑綁器的進入點，它將轉換為 .js 模組，而 export default 為已解析的物件。

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

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

toml

TOML 載入器。預設為 .toml。

TOML 檔案可以直接匯入。Bun 會使用其快速的原生 TOML 解析器解析它們。

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

// via import attribute:
// import myCustomTOML from './my.config' with {type: "toml"};

在綑綁期間，已解析的 TOML 會以 JavaScript 物件的形式內嵌到綑綁中。

var config = {
  logLevel: "debug",
  // ...other fields
};
config.logLevel;

如果將 .toml 檔案傳遞為進入點，它將轉換為 .js 模組，而 export default 為已解析的物件。

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!"

// To import an html file as text
// The "type' attribute can be used to override the default loader.
import html from "./index.html" with { type: "text" };

在建置過程中被參照時，內容會作為一個字串內嵌到套件中。

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

如果 .txt 檔案被傳遞為進入點，它將會轉換成一個 .js 模組，而 export default 會傳回檔案內容。

Hello, world!

export default "Hello, world!";

wasm

WebAssembly 載入器。.wasm 的預設值。

在執行階段，WebAssembly 檔案可以直接匯入。檔案會讀取並傳回一個 WebAssembly.Module。

import wasm from "./module.wasm";
console.log(wasm); // => WebAssembly.Module

在套件組建器中，.wasm 檔案會使用 file 載入器來處理。

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" 屬性來變更此行為

// embed the database into the bundle
import db from "./my.db" with { type: "sqlite", embed: "true" };

當使用 獨立可執行檔 時，資料庫會內嵌到單一檔案可執行檔中。

否則，要內嵌的資料庫會以雜湊檔名複製到 outdir 中。

sh 載入器

Bun Shell 載入器。.sh 檔案的預設值

此載入器用於剖析 Bun Shell 腳本。僅在啟動 Bun 本身時支援，因此在 bundler 或執行時期中不可用。

bun run ./script.sh

file

檔案載入器。所有未辨識檔案類型的預設值。

檔案載入器將匯入解析為匯入檔案的 路徑/網址。一般用於參照媒體或字型資產。

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

在執行時期，Bun 會檢查 logo.svg 檔案是否存在，並將其轉換為 logo.svg 在磁碟上的絕對路徑。

bun run logo.ts

/path/to/project/logo.svg

在 bundler 中，情況略有不同。檔案會原樣複製到 outdir 中，而匯入會解析為指向複製檔案的相對路徑。

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

如果為 publicPath 指定值，匯入會使用該值作為前綴來建構絕對路徑/網址。

此載入器會原樣複製到 outdir 中。複製檔案的名稱使用 naming.asset 的值決定。

// TypeScript error
// Cannot find module './logo.svg' or its corresponding type declarations.

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