JS-to-JSON-Webpack-plugin

js-to-json-webpack-plugin is a Webpack plugin that converts JavaScript files into JSON format.

Table of Contents

• Installation
• Usage
• Options
• License

Installation

To install the plugin, run the following command:

npm install js-to-json-webpack-plugin --save-dev

or

yarn add js-to-json-webpack-plugin --dev

Usage

To use the js-to-json-webpack-plugin, add it to your Webpack configuration file (webpack.config.js):

const JSToJSONWebpackPlugin = require('js-to-json-webpack-plugin');

module.exports = {
    // ... your existing configuration
    plugins: [
        new JSToJSONWebpackPlugin({
            // Plugin options
        }),
    ],
};

Options

The plugin options require only input and output-fields. The configuration-field contains sensible defaults. The configuration-field is passed as a parameter to the actual JavaScript-file you wished to convert to JSON.

The plugin accepts the following options: | Option | Type | Default | Description | Optional | | - | - | - | - | - | | input | string | null | The input JavaScript file to convert. | false | | output | string | null | The output JSON file name. |false | | configuration | object | { replacer: null, space: 2, append: {} } | A custom object passed over to the JavaScript file. May contain anything. | true |

configuration default options: | Option | Type | Default | Description | Optional | | - | - | - | - | - | | replacer | function | null | JSON.stringify replacer parameter | true | | space | number | 2 | JSON.stringify space parameter | true | | append | object | {} | Will be appended to the JSON | true |

Example

Here is an example configuration with options:

A configuration JavaScript file that reads the root level package.json and some of it's fields to the Object to be turned into a JSON-file.

// manifest.config.js
const fs = require("fs");

module.exports = (configuration) => {
  // If my custom value was set, return this instead:
  if (configuration.whatYearIsIt && configuration.whatYearIsIt === 1996) {
    return { epiphany: "The dad and the poacher are the same person!" };
  }

  const manifest = {
    manifest_version: 3,
    background: {
      service_worker: "background.js",
      type: "module",
    },
    icons: {
      16: "./icon_16.png",
      48: "./icon_48.png",
      128: "./icon_128.png",
    },
  };

  const packageJSON = JSON.parse(fs.readFileSync("./package.json"));

  return Object.assign({ ...manifest }, configuration.append, {
    name: packageJSON.name,
    description: packageJSON.description,
    version: packageJSON.version,
    author: packageJSON.author,
    homepage_url: packageJSON.homepage,
  });
};

Add JSToJSONWebpackPlugin to your webpack.config.js-file or equivalent:

// webpack.config.js
const JSToJSONWebpackPlugin = require("js-to-json-webpack-plugin");

module.exports = {
  // ... your existing configuration
  plugins: [
    new JSToJSONWebpackPlugin({
      input: "./manifest.config.js",
      output: "manifest.json",
      configuration: {
        replacer: null,
        space: 2,
        // ... and your custom configuration like:
        append: { myCustomField: "something I wanted to add" },
        whatYearIsIt: 2024,
      },
    }),
  ],
};

Ouput to file manifest.json:

{
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "icons": {
    "16": "./icon_16.png",
    "48": "./icon_48.png",
    "128": "./icon_128.png"
  },
  "name": "package-json-name",
  "description": "package.json description",
  "version": "x.x.x",
  "author": "package-json-author",
  "myCustomField": "something I wanted to add"
}

License

This project is licensed under the MIT License - see the LICENSE file for details.