> ## Documentation Index
> Fetch the complete documentation index at: https://bun.zhcndoc.com/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`。这些名称在构建扩展 Bun 的自定义加载器的[插件](/bundler/plugins)时使用。
你可以显式指定使用哪个加载器，通过 `'type'` 导入属性。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
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={"theme":{"light":"github-light","dark":"dracula"}}
import pkg from "./package.json";
pkg.name; // => "my-package"
```
打包时，解析后的 JSON 会以内联的 JavaScript 对象形式嵌入包中。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
var pkg = {
name: "my-package",
// ... 其他字段
};
pkg.name;
```
如果将 `.json` 文件作为入口传递给打包器，它会被转换成一个 `.js` 模块，`export default` 解析后的对象。
```json Input theme={"theme":{"light":"github-light","dark":"dracula"}}
{
"name": "John Doe",
"age": 35,
"email": "johndoe@example.com"
}
```
```ts Output theme={"theme":{"light":"github-light","dark":"dracula"}}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
### `jsonc`
**带注释的 JSON 加载器**。`.jsonc` 的默认加载器。
支持带注释的 JSONC 文件直接导入。Bun 解析时会移除注释和尾随逗号。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
import config from "./config.jsonc";
console.log(config);
```
打包时，解析后的 JSONC 会以内联的 JavaScript 对象形式嵌入包中，行为与 `json` 加载器相同。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
var config = {
option: "value",
};
```
Bun 会自动对 `tsconfig.json`、`jsconfig.json`、`package.json` 和 `bun.lock` 文件使用 `jsonc` 加载器。
### `toml`
**TOML 加载器**。`.toml` 的默认加载器。
TOML 文件可以直接导入。Bun 使用其快速的原生 TOML 解析器进行解析。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
import config from "./bunfig.toml";
config.logLevel; // => "debug"
// 使用导入属性：
// import myCustomTOML from './my.config' with {type: "toml"};
```
打包时，解析后的 TOML 会以内联的 JavaScript 对象形式嵌入包中。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
var config = {
logLevel: "debug",
// ...其他字段
};
config.logLevel;
```
如果 `.toml` 文件作为入口被传递，它会被转换成一个 `.js` 模块，`export default` 解析后的对象。
```toml Input theme={"theme":{"light":"github-light","dark":"dracula"}}
name = "John Doe"
age = 35
email = "johndoe@example.com"
```
```ts Output theme={"theme":{"light":"github-light","dark":"dracula"}}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
### `yaml`
**YAML 加载器**。`.yaml` 和 `.yml` 的默认加载器。
YAML 文件可以直接导入。Bun 使用其快速的原生 YAML 解析器进行解析。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
import config from "./config.yaml";
console.log(config);
// 使用导入属性：
import data from "./data.txt" with { type: "yaml" };
```
打包时，解析后的 YAML 会以内联的 JavaScript 对象形式嵌入包中。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
var config = {
name: "my-app",
version: "1.0.0",
// ...其他字段
};
```
如果 `.yaml` 或 `.yml` 文件作为入口被传递，它会被转换成一个 `.js` 模块，`export default` 解析后的对象。
```yaml Input theme={"theme":{"light":"github-light","dark":"dracula"}}
name: John Doe
age: 35
email: johndoe@example.com
```
```ts Output theme={"theme":{"light":"github-light","dark":"dracula"}}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
### `json5`
**JSON5 loader**. Default for `.json5`.
JSON5 files can be directly imported. Bun will parse them with its fast native JSON5 parser. JSON5 is a superset of JSON that supports comments, trailing commas, unquoted keys, single-quoted strings, and more.
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
import config from "./config.json5";
console.log(config);
// via import attribute:
import data from "./data.txt" with { type: "json5" };
```
During bundling, the parsed JSON5 is inlined into the bundle as a JavaScript object.
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
var config = {
name: "my-app",
version: "1.0.0",
// ...other fields
};
```
If a `.json5` file is passed as an entrypoint, it will be converted to a `.js` module that `export default`s the parsed object.
```json5 Input theme={"theme":{"light":"github-light","dark":"dracula"}}
{
// Configuration
name: "John Doe",
age: 35,
email: "johndoe@example.com",
}
```
```ts Output theme={"theme":{"light":"github-light","dark":"dracula"}}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
### `text`
**文本加载器**。`.txt` 的默认加载器。
文本文件内容会被读取，并作为字符串内联到包中。文本文件可以直接导入，文件会被读取并以字符串形式返回。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
import contents from "./file.txt";
console.log(contents); // => "Hello, world!"
// 以文本形式导入 html 文件
// 可以通过 'type' 属性覆盖默认加载器。
import html from "./index.html" with { type: "text" };
```
构建时，内容会以内联的字符串形式嵌入包中。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
var contents = `Hello, world!`;
console.log(contents);
```
如果 `.txt` 文件作为入口被传递，会被转换成一个 `.js` 模块，`export default` 文件内容。
```txt Input theme={"theme":{"light":"github-light","dark":"dracula"}}
Hello, world!
```
```ts Output theme={"theme":{"light":"github-light","dark":"dracula"}}
export default "Hello, world!";
```
### `napi`
**本地扩展加载器**。`.node` 的默认加载器。
运行时可以直接导入本地扩展。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
import addon from "./addon.node";
console.log(addon);
```
打包时，`.node` 文件由 [`file`](#file) 加载器处理。
### `sqlite`
**SQLite 加载器**。`with { "type": "sqlite" }` 导入属性。
运行时和打包时都支持直接导入 SQLite 数据库文件，内部通过 [`bun:sqlite`](/runtime/sqlite) 加载。
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
import db from "./my.db" with { type: "sqlite" };
```
仅当 `target` 为 `bun` 时支持。
默认情况下，数据库文件不会被打包进最终文件（保持外部），方便你在其他地方加载数据库。
你可以通过 `"embed"` 属性改变这个行为：
```ts theme={"theme":{"light":"github-light","dark":"dracula"}}
// 将数据库嵌入包中
import db from "./my.db" with { type: "sqlite", embed: "true" };
```
使用[独立可执行文件](/bundler/executables)时，数据库会被嵌入到独立可执行文件中。
否则，嵌入数据库会被复制到 `outdir`，并使用哈希后的文件名。
### `html`
HTML 加载器处理 HTML 文件并打包所有引用的资源。功能包括：
* 打包并哈希引用的 JavaScript 文件（`