kirklin / unplugin-config

🔧 Configuration file generator for web apps, allowing external customization of global variables without repackaging.

unplugin-config

English | 简体中文

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

unplugin-config's Issues

The plugin isn't use in vite serve model

Clear and concise description of the problem

when using the command npm run dev, it doesn't work, tips: http://localhost:8000/_app.config.js status is 404
but the build type is normally

Suggested solution

We need support serving model running

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

关于配置文件构造和使用缺乏详细说明和示例代码|Lack of Detailed Instructions and Examples for Configuration File Construction and Usage

文档里只提到了配置文件生成到哪里，没说怎么构造以及使用。

给的示例代码最后跳来跳去，我只找到了文档里列出来的那几个选项，还是不清楚他是根据什么构造的配置文件。

希望作者能给出更详细些的说明

谢谢

Allow Injection of External Scripts in HTML <head>

Clear and concise description of the problem

We want to enable users to inject external scripts into the HTML section. Currently, our system does not support this functionality, and users require the ability to inject scripts in the for improved flexibility.

Suggested solution

in module [webpage-injection], we could provide the following implementation:

Support for External Script References: Allow users to inject external script files into the HTML section using the following syntax:

<script src="/vue/_app.config.js?v=0.0.1-1696649065883"></script>

Version Management: Allow users to include version numbers or timestamps in script links to ensure that the latest script version is loaded on each page load. This can be achieved by adding version parameters (e.g., ?v=0.0.1-1696649065883) to the links.

Security Considerations: Implement security measures to ensure that the injected scripts do not pose security risks, such as cross-site scripting (XSS) vulnerabilities.

Documentation and Examples: Update the documentation to provide clear instructions on how to use this new feature and provide relevant code examples.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Support for Custom 'env' Directory Configuration | 能否添加一个支持env目录的配置

Clear and concise description of the problem

zh: 目前只支持生成在根目录下的.env.*文件变量，如果我改变了.env文件路径，例如放在根目录下的xxx文件夹下(xxx/.env),则会找不到.env文件，从而导致生成失败。
希望支持自定义env文件目录，类似于vite配置中的envDir

en: Currently, the plugin only supports generating environment variables from '.env.*' files located in the root directory. If I change the path of the '.env' file, for example, by placing it in a subdirectory of the root (e.g., 'xxx/.env'), the plugin fails to find the '.env' file, leading to generation failures.

I would like to suggest adding support for a custom 'env' directory, similar to the 'envDir' configuration in Vite.

Suggested solution

类似于vite配置中的envDir.

Implement a feature similar to Vite's 'envDir' configuration.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

打包警告 以及 baseUrl

Describe the bug

1. 打包会出现如下警告
   
2. htmlInjection没有baseUrl的配置，无法将src="/_app.config.js"修改为其他
   

是不足？还是说有什么是被我忽略的？

Reproduction

none

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 97.13 MB / 16.00 GB
    Shell: 3.2.57 - /bin/sh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    npm: 10.2.0 - /usr/local/bin/npm
    pnpm: 8.1.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome Canary: 120.0.6091.0
    Edge: 118.0.2088.69
    Safari: 17.0

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

修改配置项不生效

Describe the bug

参考playground中的例子，在vite的build配置中添加以下代码：
unplugin({
appName: 'myapp',
envConfigPrefix: 'VITE_API_',
outputDir: OUTPUT_DIR,
disabledConfig: false,
}),
用vite build之后，修改 _app.config.js中的配置项VITE_API_BASE_URL，部署后，项目运行的还是在.env.production中配置的原始url，根本就没有使用 _app.config.js中修改的url。

请问是不是少了什么配置？还是插件的bug？

Reproduction

0.0.3

System Info

vue3，vite 3.2.7

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.