> ## Documentation Index
> Fetch the complete documentation index at: https://bun.ll1025.cn/llms.txt
> Use this file to discover all available pages before exploring further.
# 加载器
> Bun 打包器和运行时的内置加载器
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'` 导入属性。
```ts title="index.ts" icon="https://mintcdn.com/span-inc/82N53aP7NFbaCVSl/icons/typescript.svg?fit=max&auto=format&n=82N53aP7NFbaCVSl&q=85&s=787d39d6a7d96d7f9540dc74344eba23" theme={null}
import my_toml from "./my_file" with { type: "toml" };
// 或使用动态导入
const { default: my_toml } = await import("./my_file", { with: { type: "toml" } });
```
## 内置加载器
### `js`
**JavaScript 加载器。** `.cjs` 和 `.mjs` 的默认值。
解析代码并应用一组默认转换，如死代码消除和 tree shaking。Bun 不会向下转换语法。
***
### `jsx`
**JavaScript + JSX 加载器。** `.js` 和 `.jsx` 的默认值。
与 `js` 加载器相同，但支持 JSX 语法。默认情况下，JSX 被向下转换为普通 JavaScript；确切输出取决于 `tsconfig.json` 中的 `jsx*` 编译器选项。请参阅 [TypeScript 关于 JSX 的文档](https://www.typescriptlang.org/tsconfig#jsx)。
***
### `ts`
**TypeScript 加载器。** `.ts`、`.mts` 和 `.cts` 的默认值。
剥离所有 TypeScript 语法，然后与 `js` 加载器行为相同。Bun 不执行类型检查。
***
### `tsx`
**TypeScript + JSX 加载器。** `.tsx` 的默认值。
将 TypeScript 和 JSX 都转译为普通 JavaScript。
***
### `json`
**JSON 加载器。** `.json` 的默认值。
JSON 文件可以直接导入。
```js theme={null}
import pkg from "./package.json";
pkg.name; // => "my-package"
```
打包期间，解析后的 JSON 会被内联到打包产物中作为 JavaScript 对象。
```js theme={null}
const pkg = {
name: "my-package",
// ... 其他字段
};
pkg.name;
```
如果 `.json` 文件作为入口点传递给打包器，它会被转换为一个 `export default` 解析后对象的 `.js` 模块。
```json 输入 theme={null}
{
"name": "John Doe",
"age": 35,
"email": "johndoe@example.com"
}
```
```js 输出 theme={null}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
***
### `jsonc`
**带注释的 JSON 加载器。** `.jsonc` 的默认值。
JSONC（带注释的 JSON）文件可以直接导入。Bun 解析它们，剥离注释和尾随逗号。
```js theme={null}
import config from "./config.jsonc";
console.log(config);
```
打包期间，解析后的 JSONC 会被内联到打包产物中作为 JavaScript 对象，与 `json` 加载器相同。
```js theme={null}
var config = {
option: "value",
};
```
Bun 会自动为 `tsconfig.json`、`jsconfig.json`、`package.json` 和 `bun.lock` 文件使用 `jsonc` 加载器。
***
### `toml`
**TOML 加载器。** `.toml` 的默认值。
TOML 文件可以直接导入。Bun 使用其原生 TOML 解析器解析它们。
```js theme={null}
import config from "./bunfig.toml";
config.logLevel; // => "debug"
// 使用导入属性：
// import myCustomTOML from './my.config' with {type: "toml"};
```
打包期间，解析后的 TOML 会被内联到打包产物中作为 JavaScript 对象。
```js theme={null}
var config = {
logLevel: "debug",
// ... 其他字段
};
config.logLevel;
```
如果 `.toml` 文件作为入口点传入，它会被转换为一个 `export default` 解析后对象的 `.js` 模块。
```toml 输入 theme={null}
name = "John Doe"
age = 35
email = "johndoe@example.com"
```
```js 输出 theme={null}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
***
### `yaml`
**YAML 加载器。** `.yaml` 和 `.yml` 的默认值。
YAML 文件可以直接导入。Bun 使用其原生 YAML 解析器解析它们。
```js theme={null}
import config from "./config.yaml";
console.log(config);
// 使用导入属性：
import data from "./data.txt" with { type: "yaml" };
```
打包期间，解析后的 YAML 会被内联到打包产物中作为 JavaScript 对象。
```js theme={null}
var config = {
name: "my-app",
version: "1.0.0",
// ... 其他字段
};
```
如果 `.yaml` 或 `.yml` 文件作为入口点传入，它会被转换为一个 `export default` 解析后对象的 `.js` 模块。
```yaml 输入 theme={null}
name: John Doe
age: 35
email: johndoe@example.com
```
```js 输出 theme={null}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
***
### `text`
**文本加载器。** `.txt` 的默认值。
文本文件可以直接导入。文件被读取并作为字符串返回。
```js theme={null}
import contents from "./file.txt";
console.log(contents); // => "Hello, world!"
// 将 html 文件作为文本导入
// "type" 属性会覆盖默认加载器。
import html from "./index.html" with { type: "text" };
```
在构建中引用时，内容会被内联到打包产物中作为字符串。
```js theme={null}
var contents = `Hello, world!`;
console.log(contents);
```
如果 `.txt` 文件作为入口点传入，它会被转换为一个 `export default` 文件内容的 `.js` 模块。
```txt 输入 theme={null}
Hello, world!
```
```js 输出 theme={null}
export default "Hello, world!";
```
***
### `napi`
**原生插件加载器。** `.node` 的默认值。
在运行时中，原生插件可以直接导入。
```js theme={null}
import addon from "./addon.node";
console.log(addon);
```
在打包器中，`.node` 文件使用 `file` 加载器处理。
***
### `sqlite`
**SQLite 加载器。** 需要 `with { "type": "sqlite" }` 导入属性。
在运行时和打包器中，SQLite 数据库可以直接导入。Bun 使用 `bun:sqlite` 加载数据库。
```js theme={null}
import db from "./my.db" with { type: "sqlite" };
```
当目标为 `bun` 时，`sqlite` 加载器才受支持。
默认情况下，磁盘上的数据库文件不会被打包到最终输出中；它保持对打包产物的外部引用，因此你可以使用其他地方加载的数据库。
你可以使用 `"embed"` 属性改变此行为：
```js theme={null}
// 将数据库嵌入到打包产物中
import db from "./my.db" with { type: "sqlite", embed: "true" };
```
当使用独立可执行文件时，数据库会被嵌入到单文件可执行文件中。
否则，要嵌入的数据库会被复制到 `outdir` 中，并带有哈希文件名。
***
### `html`
**HTML 加载器。** `.html` 的默认值。
`html` 加载器处理 HTML 文件并打包所有引用的资源。它会：
* 打包并哈希引用的 JavaScript 文件（`