A tool that generates configuration files for web applications, allowing customization of global variables that can be externally modified without the need for repackaging.

• ✨ Generates configuration files for web applications.
• 🔨 Allows customization of global variables.
• 🌈 Built-in support for dotenv, enabling parsing of environment variables starting with a specified prefix.
• 🚀 Supports packaging with Vite, Webpack, Rollup, and more.
• 🎉 Tree-shakable, generates only the configuration file required for the application.
• 🌟 Compatible with TypeScript.

npm i unplugin-config

// vite.config.ts
import ConfigPlugin from "unplugin-config/vite";

export default defineConfig({
  plugins: [
    ConfigPlugin({ /* options */ }),
  ],
});

// rollup.config.js
import ConfigPlugin from "unplugin-config/rollup";

export default {
  plugins: [
    ConfigPlugin({ /* options */ }),
  ],
};

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require("unplugin-config/webpack")({ /* options */ })
  ]
};

// nuxt.config.js
export default {
  buildModules: [
    ["unplugin-config/nuxt", { /* options */ }],
  ],
};

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require("unplugin-config/webpack")({ /* options */ }),
    ],
  },
};

// esbuild.config.js
import { build } from "esbuild";
import ConfigPlugin from "unplugin-config/esbuild";

build({
  plugins: [ConfigPlugin()],
});

The Options object contains the following properties:

• appName (string, optional): The name of the application.
• baseDir (string, optional): The base directory for the output.

• generate (boolean, optional): Enable or disable generating the configuration file. Default is true.
• fileName (string, optional): The name of the global configuration file. Default is "config.js".
• outputDir (string, optional): The directory where the configuration file is generated. Default is "./dist".

• enable (boolean, optional): Enable or disable injecting configuration into HTML files. Default is true.
• templates (string[], optional): An array of template files to transform.
• position (string, optional): The position where the configuration script is injected into HTML files. Possible values are "head", "body", "head-prepend", or "body-prepend". Default is "head-prepend".
• decodeEntities (boolean, optional): Whether to decode HTML entities in the injected HTML code. If set to true, HTML entities in the injected HTML code will be decoded. Default is false.

• prefix (string, optional): The prefix for environment variables used in configuration.
• files (string[], optional): An array of configuration files to load environment variables from.

const configurationOptions = {
  appName: "MyApp",
  configFile: {
    generate: true,
    fileName: "_app.config.js",
    outputDir: "dist",
  },
  htmlInjection: {
    enable: true,
    templates: ["index.html"],
    position: "head-prepend",
  },
  envVariables: {
    prefix: "VITE_GLOB_",
    files: [".env.production", ".env"],
  },
};

kirklin/celeris-admin

MIT License © 2022-PRESENT Kirk Lin