Bun Loaders

Files (1)

• SKILL.md

SKILL.md (first lines)

# Loaders

> Built-in loaders for the Bun bundler and runtime

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.

```ts title="index.ts" icon="https://mintcdn.com/bun-1dd33a4e/nIz6GtMH5K-dfXeV/icons/typescript.svg?fit=max&auto=format&n=nIz6GtMH5K-dfXeV&q=85&s=5d73d76daf7eb7b158469d8c30d349b0" theme={"theme":{"light":"github-light","dark":"dracula"}}
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](https://www.typescriptlang.org/tsconfig#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.

```js  theme={"theme":{"light":"github-light","dark":"dracula"}}
import pkg from "./package.json";
pkg.name; // => "my-package"
```

During bundling, the parsed JSON is inlined into the bundle as a JavaScript object.

```js  theme={"theme":{"light":"github-light","dark":"dracula"}}
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 default`s the parsed object.

<CodeGroup>
  ```json Input theme={"theme":{"light":"github-light","dark":"dracula"}}
  {
    "name": "John Doe",
    "age": 35,
    "email": "johndoe@example.com"
  }
  ```

  ```js Output theme={"theme":{"light":"github-light","dark":"dracula"}}
  export default {
    name: "John Doe",
    age: 35,
    email: "johndoe@example.com",
  };
  ```
</CodeGroup>

***

### `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.

```js  theme={"theme":{"light":"github-light","dark":"dracula"}}
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.

```js  theme={"theme":{"light":"github-light","dark":"dracula"}}
var config = {
  option: "value",
};
```

<Note>
  Bun automatically uses the `jsonc` loader for `tsconfig.json`, `jsconfig.json`, `package.json`, and `bun.lock` files.

From jarle/bun-skills, MIT.

More from jarle/bun-skills