https://github.com/kirklin/unplugin-config
đ§ Configuration file generator for web apps, allowing external customization of global variables without repackaging.
https://github.com/kirklin/unplugin-config
config generator plugin rollup unplugin vite vite-plugin webpack
Last synced: 3 days ago
JSON representation
đ§ Configuration file generator for web apps, allowing external customization of global variables without repackaging.
- Host: GitHub
- URL: https://github.com/kirklin/unplugin-config
- Owner: kirklin
- License: mit
- Created: 2023-03-24T09:40:28.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-20T05:12:11.000Z (about 1 year ago)
- Last Synced: 2025-03-30T03:04:30.130Z (21 days ago)
- Topics: config, generator, plugin, rollup, unplugin, vite, vite-plugin, webpack
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/unplugin-config
- Size: 241 KB
- Stars: 25
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-vite - unplugin-config - Configuration file generator for web apps, allowing external customization of global variables without repackaging. (Plugins / Framework-agnostic Plugins)
- awesome-vite - unplugin-config - Configuration file generator for web apps, allowing external customization of global variables without repackaging. (Plugins / Framework-agnostic Plugins)
README
# unplugin-config
[![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript_code style][code-style-image]][code-style-url]
[npm-image]: https://img.shields.io/npm/v/unplugin-config.svg
[npm-url]: https://npmjs.org/package/unplugin-config
[downloads-image]: https://img.shields.io/npm/dm/unplugin-config.svg
[downloads-url]: https://npmjs.org/package/unplugin-config
[code-style-image]: https://img.shields.io/badge/code__style-%40kirklin%2Feslint--config-brightgreen
[code-style-url]: https://github.com/kirklin/eslint-config/
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
```bash
npm i unplugin-config
```
Vite
```ts
// vite.config.ts
import ConfigPlugin from "unplugin-config/vite";
export default defineConfig({
plugins: [
ConfigPlugin({ /* options */ }),
],
});
```
Example: [`playground/`](./playground/)
Rollup
```ts
// rollup.config.js
import ConfigPlugin from "unplugin-config/rollup";
export default {
plugins: [
ConfigPlugin({ /* options */ }),
],
};
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require("unplugin-config/webpack")({ /* options */ })
]
};
```
Nuxt
```ts
// nuxt.config.js
export default {
buildModules: [
["unplugin-config/nuxt", { /* options */ }],
],
};
```
> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require("unplugin-config/webpack")({ /* options */ }),
],
},
};
```
esbuild
```ts
// 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
```javascript
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](https://github.com/kirklin/celeris-admin)
## License
[MIT](./LICENSE) License Š 2022-PRESENT [Kirk Lin](https://github.com/kirklin)