@rollup/plugin-json

What is @rollup/plugin-json?

The @rollup/plugin-json npm package allows users to import JSON files as modules in their Rollup bundles. It converts JSON files into ES6 modules, making it possible to include JSON data in the bundle as if they were regular JavaScript modules.

What are @rollup/plugin-json's main functionalities?

Import JSON files as modules

This feature allows you to import JSON files directly into your JavaScript code. The JSON data is parsed and transformed into an ES6 module, which can then be used like any other imported module.

import config from './config.json';
console.log(config);

Customize indentation

This feature allows you to specify the indentation for the generated default export, giving you control over the formatting of the output.

import json from '@rollup/plugin-json';

export default {
  plugins: [
    json({
      indent: '  '
    })
  ]
};

Filter which JSON files to include

This feature allows you to use a filter function to determine which JSON files should be processed by the plugin. This is useful when you want to include only certain JSON files based on a pattern or condition.

import json from '@rollup/plugin-json';
import { createFilter } from '@rollup/pluginutils';

const filter = createFilter('**/config/*.json');

export default {
  plugins: [
    json({
      include: filter
    })
  ]
};

Exclude JSON files

This feature allows you to exclude certain JSON files from being processed by the plugin. For example, you might want to exclude JSON files from the 'node_modules' directory.

import json from '@rollup/plugin-json';

export default {
  plugins: [
    json({
      exclude: ['node_modules/**']
    })
  ]
};

Other packages similar to @rollup/plugin-json

rollup-plugin-json

This is the predecessor to @rollup/plugin-json. It offers similar functionality but is no longer maintained. Users are encouraged to migrate to @rollup/plugin-json for future updates and bug fixes.

rollup-plugin-yaml

Similar to @rollup/plugin-json, this plugin allows importing YAML files as ES6 modules. It's useful for projects that prefer YAML over JSON for configuration or data files.

rollup-plugin-graphql

This plugin allows importing GraphQL files as ES6 modules, similar to how @rollup/plugin-json handles JSON files. It's specifically designed for GraphQL query and schema files.

README

@rollup/plugin-json

🍣 A Rollup which Converts .json files to ES6 modules.

Requirements

This plugin requires an LTS Node version (v8.0.0+) and Rollup v1.20.0+.

Install

Using npm:

npm install @rollup/plugin-json --save-dev

Usage

Create a rollup.config.js configuration file and import the plugin:

import json from '@rollup/plugin-json';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [json()]
};

Then call rollup either via the CLI or the API.

With an accompanying file src/index.js, the local package.json file would now be importable as seen below:

// src/index.js
import pkg from './package.json';
console.log(`running version ${pkg.version}`);

Options

compact

Type: Boolean
Default: false

If true, instructs the plugin to ignore indent and generates the smallest code.

exclude

Type: String | Array[...String]
Default: null

A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.

include

Type: String | Array(String)
Default: null

A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on. By default all files are targeted.

indent

Type: String
Default: '\t'

Specifies the indentation for the generated default export.

namedExports

Type: Boolean
Default: true

If true, instructs the plugin to generate a named export for every property of the JSON object.

preferConst

Type: Boolean
Default: false

If true, instructs the plugin to declare properties as variables, using either var or const. This pertains to tree-shaking.

Meta

CONTRIBUTING

LICENSE (MIT)