> ## 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` `.json5` `.toml` `.yaml` `.yml` `.txt` `.wasm` `.node` `.html` `.sh`
Bun 使用文件扩展名来选择解析文件的内置\_加载器\_。每个加载器都有一个名称，如 `js`、`tsx` 或 `json`。这些名称在构建[插件](/bundler/plugins)时使用，以扩展 Bun 的自定义加载器。
要显式指定加载器，请使用 `type` 导入属性。
```ts 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` 的默认加载器。
解析代码并应用一组默认转换，如死代码消除和摇树优化。Bun 不会降级语法。
### `jsx`
**JavaScript + JSX**。`.js` 和 `.jsx` 的默认加载器。
与 `js` 加载器相同，但支持 JSX 语法。默认情况下，JSX 被降级为纯 JavaScript；具体细节取决于 `tsconfig.json` 中的 `jsx*` 编译器选项。请参阅 TypeScript 文档[关于 JSX](https://www.typescriptlang.org/docs/handbook/jsx.html)。
### `ts`
**TypeScript 加载器**。`.ts`、`.mts` 和 `.cts` 的默认加载器。
去除所有 TypeScript 语法，然后与 `js` 加载器的行为完全相同。Bun 不执行类型检查。
### `tsx`
**TypeScript + JSX 加载器**。`.tsx` 的默认加载器。将 TypeScript 和 JSX 都转译为普通 JavaScript。
### `json`
**JSON 加载器**。`.json` 的默认加载器。
JSON 文件可以直接导入。
```ts theme={null}
import pkg from "./package.json";
pkg.name; // => "my-package"
```
在打包期间，解析后的 JSON 会作为 JavaScript 对象内联到打包结果中。
```ts theme={null}
var pkg = {
name: "my-package",
// ... 其他字段
};
pkg.name;
```
如果将 `.json` 文件作为入口点传递给打包器，它会被转换为一个 `export default` 解析后对象的 `.js` 模块。
```json 输入 theme={null}
{
"name": "John Doe",
"age": 35,
"email": "johndoe@example.com"
}
```
```ts 输出 theme={null}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
### `jsonc`
**带注释的 JSON 加载器**。`.jsonc` 的默认加载器。
JSONC（带注释的 JSON）文件可以直接导入。Bun 会解析它们，去除注释和尾随逗号。
```ts theme={null}
import config from "./config.jsonc";
console.log(config);
```
在打包期间，解析后的 JSONC 会作为 JavaScript 对象内联到打包结果中，与 `json` 加载器相同。
```ts theme={null}
var config = {
option: "value",
};
```
Bun 自动对 `tsconfig.json`、`jsconfig.json`、`package.json` 和 `bun.lock` 文件使用 `jsonc` 加载器。
### `toml`
**TOML 加载器**。`.toml` 的默认加载器。
TOML 文件可以直接导入。Bun 使用其快速的原生 TOML 解析器进行解析。
```ts theme={null}
import config from "./bunfig.toml";
config.logLevel; // => "debug"
// 通过导入属性：
// import myCustomTOML from './my.config' with {type: "toml"};
```
在打包期间，解析后的 TOML 会作为 JavaScript 对象内联到打包结果中。
```ts theme={null}
var config = {
logLevel: "debug",
// ...其他字段
};
config.logLevel;
```
如果将 `.toml` 文件作为入口点传递，它会被转换为一个 `export default` 解析后对象的 `.js` 模块。
```toml 输入 theme={null}
name = "John Doe"
age = 35
email = "johndoe@example.com"
```
```ts 输出 theme={null}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
### `yaml`
**YAML 加载器**。`.yaml` 和 `.yml` 的默认加载器。
YAML 文件可以直接导入。Bun 使用其快速的原生 YAML 解析器进行解析。
```ts theme={null}
import config from "./config.yaml";
console.log(config);
// 通过导入属性：
import data from "./data.txt" with { type: "yaml" };
```
在打包期间，解析后的 YAML 会作为 JavaScript 对象内联到打包结果中。
```ts 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
```
```ts 输出 theme={null}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
### `json5`
**JSON5 加载器**。`.json5` 的默认加载器。
JSON5 文件可以直接导入。Bun 使用其快速的原生 JSON5 解析器进行解析。JSON5 是 JSON 的超集，增加了注释、尾随逗号、未加引号的键、单引号字符串等。
```ts theme={null}
import config from "./config.json5";
console.log(config);
// 通过导入属性：
import data from "./data.txt" with { type: "json5" };
```
在打包期间，解析后的 JSON5 会作为 JavaScript 对象内联到打包结果中。
```ts theme={null}
var config = {
name: "my-app",
version: "1.0.0",
// ...其他字段
};
```
如果将 `.json5` 文件作为入口点传递，它会被转换为一个 `export default` 解析后对象的 `.js` 模块。
```json5 输入 theme={null}
{
// 配置
name: "John Doe",
age: 35,
email: "johndoe@example.com",
}
```
```ts 输出 theme={null}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
### `text`
**文本加载器**。`.txt` 的默认加载器。
文本文件可以直接导入。文件被读取并以字符串形式返回。
```ts theme={null}
import contents from "./file.txt";
console.log(contents); // => "Hello, world!"
// 将 html 文件作为文本导入
// "type" 属性可用于覆盖默认加载器。
import html from "./index.html" with { type: "text" };
```
在构建过程中引用时，内容会作为字符串内联到打包结果中。
```ts theme={null}
var contents = `Hello, world!`;
console.log(contents);
```
如果将 `.txt` 文件作为入口点传递，它会被转换为一个 `export default` 文件内容的 `.js` 模块。
```txt 输入 theme={null}
Hello, world!
```
```ts 输出 theme={null}
export default "Hello, world!";
```
### `napi`
**原生插件加载器**。`.node` 的默认加载器。
在运行时中，原生插件可以直接导入。
```ts theme={null}
import addon from "./addon.node";
console.log(addon);
```
在打包器中，`.node` 文件使用 [`file`](#file) 加载器处理。
### `sqlite`
**SQLite 加载器**。使用 `with { "type": "sqlite" }` 导入属性
在运行时和打包器中，SQLite 数据库可以直接导入。数据库使用 [`bun:sqlite`](/runtime/sqlite) 加载。
```ts theme={null}
import db from "./my.db" with { type: "sqlite" };
```
这仅在 `target` 为 `bun` 时支持。
默认情况下，数据库在包外部：磁盘上的数据库文件不会被打包到最终输出中，因此你可以使用在其他地方加载的数据库。
你可以通过 `"embed"` 属性更改此行为：
```ts theme={null}
// 将数据库嵌入到打包结果中
import db from "./my.db" with { type: "sqlite", embed: "true" };
```
使用[独立可执行文件](/bundler/executables)时，数据库会被嵌入到单文件可执行文件中。
否则，要嵌入的数据库会被复制到 `outdir` 并使用哈希文件名。
### `html`
`html` 加载器处理 HTML 文件并打包所有引用的资源。它会：
* 打包和哈希引用的 JavaScript 文件（`