unplugin-version-injector 2.1.0-beta.3 → 2.1.1-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +45 -79
  2. package/README.zh-CN.md +23 -23
  3. package/dist/rollup.js +1 -3
  4. package/dist/rollup.mjs +1 -3
  5. package/dist/vite.js +1 -3
  6. package/dist/vite.mjs +1 -3
  7. package/dist/webpack.js +1 -3
  8. package/dist/webpack.mjs +1 -3
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -1,158 +1,124 @@
1
- # 🚀 `unplugin-version-injector` – Auto Inject Version & Build Time
1
+ # 🚀 `unplugin-version-injector` - Auto Inject Version & Build Time
2
2
 
3
- [🇨🇳 中文文档](./README.zh-CN.md) | [🇺🇸 English README](./README.md)
3
+ [🇨🇳 中文文档](./README.zh-CN.md) | [🇬🇧 English README](./README.md)
4
4
 
5
5
  ---
6
6
 
7
7
  ## 📌 Introduction
8
8
 
9
- **`unplugin-version-injector`** is a lightweight plugin that automatically injects **version number** and **build timestamp** into all your HTML files.
9
+ `unplugin-version-injector` is a lightweight plugin that automatically injects **version** and **build timestamp** into all HTML files. It supports **Webpack 4/5**, **Vite**, and **Rollup**, and works seamlessly with both **SPA** and **MPA** projects.
10
10
 
11
- ### ✨ Features
11
+ ---
12
+
13
+ ## ✨ Features
12
14
 
13
- - ✅ Auto-injects `<meta name="version">` into `<head>`
14
- - ✅ Auto-injects `<script>` for version & build log
15
- - ✅ Supports **Vite**, **Webpack 4/5**, and **Rollup**
16
- - ✅ Works with **SPA / MPA**
17
- - ✅ Fully configurable and tree-shakable
15
+ ✅ Injects `<meta name="version">` and `<meta name="project">` into the `<head>`
16
+ ✅ Injects `<script>` into the `<body>` to log version, name, and build time
17
+ ✅ Supports Webpack 4 & 5, Vite, Rollup
18
+ ✅ Fully compatible with Multi-Page Applications (MPA)
19
+ ✅ Customizable version, project name, date format, and theme-based console styling
18
20
 
19
21
  ---
20
22
 
21
23
  ## 📦 Installation
22
24
 
23
25
  ```bash
24
- # npm
25
- npm install -D unplugin-version-injector
26
-
27
- # yarn
26
+ # Using Yarn
28
27
  yarn add -D unplugin-version-injector
29
28
 
30
- # pnpm
31
- pnpm add -D unplugin-version-injector
29
+ # Using npm
30
+ npm install -D unplugin-version-injector
32
31
  ```
33
32
 
34
33
  ---
35
34
 
36
35
  ## 🚀 Usage
37
36
 
38
- ### ▶ Vite
37
+ ### 📌 Vite
39
38
 
40
39
  ```ts
41
- // vite.config.ts
42
- import versionInjector from 'unplugin-version-injector/vite'
40
+ import versionInjector from 'unplugin-version-injector/vite';
43
41
 
44
42
  export default {
45
43
  plugins: [versionInjector()],
46
- }
44
+ };
47
45
  ```
48
46
 
49
47
  ---
50
48
 
51
- ### ▶ Webpack (4 or 5)
49
+ ### 📌 Webpack 4/5
52
50
 
53
51
  ```js
54
- // webpack.config.js
55
- const versionInjector = require('unplugin-version-injector/webpack')
52
+ const versionInjector = require('unplugin-version-injector/webpack');
56
53
 
57
54
  module.exports = {
58
55
  plugins: [
59
56
  versionInjector({
60
- version: '1.2.3', // Optional custom version
57
+ version: '1.2.3', // Optional: manually specify version
61
58
  }),
62
59
  ],
63
- }
60
+ };
64
61
  ```
65
62
 
66
63
  ---
67
64
 
68
- ### ▶ Rollup
65
+ ### 📌 Rollup
69
66
 
70
67
  ```js
71
- // rollup.config.js
72
- import versionInjector from 'unplugin-version-injector/rollup'
68
+ import versionInjector from 'unplugin-version-injector/rollup';
73
69
 
74
70
  export default {
75
71
  plugins: [versionInjector()],
76
- }
72
+ };
77
73
  ```
78
74
 
79
75
  ---
80
76
 
81
- ## 📜 Output Example
77
+ ## 🧪 Example Output
82
78
 
83
- ### Injected into HTML
79
+ In your final HTML output:
84
80
 
85
81
  ```html
86
82
  <head>
87
83
  <meta name="version" content="1.2.3">
84
+ <meta name="project" content="my-project">
88
85
  </head>
89
86
  <body>
90
- ...
91
87
  <script data-injected="unplugin-version-injector">
92
- console.log("%c Version: 1.2.3 ", "background:#222; color:#00ff00;");
93
- console.log("%c Build Time: 2024-03-01T12:00:00Z ", "background:#222; color:#ffcc00;");
88
+ console.log("%c Version: 1.2.3 ", "background: #222; color: #00ff00;");
89
+ console.log("%c Project Name: my-project ", "background: #222; color: #0080ff;");
90
+ console.log("%c Build Time: 2024-04-01T12:00:00.000Z ", "background: #222; color: #ffcc00;");
94
91
  </script>
95
92
  </body>
96
93
  ```
97
94
 
98
95
  ---
99
96
 
100
- ## 🔧 Options
97
+ ## 🔧 Configuration Options
101
98
 
102
- | Option | Type | Description | Default |
103
- |--------------|-----------|------------------------------------------|--------------------------|
104
- | `version` | `string` | Custom version string | From `package.json` |
105
- | `log` | `boolean` | Whether to inject `<script>` console log | `true` |
106
- | `dateFormat` | `string` | Use `dayjs` format string (if installed) | ISO timestamp string |
107
- | `formatDate` | `fn` | Custom function for formatting date | `date.toISOString()` |
108
-
109
- ```ts
110
- versionInjector({
111
- version: '2.0.0',
112
- log: false,
113
- dateFormat: 'YYYY-MM-DD HH:mm:ss', // requires dayjs
114
- })
115
- ```
99
+ | Option | Type | Description | Default |
100
+ |---------------|-----------|-----------------------------------------|--------------------------|
101
+ | `version` | `string` | Custom version number | Read from package.json |
102
+ | `name` | `string` | Custom project name | Read from package.json |
103
+ | `log` | `boolean` | Whether to output console logs | `true` |
104
+ | `dateFormat` | `string` | Format for build time (e.g., YYYY-MM-DD)| ISO 8601 format |
116
105
 
117
106
  ---
118
107
 
119
- ## 💡 Why Use This?
108
+ ## 🌍 Why Use This Plugin?
120
109
 
121
- - 🔍 Track build info in production
122
- - 🕒 Know what you deployed & when
123
- - ✅ No manual version updates
124
- - 🚀 Great for debugging and multi-page apps
110
+ - 🛠 Plug and play
111
+ - 🚀 Helps identify deployed versions
112
+ - 📅 Track build timestamps
113
+ - 🎯 Works across major bundlers
114
+ - 🧩 Easily configurable
125
115
 
126
116
  ---
127
117
 
128
118
  ## 📜 License
129
119
 
130
- MIT © [@nianyi778](https://github.com/nianyi778)
131
-
132
- ---
133
-
134
- ## 📂 Project Structure
135
-
136
- ```
137
- unplugin-version-injector/
138
- ├── dist/
139
- ├── src/
140
- │ ├── vite.ts
141
- │ ├── webpack.ts
142
- │ ├── rollup.ts
143
- │ └── shared/
144
- ├── tsup.config.ts
145
- └── package.json
146
- ```
147
-
148
- ---
149
-
150
- ## 🤝 Contributing
151
-
152
- Feel free to submit issues or PRs 🙌
153
-
154
- GitHub → https://github.com/nianyi778/unplugin-version-injector
120
+ MIT License © 2024 [Nian YI](https://github.com/nianyi778)
155
121
 
156
122
  ---
157
123
 
158
- 🔥 Simple, reliable version & build timestamp injection – that just works!
124
+ 🔥 `unplugin-version-injector` – the simplest way to track version and build info!
package/README.zh-CN.md CHANGED
@@ -5,16 +5,17 @@
5
5
  ---
6
6
 
7
7
  ## **📌 插件简介**
8
- `unplugin-version-injector` 是一个轻量级插件，可在构建时自动向所有 HTML 文件注入 **版本号** 和 **构建时间戳**。支持 **Webpack 4/5、Vite 和 Rollup**，非常适合 **SPA / MPA 项目**使用。
8
+ `unplugin-version-injector` 是一个轻量级插件，可在构建时自动向所有 HTML 文件注入 **版本号**、**构建时间戳** 和 **项目名**。支持 **Webpack 4/5、Vite 和 Rollup**，适用于 **SPA / MPA 项目**。
9
9
 
10
10
  ---
11
11
 
12
12
  ## **✨ 功能亮点**
13
- ✅ 自动注入 `<meta name="version">` 到 HTML 的 `<head>` 中
14
- ✅ 自动注入 `<script>`，控制台输出 `版本号` 和 `构建时间`
13
+ ✅ 自动注入 `<meta name="version">` 和 `<meta name="project">` 到 HTML `<head>`
14
+ ✅ 自动注入 `<script>`，控制台输出 `项目名`、`版本号` 和 `构建时间`
15
15
  ✅ 支持 Webpack 4 / 5、Vite、Rollup
16
16
  ✅ 完美兼容多页面应用（MPA）
17
- ✅ 支持自定义版本号、时间格式，默认读取 `package.json`
17
+ ✅ 支持自定义版本号、项目名、时间格式，默认读取 `package.json`
18
+ ✅ 控制台输出支持自动适配深/浅主题配色
18
19
 
19
20
  ---
20
21
 
@@ -52,6 +53,7 @@ module.exports = {
52
53
  plugins: [
53
54
  versionInjector({
54
55
  version: '1.2.3', // 可选，自定义版本号
56
+ name: 'MyApp' // 可选，自定义项目名
55
57
  }),
56
58
  ],
57
59
  };
@@ -78,43 +80,41 @@ export default {
78
80
  ```html
79
81
  <head>
80
82
  <meta name="version" content="1.2.3">
81
- ...
83
+ <meta name="project" content="MyApp">
82
84
  </head>
83
85
  <body>
84
86
  ...
85
- <script>
86
- console.log("%c Version: 1.2.3 ", "background: #222; color: #00ff00;");
87
- console.log("%c Build Time: 2024-04-01T12:00:00.000Z ", "background: #222; color: #ffcc00;");
87
+ <script data-injected="unplugin-version-injector">
88
+ console.log(...);
88
89
  </script>
89
90
  </body>
90
91
  ```
91
92
 
92
- 控制台输出：
93
+ 控制台输出（根据主题自适应配色）：
93
94
 
94
95
  ```
96
+ 🟦 Project: MyApp
95
97
  🟢 Version: 1.2.3
96
- 🟡 Build Time: 2024-04-01T12:00:00.000Z
98
+ 🟡 Build Time: 2024-06-04T12:00:00.000Z
97
99
  ```
98
100
 
99
101
  ---
100
102
 
101
103
  ## **🔧 配置项说明**
102
104
 
103
- | 选项 | 类型 | 说明 | 默认值 |
104
- |----------------|-----------|-------------------------------|------------------|
105
- | `version` | `string` | 指定版本号 | 自动读取 package.json |
106
- | `log` | `boolean` | 是否输出控制台日志 | `true` |
107
- | `dateFormat` | `string` | 使用 dayjs 自定义时间格式 | `ISO 格式` |
105
+ | 选项 | 类型 | 说明 | 默认值 |
106
+ |--------------|-----------|----------------------------------|---------------------|
107
+ | `version` | `string` | 自定义版本号 | 自动读取 package.json |
108
+ | `name` | `string` | 自定义项目名 | 自动读取 package.json |
109
+ | `log` | `boolean` | 是否输出控制台日志 | `true` |
110
+ | `formatDate` | `Date => string` | 自定义时间格式函数 | ISO 格式 |
108
111
 
109
112
  ---
110
113
 
111
- ## **🌍 为什么选择这个插件？**
112
-
113
- - 🛠 零配置，开箱即用
114
- - 🚀 快速定位版本问题
115
- - 📅 跟踪构建时间
116
- - 🎯 支持多构建工具
117
- - 🧩 高度可配置，灵活插拔
114
+ ## **🎨 控制台配色自动适配说明**
115
+ - 插件自动判断浏览器是否为暗色模式（`window.matchMedia('(prefers-color-scheme: dark')`）；
116
+ - 深色模式下将使用亮色字体以确保可读性；
117
+ - 你也可以重写 `<script>` 注入逻辑以自定义样式。
118
118
 
119
119
  ---
120
120
 
@@ -123,4 +123,4 @@ MIT License © 2024 [Nian YI](https://github.com/nianyi778)
123
123
 
124
124
  ---
125
125
 
126
- 🔥 `unplugin-version-injector` —— 最轻巧的版本信息注入解决方案！
126
+ 🔥 `unplugin-version-injector` —— 最轻巧的版本信息注入解决方案！
package/dist/rollup.js CHANGED
@@ -47,11 +47,9 @@ function createVersionInjector(options = {}) {
47
47
  var border = 'border-radius: 4px; padding: 4px; font-size: 12px;';
48
48
  var styles = {
49
49
  version: \`background: \${bg}; color: #00c853; \${border}\`,
50
- name: \`background: \${bg}; color: #1e88e5; \${border}\`,
51
50
  time: \`background: \${bg}; color: #ffab00; \${border}\`,
52
51
  };
53
- console.log("%c Version: ${version} ", styles.version);
54
- console.log("%c Project: ${name} ", styles.name);
52
+ console.log("%c ${name}@${version} ", styles.version);
55
53
  console.log("%c Build Time: ${buildTime} ", styles.time);
56
54
  })();
57
55
  </script>`;
package/dist/rollup.mjs CHANGED
@@ -40,11 +40,9 @@ function createVersionInjector(options = {}) {
40
40
  var border = 'border-radius: 4px; padding: 4px; font-size: 12px;';
41
41
  var styles = {
42
42
  version: \`background: \${bg}; color: #00c853; \${border}\`,
43
- name: \`background: \${bg}; color: #1e88e5; \${border}\`,
44
43
  time: \`background: \${bg}; color: #ffab00; \${border}\`,
45
44
  };
46
- console.log("%c Version: ${version} ", styles.version);
47
- console.log("%c Project: ${name} ", styles.name);
45
+ console.log("%c ${name}@${version} ", styles.version);
48
46
  console.log("%c Build Time: ${buildTime} ", styles.time);
49
47
  })();
50
48
  </script>`;
package/dist/vite.js CHANGED
@@ -47,11 +47,9 @@ function createVersionInjector(options = {}) {
47
47
  var border = 'border-radius: 4px; padding: 4px; font-size: 12px;';
48
48
  var styles = {
49
49
  version: \`background: \${bg}; color: #00c853; \${border}\`,
50
- name: \`background: \${bg}; color: #1e88e5; \${border}\`,
51
50
  time: \`background: \${bg}; color: #ffab00; \${border}\`,
52
51
  };
53
- console.log("%c Version: ${version} ", styles.version);
54
- console.log("%c Project: ${name} ", styles.name);
52
+ console.log("%c ${name}@${version} ", styles.version);
55
53
  console.log("%c Build Time: ${buildTime} ", styles.time);
56
54
  })();
57
55
  </script>`;
package/dist/vite.mjs CHANGED
@@ -40,11 +40,9 @@ function createVersionInjector(options = {}) {
40
40
  var border = 'border-radius: 4px; padding: 4px; font-size: 12px;';
41
41
  var styles = {
42
42
  version: \`background: \${bg}; color: #00c853; \${border}\`,
43
- name: \`background: \${bg}; color: #1e88e5; \${border}\`,
44
43
  time: \`background: \${bg}; color: #ffab00; \${border}\`,
45
44
  };
46
- console.log("%c Version: ${version} ", styles.version);
47
- console.log("%c Project: ${name} ", styles.name);
45
+ console.log("%c ${name}@${version} ", styles.version);
48
46
  console.log("%c Build Time: ${buildTime} ", styles.time);
49
47
  })();
50
48
  </script>`;
package/dist/webpack.js CHANGED
@@ -2724,11 +2724,9 @@ function createVersionInjector(options = {}) {
2724
2724
  var border = 'border-radius: 4px; padding: 4px; font-size: 12px;';
2725
2725
  var styles = {
2726
2726
  version: \`background: \${bg}; color: #00c853; \${border}\`,
2727
- name: \`background: \${bg}; color: #1e88e5; \${border}\`,
2728
2727
  time: \`background: \${bg}; color: #ffab00; \${border}\`,
2729
2728
  };
2730
- console.log("%c Version: ${version} ", styles.version);
2731
- console.log("%c Project: ${name} ", styles.name);
2729
+ console.log("%c ${name}@${version} ", styles.version);
2732
2730
  console.log("%c Build Time: ${buildTime} ", styles.time);
2733
2731
  })();
2734
2732
  </script>`;
package/dist/webpack.mjs CHANGED
@@ -2717,11 +2717,9 @@ function createVersionInjector(options = {}) {
2717
2717
  var border = 'border-radius: 4px; padding: 4px; font-size: 12px;';
2718
2718
  var styles = {
2719
2719
  version: \`background: \${bg}; color: #00c853; \${border}\`,
2720
- name: \`background: \${bg}; color: #1e88e5; \${border}\`,
2721
2720
  time: \`background: \${bg}; color: #ffab00; \${border}\`,
2722
2721
  };
2723
- console.log("%c Version: ${version} ", styles.version);
2724
- console.log("%c Project: ${name} ", styles.name);
2722
+ console.log("%c ${name}@${version} ", styles.version);
2725
2723
  console.log("%c Build Time: ${buildTime} ", styles.time);
2726
2724
  })();
2727
2725
  </script>`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unplugin-version-injector",
3
- "version": "2.1.0-beta.3",
3
+ "version": "2.1.1-beta.0",
4
4
  "author": "Nian Yi <nianyi778@gmail.com>",
5
5
  "license": "MIT",
6
6
  "description": "A universal plugin to inject version and build time into HTML (supports Webpack, Vite, Rollup)",