Skip to main content
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'导入属性显式指定要使用的加载器。
https://mintcdn.com/teemo/2s-4Z6VdGqiCeBNX/icons/typescript.svg?fit=max&auto=format&n=2s-4Z6VdGqiCeBNX&q=85&s=087b260066909db1cd3e9c7292bc34b2index.ts
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对象。 
const pkg = {
  name: "my-package",
  // ... 其他字段
};

pkg.name;
如果[.json]文件作为入口点传递给打包器，它将被转换为一个.js模块，该模块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",
};
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]文件作为入口点传递，它将被转换为一个.js模块，该模块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]文件作为入口点传递，它将被转换为一个.js模块，该模块export 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]文件作为入口点传递，它将被转换为一个.js模块，该模块export default文件内容。 
Hello, world!

​
napi

原生插件加载器。 默认用于[.node]。 在运行时，可以直接导入原生插件。 
import addon from "./addon.node";
console.log(addon);
在打包器中，[.node]文件使用文件加载器处理。

​
sqlite

SQLite加载器。 需要with { "type": "sqlite" }导入属性。 在运行时和打包器中，可以直接导入SQLite数据库。这将使用bun:sqlite加载数据库。 
import db from "./my.db" with { type: "sqlite" };
这仅在目标为bun时支持。
默认情况下，数据库在包外部（以便您可以潜在地使用在别处加载的数据库），因此磁盘上的数据库文件不会被打包到最终输出中。 您可以使用"embed"属性更改此行为： 
// 将数据库嵌入到包中
import db from "./my.db" with { type: "sqlite", embed: "true" };
使用独立可执行文件时，数据库被嵌入到单文件可执行文件中。否则，要嵌入的数据库将被复制到outdir中，文件名为哈希值。

​
html

HTML加载器。 默认用于[.html]。 html加载器处理HTML文件并打包任何引用的资源。它将：
  • 打包和哈希引用的JavaScript文件（<script src="...">）
  • 打包和哈希引用的CSS文件（<link rel="stylesheet" href="...">）
  • 哈希引用的图像（<img src="...">）
  • 保留外部URL（默认情况下，以http://或https://开头的任何内容）
例如，给定这个HTML文件：
src/index.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文件：
dist/index.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提取脚本和链接标签作为入口点，其他资源作为外部资源。
目前，选择器列表是：
  • 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]
不同上下文中的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文件，处理@import语句和url()引用。 
import "./styles.css";
在打包过程中，所有导入的CSS文件都被打包到输出目录中的单个[.css]文件中。 
.my-class {
  background: url("./image.png");
}

​
sh

Bun Shell加载器。 默认用于[.sh]文件。 此加载器用于解析Bun Shell脚本。它仅在启动Bun本身时支持，因此在打包器或运行时中不可用。 
bun run ./script.sh

​
file

文件加载器。 默认用于所有未识别的文件类型。 文件加载器将导入解析为导入文件的路径/URL。它通常用于引用媒体或字体资源。 
// logo.ts
import logo from "./logo.svg";
console.log(logo);
在运行时，Bun检查logo.svg文件是否存在，并将其转换为logo.svg在磁盘上位置的绝对路径。 
bun run logo.ts
# Output: /path/to/project/logo.svg
在打包器中，情况略有不同。文件被原样复制到outdir中，导入被解析为指向复制文件的相对路径。 
// Output
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的值确定。