Bun 捆綁器開箱即用地實作了一組預設的載入器。根據經驗法則，捆綁器和執行時環境都支援相同的開箱即用的檔案類型集。
.js .cjs .mjs .mts .cts .ts .tsx .jsx .toml .json .txt .wasm .node .html
Bun 使用檔案副檔名來判斷應該使用哪個內建載入器來解析檔案。每個載入器都有一個名稱，例如 js、tsx 或 json。當建置外掛程式以使用自訂載入器擴充 Bun 時，會使用這些名稱。
您可以使用 'loader' 匯入屬性明確指定要使用的載入器。
import my_toml from "./my_file" with { loader: "toml" };
內建載入器
js
JavaScript。.cjs 和 .mjs 的預設值。
解析程式碼並套用一組預設轉換，例如無效程式碼消除和 tree shaking。請注意，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 物件內嵌到捆綁包中。
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!";
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 中，並帶有雜湊檔名。
html
html 載入器處理 HTML 檔案並捆綁任何參考的資源。它將
- 捆綁和雜湊參考的 JavaScript 檔案 (
<script src="...">) - 捆綁和雜湊參考的 CSS 檔案 (
<link rel="stylesheet" href="...">) - 雜湊參考的圖片 (
<img src="...">) - 保留外部 URL（預設情況下，任何以
http://或https://開頭的內容）
例如，給定此 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 檔案，其中包含捆綁的資源
<!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 來提取 script 和 link 標籤作為進入點，以及其他資源作為外部資源。
目前，選擇器列表為
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]
sh 載入器
Bun Shell 載入器。.sh 檔案的預設值
此載入器用於解析 Bun Shell 腳本。它僅在啟動 Bun 本身時才支援，因此在捆綁器或執行時環境中不可用。
bun run ./script.shfile
檔案載入器。所有無法辨識的檔案類型的預設值。
檔案載入器將匯入解析為匯入檔案的路徑/URL。它通常用於參考媒體或字型資源。
import logo from "./logo.svg";
console.log(logo);
在執行時環境中，Bun 檢查 logo.svg 檔案是否存在，並將其轉換為 logo.svg 在磁碟上的位置的絕對路徑。
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 |
複製檔案的位置和檔名由 naming.asset 的值決定。
此載入器按原樣複製到 outdir 中。複製檔案的名稱使用 naming.asset 的值決定。
修正 TypeScript 匯入錯誤