温馨提示:本站仅提供公开网络链接索引服务,不存储、不篡改任何第三方内容,所有内容版权归原作者所有
AI智能索引来源:http://www.bun.com/docs/bundler/loaders
点击访问原文链接
Loaders - BunDocumentation Index

Fetch the complete documentation index at: /docs/llms.txt

Use this file to discover all available pages before exploring further.

Skip to main contentBun home pageSearch...⌘KInstall BunSearch...NavigationAsset ProcessingLoadersRuntimePackage ManagerBundlerTest RunnerGuidesReferenceBlogFeedback:first-child]:!hidden peer-[.is-custom]:[&>:first-child]:sm:!hidden peer-[.is-custom]:[&>:first-child]:md:!hidden peer-[.is-custom]:[&>:first-child]:lg:!hidden peer-[.is-custom]:[&>:first-child]:xl:!hidden">CoreBundlerDevelopment ServerFullstack dev serverHot reloadingAsset ProcessingHTML & static sitesStandalone HTMLCSSLoadersSingle File ExecutableSingle-file executableExtensionsPluginsMacrosOptimizationBytecode CachingMinifierMigrationesbuildOn this pageBuilt-in loadersjsjsxtstsxjsonjsonctomlyamltextnapisqlitehtmlcssshfileAsset ProcessingLoadersCopy pagespan]:line-clamp-1 overflow-hidden group flex items-center py-0.5 gap-1 text-sm text-gray-950/50 dark:text-white/50 group-hover:text-gray-950/70 dark:group-hover:text-white/70 rounded-none rounded-r-xl border px-3 border-gray-200 aspect-square dark:border-white/[0.07] bg-background-light dark:bg-background-dark hover:bg-gray-600/5 dark:hover:bg-gray-200/5" aria-label="More actions" type="button" id="radix-_R_n4ctdbsnlht5lebsnpfdb_" aria-haspopup="menu" aria-expanded="false" data-state="closed">*]:[overflow-wrap:anywhere]">

Built-in loaders for the Bun bundler and runtime

Copy pagespan]:line-clamp-1 overflow-hidden group flex items-center py-0.5 gap-1 text-sm text-gray-950/50 dark:text-white/50 group-hover:text-gray-950/70 dark:group-hover:text-white/70 rounded-none rounded-r-xl border px-3 border-gray-200 aspect-square dark:border-white/[0.07] bg-background-light dark:bg-background-dark hover:bg-gray-600/5 dark:hover:bg-gray-200/5" aria-label="More actions" type="button" id="radix-_R_1cctdbsnlht5lebsnpfdb_" aria-haspopup="menu" aria-expanded="false" data-state="closed">The Bun bundler implements a set of default loaders out of the box. As a rule of thumb: the bundler and the runtime both support the same set of file types out of the box. .js .cjs .mjs .mts .cts .ts .tsx .jsx .css .json .jsonc .toml .yaml .yml .txt .wasm .node .html .sh Bun uses the file extension to determine which built-in loader should be used to parse the file. Every loader has a name, such as js, tsx, or json. These names are used when building plugins that extend Bun with custom loaders. You can explicitly specify which loader to use using the 'type' import attribute. index.ts
import my_toml from "./my_file" with { type: "toml" };
// or with dynamic imports
const { default: my_toml } = await import("./my_file", { with: { type: "toml" } });
​Built-in loaders ​js JavaScript loader. Default for .cjs and .mjs. Parses the code and applies a set of default transforms like dead-code elimination and tree shaking. Note that Bun does not attempt to down-convert syntax at the moment. ​jsx JavaScript + JSX loader. Default for .js and .jsx. Same as the js loader, but JSX syntax is supported. By default, JSX is down-converted to plain JavaScript; the details of how this is done depends on the jsx* compiler options in your tsconfig.json. Refer to the TypeScript documentation on JSX for more information. ​ts TypeScript loader. Default for .ts, .mts, and .cts. Strips out all TypeScript syntax, then behaves identically to the js loader. Bun does not perform typechecking. ​tsx TypeScript + JSX loader. Default for .tsx. Transpiles both TypeScript and JSX to vanilla JavaScript. ​json JSON loader. Default for .json. JSON files can be directly imported.
import pkg from "./package.json";
pkg.name; // => "my-package"
During bundling, the parsed JSON is inlined into the bundle as a JavaScript object.
const pkg = {
name: "my-package",
// ... other fields
};

pkg.name;
If a .json file is passed as an entrypoint to the bundler, it will be converted to a .js module that export defaults the parsed object. InputOutput
{
"name": "John Doe",
"age": 35,
"email": "johndoe@example.com"
}
​jsonc JSON with Comments loader. Default for .jsonc. JSONC (JSON with Comments) files can be directly imported. Bun will parse them, stripping out comments and trailing commas.
import config from "./config.jsonc";
console.log(config);
During bundling, the parsed JSONC is inlined into the bundle as a JavaScript object, identical to the json loader.
var config = {
option: "value",
};
Bun automatically uses the jsonc loader for tsconfig.json, jsconfig.json, package.json, and bun.lock files. ​toml TOML loader. Default for .toml. TOML files can be directly imported. Bun will parse them with its fast native TOML parser.
import config from "./bunfig.toml";
config.logLevel; // => "debug"

// via import attribute:
// import myCustomTOML from './my.config' with {type: "toml"};
During bundling, the parsed TOML is inlined into the bundle as a JavaScript object.
var config = {
logLevel: "debug",
// ...other fields
};
config.logLevel;
If a .toml file is passed as an entrypoint, it will be converted to a .js module that export defaults the parsed object. InputOutput
name = "John Doe"
age = 35
email = "johndoe@example.com"
​yaml YAML loader. Default for .yaml and .yml. YAML files can be directly imported. Bun will parse them with its fast native YAML parser.
import config from "./config.yaml";
console.log(config);

// via import attribute:
import data from "./data.txt" with { type: "yaml" };
During bundling, the parsed YAML is inlined into the bundle as a JavaScript object.
var config = {
name: "my-app",
version: "1.0.0",
// ...other fields
};
If a .yaml or .yml file is passed as an entrypoint, it will be converted to a .js module that export defaults the parsed object. InputOutput
name: John Doe
age: 35
email: johndoe@example.com
​text Text loader. Default for .txt. The contents of the text file are read and inlined into the bundle as a string. Text files can be directly imported. The file is read and returned as a string.
import contents from "./file.txt";
console.log(contents); // => "Hello, world!"

// To import an html file as text
// The "type" attribute can be used to override the default loader.
import html from "./index.html" with { type: "text" };
When referenced during a build, the contents are inlined into the bundle as a string.
var contents = `Hello, world!`;
console.log(contents);
If a .txt file is passed as an entrypoint, it will be converted to a .js module that export defaults the file contents. InputOutput
Hello, world!
​napi Native addon loader. Default for .node. In the runtime, native addons can be directly imported.
import addon from "./addon.node";
console.log(addon);
In the bundler, .node files are handled using the file loader. ​sqlite SQLite loader. Requires with { "type": "sqlite" } import attribute. In the runtime and bundler, SQLite databases can be directly imported. This will load the database using bun:sqlite.
import db from "./my.db" with { type: "sqlite" };
This is only supported when the target is bun. By default, the database is external to the bundle (so that you can potentially use a database loaded elsewhere), so the database file on-disk won’t be bundled into the final output. You can change this behavior with the "embed" attribute:
// embed the database into the bundle
import db from "./my.db" with { type: "sqlite", embed: "true" };
When using a standalone executable, the database is embedded into the single-file executable.Otherwise, the database to embed is copied into the outdir with a hashed filename. ​html HTML loader. Default for .html. The html loader processes HTML files and bundles any referenced assets. It will: Bundle and hash referenced JavaScript files (

Loaders - Bun,AI智能索引,全网链接索引,智能导航,网页索引

    Built-in loaders for the Bun bundler and runtime