Skip to content

๐Ÿ”ง Configuration file generator for web apps, allowing external customization of global variables without repackaging.

License

Notifications You must be signed in to change notification settings

kirklin/unplugin-config

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

65 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

unplugin-config

npm downloads javascript_code style

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

Features
  • โœจ 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.

Install

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

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

Example: playground/


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

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


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


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

This module works for both Nuxt 2 and Nuxt Vite


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


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

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


Configuration

The Options object contains the following properties:

Application Options (appName and baseDir)

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

Configuration File Options (configFile)

  • 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".

HTML Injection Options (htmlInjection)

  • 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.

Environment Variables Options (envVariables)

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

Example

const configurationOptions = {
  appName: "MyApp",
  baseDir: "/",
  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"],
  },
};

Example

kirklin/celeris-admin

License

MIT License ยฉ 2022-PRESENT Kirk Lin