json-files.mdx

Import JSON files

Rslib supports import JSON files in code.

JSON file

You can directly import JSON files in JavaScript files.

:::warning

In bundle mode, JSON files support both default and named import.

In bundleless mode, JSON files only support named import.

:::

Default import

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

import example from './example.json';

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

Named import

Rslib also supports importing JSON files through named import.

Here is an example, assuming the source code is as follows:

import { Tabs, Tab } from '@theme';

import { name } from './example.json';

console.log(name); // 'foo';

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

Based on the configuration in the output structure specified in the configuration file, the following outputs will be emitted:

var example_namespaceObject = {
  u: 'foo',
};
console.log(example_namespaceObject.u);

import * as example from './example.js';

console.log(example.name);

var example_namespaceObject = JSON.parse('{"name":"foo","items":[1,2]}');
var __webpack_exports__items = example_namespaceObject.items;
var __webpack_exports__name = example_namespaceObject.name;
export { __webpack_exports__items as items, __webpack_exports__name as name };