Skip to content

Commit 2e6a7b1

Browse files
nianyi778nianyi778
committed
feat(plugin): add option to completely disable version injection
Added support for `log: false` to prevent both <meta> tag and console logs from being
0 parents  commit 2e6a7b1

File tree

8 files changed

+444
-0
lines changed

8 files changed

+444
-0
lines changed

‎.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Node.js dependencies
2+
node_modules/
3+
pnpm-lock.yaml
4+
yarn.lock
5+
package-lock.json
6+
7+
# Build artifacts
8+
dist/
9+
*.log
10+
*.tmp
11+
*.cache
12+
.nyc_output/
13+
coverage/
14+
.DS_Store
15+
16+
# TypeScript
17+
*.tsbuildinfo
18+
tsconfig.tsbuildinfo
19+
20+
# Editor and OS
21+
.idea/
22+
.vscode/
23+
*.swp

‎README.md‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
### **🚀 `unplugin-version-injector` - Auto Inject Version & Build Time**
2+
3+
[🇨🇳 中文 README](./README.zh-CN.md) | [🇬🇧 English README](./README.md)
4+
5+
---
6+
7+
## **📌 Introduction**
8+
`unplugin-version-injector` is a powerful and lightweight plugin that automatically injects the **version number** and **build timestamp** into all HTML files. It supports **Webpack 4/5, Vite, and Rollup**, making it ideal for both **Single Page Applications (SPA)** and **Multi-Page Applications (MPA)**.
9+
10+
### **✨ Features**
11+
✅ **Auto-injects** `<meta name="version">` into all HTML `<head>` sections
12+
✅ **Auto-injects a `<script>`** that logs `version` & `build time` in the browser console
13+
✅ **Supports Webpack 4 & 5, Vite, and Rollup**
14+
✅ **Works in Multi-Page Applications (MPA)**
15+
✅ **Highly configurable**: Supports manually specifying the version or using `package.json`
16+
17+
---
18+
19+
## **📦 Installation**
20+
```sh
21+
# Using Yarn
22+
yarn add -D unplugin-version-injector
23+
24+
# Using npm
25+
npm install -D unplugin-version-injector
26+
```
27+
28+
---
29+
30+
## **🚀 Usage**
31+
32+
### **📌 Webpack 4/5**
33+
Modify your `webpack.config.js`:
34+
```js
35+
const versionInjectorPlugin = require('unplugin-version-injector');
36+
37+
module.exports = {
38+
plugins: [
39+
versionInjectorPlugin.webpack({
40+
version: '1.2.3', // (Optional) Manually specify version
41+
})
42+
],
43+
};
44+
```
45+
46+
---
47+
48+
### **📌 Vite**
49+
Modify your `vite.config.js`:
50+
```js
51+
import versionInjectorPlugin from 'unplugin-version-injector';
52+
53+
export default {
54+
plugins: [versionInjectorPlugin.vite()]
55+
};
56+
```
57+
58+
---
59+
60+
### **📌 Rollup**
61+
Modify your `rollup.config.js`:
62+
```js
63+
import versionInjectorPlugin from 'unplugin-version-injector';
64+
65+
export default {
66+
plugins: [versionInjectorPlugin.rollup()]
67+
};
68+
```
69+
70+
---
71+
72+
## **📜 Example Output**
73+
After building, all HTML files will include the following:
74+
```html
75+
<head>
76+
<meta name="version" content="1.2.3">
77+
<meta charset="UTF-8">
78+
<title>My App</title>
79+
</head>
80+
<body>
81+
<h1>Hello World</h1>
82+
<script>
83+
console.log("%c Version: 1.2.3 ", "background: #222; color: #00ff00; font-size: 12px; padding: 4px; border-radius: 4px;");
84+
console.log("%c Build Time: 2024-03-01T12:00:00.000Z ", "background: #222; color: #ffcc00; font-size: 12px; padding: 4px; border-radius: 4px;");
85+
</script>
86+
</body>
87+
```
88+
89+
✅ **Console Output (Colored Logs)**
90+
```
91+
🟢 Version: 1.2.3 (Green)
92+
🟡 Build Time: 2024-03-01T12:00:00.000Z (Yellow)
93+
```
94+
95+
---
96+
97+
## **🔧 Configuration Options**
98+
| **Option** | **Type** | **Description** | **Default** |
99+
|------------|---------|----------------|-------------|
100+
| `version` | `string` | Custom version (e.g., `1.2.3`) | Auto-read from `package.json` |
101+
| `log` | `boolean` | Enable/Disable console logs | `true` |
102+
| `dateFormat` | `string` | Format for build time | `ISO 8601` |
103+
104+
### **Example: Custom Config**
105+
```js
106+
versionInjectorPlugin.webpack({
107+
version: '2.0.0',
108+
log: false, // Disable console logs
109+
});
110+
```
111+
112+
---
113+
114+
## **🌍 Why Use This Plugin?**
115+
- 🛠 **Works out of the box**: No extra setup needed
116+
- 🚀 **Improves debugging**: Always know what version is running in production
117+
- 📅 **Track build times**: Useful for monitoring deployments
118+
- 🎯 **Lightweight & fast**: Minimal overhead with maximum benefits
119+
120+
---
121+
122+
## **📜 License**
123+
MIT License © 2024 [Nian YI](https://github.com/nianyi778)
124+
125+
---
126+
127+
## **💡 Contributing**
128+
Pull requests are welcome! If you encounter any issues, feel free to open an issue on GitHub.
129+
130+
**GitHub Repository:** [🔗 unplugin-version-injector](https://github.com/nianyi778/unplugin-version-injector)
131+
132+
---
133+
134+
🔥 **`unplugin-version-injector` – The simplest way to keep track of your app's version & build time!** 🚀

‎README.zh-CN.md‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
# **🚀 `unplugin-version-injector` - 自动注入版本号 & 构建时间**
2+
3+
[🇬🇧 English README](./README.md) | [🇨🇳 中文 README](./README.zh-CN.md)
4+
5+
---
6+
7+
## **📌 简介**
8+
`unplugin-version-injector` 是一个 **轻量级** 插件，可自动将 **版本号** 和 **构建时间** 注入到所有 HTML 文件中。
9+
支持 **Webpack 4/5、Vite 和 Rollup**，适用于 **单页应用 (SPA) 和 多页应用 (MPA)**。
10+
11+
### **✨ 功能特点**
12+
✅ **自动注入** `<meta name="version">` 到所有 HTML `<head>` 部分
13+
✅ **自动注入 `<script>`**，在浏览器控制台打印 `版本号` & `构建时间`
14+
✅ **兼容 Webpack 4 & 5、Vite 和 Rollup**
15+
✅ **支持多页应用 (MPA)**，不会遗漏任何 HTML
16+
✅ **支持手动指定版本号**，默认读取 `package.json`
17+
18+
---
19+
20+
## **📦 安装**
21+
```sh
22+
# 使用 Yarn
23+
yarn add -D unplugin-version-injector
24+
25+
# 使用 npm
26+
npm install -D unplugin-version-injector
27+
```
28+
29+
---
30+
31+
## **🚀 使用方法**
32+
33+
### **📌 Webpack 4/5**
34+
修改 `webpack.config.js`：
35+
```js
36+
const versionInjectorPlugin = require('unplugin-version-injector');
37+
38+
module.exports = {
39+
plugins: [
40+
versionInjectorPlugin.webpack({
41+
version: '1.2.3', // （可选）手动指定版本号
42+
})
43+
],
44+
};
45+
```
46+
47+
---
48+
49+
### **📌 Vite**
50+
修改 `vite.config.js`：
51+
```js
52+
import versionInjectorPlugin from 'unplugin-version-injector';
53+
54+
export default {
55+
plugins: [versionInjectorPlugin.vite()]
56+
};
57+
```
58+
59+
---
60+
61+
### **📌 Rollup**
62+
修改 `rollup.config.js`：
63+
```js
64+
import versionInjectorPlugin from 'unplugin-version-injector';
65+
66+
export default {
67+
plugins: [versionInjectorPlugin.rollup()]
68+
};
69+
```
70+
71+
---
72+
73+
## **📜 生成的 HTML 示例**
74+
构建完成后，所有 HTML 文件将包含以下内容：
75+
```html
76+
<head>
77+
<meta name="version" content="1.2.3">
78+
<meta charset="UTF-8">
79+
<title>我的应用</title>
80+
</head>
81+
<body>
82+
<h1>Hello World</h1>
83+
<script>
84+
console.log("%c 版本号: 1.2.3 ", "background: #222; color: #00ff00; font-size: 12px; padding: 4px; border-radius: 4px;");
85+
console.log("%c 构建时间: 2024-03-01T12:00:00.000Z ", "background: #222; color: #ffcc00; font-size: 12px; padding: 4px; border-radius: 4px;");
86+
</script>
87+
</body>
88+
```
89+
90+
✅ **浏览器控制台输出 (带颜色日志)**
91+
```
92+
🟢 版本号: 1.2.3 (绿色)
93+
🟡 构建时间: 2024-03-01T12:00:00.000Z (黄色)
94+
```
95+
96+
---
97+
98+
## **🔧 配置选项**
99+
| **选项** | **类型** | **描述** | **默认值** |
100+
|---------|--------|---------|---------|
101+
| `version` | `string` | 手动指定版本号 (如 `1.2.3`) | 自动读取 `package.json` |
102+
| `log` | `boolean` | 是否在控制台打印版本信息 | `true` |
103+
| `dateFormat` | `string` | 自定义构建时间格式 | `ISO 8601` |
104+
105+
### **📌 自定义配置示例**
106+
```js
107+
versionInjectorPlugin.webpack({
108+
version: '2.0.0',
109+
log: false, // 关闭控制台日志
110+
});
111+
```
112+
113+
---
114+
115+
## **🌍 为什么选择 `unplugin-version-injector`？**
116+
- 🛠 **开箱即用**：安装后立即生效，无需额外配置
117+
- 🚀 **提升调试效率**：轻松查看当前版本信息
118+
- 📅 **追踪构建时间**：方便监控不同版本的发布时间
119+
- 🎯 **轻量高效**：几乎不会影响构建速度
120+
121+
---
122+
123+
## **📜 许可证**
124+
MIT License © 2024 [Nian YI](https://github.com/nianyi778)
125+
126+
---
127+
128+
## **💡 贡献**
129+
欢迎 PR！如有问题，欢迎在 GitHub 提交 issue。
130+
131+
**GitHub 仓库**：[🔗 unplugin-version-injector](https://github.com/nianyi778/unplugin-version-injector)
132+
133+
---
134+
135+
🔥 **`unplugin-version-injector` - 让你的应用版本管理更简单！** 🚀🚀🚀

‎package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "unplugin-version-injector",
3+
"version": "1.0.0",
4+
"author": {
5+
"name": "nianyi778",
6+
"email": "nianyi778@gmail.com"
7+
},
8+
"description": "A universal plugin to inject version and build time into HTML (supports Webpack, Vite, Rollup)",
9+
"main": "./dist/cjs/index.js",
10+
"module": "./dist/esm/index.js",
11+
"exports": {
12+
"require": "./dist/cjs/index.js",
13+
"import": "./dist/esm/index.js",
14+
"default": "./dist/esm/index.js"
15+
},
16+
"types": "./dist/index.d.ts",
17+
"scripts": {
18+
"clean": "rm -rf dist",
19+
"build:esm": "tsc --module ESNext --outDir dist/esm",
20+
"build:cjs": "tsc --module CommonJS --outDir dist/cjs",
21+
"build": "npm run clean && npm run build:esm && npm run build:cjs",
22+
"publish": "npm run build && npm publish"
23+
},
24+
"dependencies": {
25+
"unplugin": "^1.0.0"
26+
},
27+
"devDependencies": {
28+
"typescript": "^4.9.5",
29+
"webpack": "^5",
30+
"vite": "^4",
31+
"rollup": "^3"
32+
},
33+
"packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b"
34+
}

0 commit comments

Comments
 (0)