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 对象内联到捆绑包中。
var pkg = {
name: "my-package",
// ... 其他字段
};
pkg.name;如果将 .json 文件作为入口点传递给打包器，它将转换为 export default 解析对象的 .js 模块。
{
"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 作为 JavaScript 对象内联到捆绑包中，与 json 加载器相同。
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 模块。
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 模块。
name: John Doe
age: 35
email: johndoe@example.comexport 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 模块。
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 文件：
<!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 文件：
<!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 提取脚本和链接标签作为入口点，以及其他资源作为外部。
目前，选择器列表是：
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.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 |
NOTE
复制文件的位置和文件名由 [`naming.asset`](/zh-cn/bundler#naming) 的值确定。修复 TypeScript 导入错误
如果你使用 TypeScript，可能会收到如下错误：
// TypeScript 错误
// 找不到模块 './logo.svg' 或其相应的类型声明。可以通过在项目的任何位置创建 *.d.ts 文件（任何名称都有效）来修复，内容如下：
declare module "*.svg" {
const content: string;
export default content;
}这告诉 TypeScript，来自 .svg 的任何默认导入都应视为字符串。