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
// 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()],
});
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 istrue
.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 istrue
.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 totrue
, HTML entities in the injected HTML code will be decoded. Default isfalse
.
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",
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"],
},
};