#JSON

Rsbuild supports importing JSON files in code, and also supports importing YAML and TOML files, converting them to JSON format.

#JSON file

You can import JSON files directly in JavaScript files.

#Example

{  "name": "foo",  "items": [1, 2] }

import example from './example.json';  console.log(example.name); // 'foo'; console.log(example.items); // [1, 2];

#Named import

Rsbuild also supports importing JSON files using named imports:

import { name } from './example.json';  console.log(name); // 'foo';

#YAML file

YAML is a data serialization language commonly used for writing configuration files.

Rsbuild provides the @rsbuild/plugin-yaml. After registering the plugin, you can import .yaml or .yml files in JavaScript and they will be automatically converted to JavaScript objects.

import { pluginYaml } from '@rsbuild/plugin-yaml';  export default {  plugins: [pluginYaml()], };

#Example

--- hello: world foo:  bar: baz

import example from './example.yaml';  console.log(example.hello); // 'world'; console.log(example.foo); // { bar: 'baz' };

#TOML file

TOML is a semantically explicit, easy-to-read configuration file format.

Rsbuild provides the @rsbuild/plugin-toml. After registering the plugin, you can import .toml files in JavaScript and it will be automatically converted to JavaScript objects.

import { pluginToml } from '@rsbuild/plugin-toml';  export default {  plugins: [pluginToml()], };

#Example

hello = "world"  [foo] bar = "baz"

import example from './example.toml';  console.log(example.hello); // 'world'; console.log(example.foo); // { bar: 'baz' };

#Type declaration

When you import YAML or TOML files in TypeScript code, please create a src/env.d.ts file in your project and add the corresponding type declarations.

• Method 1: If the @rsbuild/core package is installed, you can reference the preset types provided by @rsbuild/core:

/// <reference types="@rsbuild/core/types" />

• Method 2: Manually add the required type declarations:

declare module '*.yaml' {  const content: Record<string, any>;  export default content; } declare module '*.yml' {  const content: Record<string, any>;  export default content; } declare module '*.toml' {  const content: Record<string, any>;  export default content; }