unplugin-version-injector 1.0.2 โ 1.1.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.
- package/README.md +110 -66
- package/README.zh-CN.md +109 -66
- package/dist/cjs/index.d.ts +3 -0
- package/dist/cjs/index.js +95 -0
- package/dist/cjs/types.d.ts +7 -0
- package/dist/cjs/types.js +2 -0
- package/dist/cjs/utils.d.ts +4 -0
- package/dist/cjs/utils.js +27 -0
- package/dist/esm/index.d.ts +3 -0
- package/dist/esm/index.js +93 -0
- package/dist/esm/types.d.ts +7 -0
- package/dist/esm/types.js +1 -0
- package/dist/esm/utils.d.ts +4 -0
- package/dist/esm/utils.js +19 -0
- package/package.json +3 -2
- package/src/index.ts +0 -77
- package/src/types.ts +0 -6
- package/src/utils.ts +0 -20
- package/tsconfig.json +0 -15
package/README.md
CHANGED
@@ -1,134 +1,178 @@
|
|
1
|
-
|
1
|
+
# ๐ `unplugin-version-injector` - Auto Inject Version & Build Time into HTML
|
2
2
|
|
3
|
-
[๐จ๐ณ
|
3
|
+
[๐จ๐ณ ไธญๆๆๆกฃ](./README.zh-CN.md) | [๐บ๐ธ English README](./README.md)
|
4
4
|
|
5
5
|
---
|
6
6
|
|
7
|
-
##
|
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)**.
|
7
|
+
## ๐ Introduction
|
9
8
|
|
10
|
-
|
11
|
-
|
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`
|
9
|
+
`unplugin-version-injector` is a lightweight universal plugin that automatically injects **version number** and **build timestamp** into HTML files during build.
|
10
|
+
It supports **Webpack 4/5**, **Vite**, and **Rollup**, and works perfectly in **SPA** and **MPA** projects.
|
16
11
|
|
17
12
|
---
|
18
13
|
|
19
|
-
##
|
20
|
-
|
21
|
-
|
22
|
-
|
14
|
+
## โจ Features
|
15
|
+
|
16
|
+
- โ
Auto-injects `<meta name="version">` into HTML `<head>`
|
17
|
+
- โ
Auto-injects `<script>` to log version/build time to the browser console
|
18
|
+
- โ
Supports Webpack 4, Webpack 5, Vite, and Rollup
|
19
|
+
- โ
Supports Multi-Page Applications (MPA)
|
20
|
+
- โ
Supports custom version & timestamp format
|
21
|
+
- โ
Tiny, fast, and zero-runtime dependency
|
22
|
+
|
23
|
+
---
|
24
|
+
|
25
|
+
## ๐ฆ Installation
|
23
26
|
|
24
|
-
|
27
|
+
```bash
|
28
|
+
# With npm
|
25
29
|
npm install -D unplugin-version-injector
|
30
|
+
|
31
|
+
# With yarn
|
32
|
+
yarn add -D unplugin-version-injector
|
26
33
|
```
|
27
34
|
|
28
35
|
---
|
29
36
|
|
30
|
-
##
|
37
|
+
## ๐ Usage
|
31
38
|
|
32
|
-
###
|
33
|
-
Modify your `webpack.config.js`:
|
34
|
-
```js
|
35
|
-
const versionInjectorPlugin = require('unplugin-version-injector');
|
39
|
+
### โ
Vite
|
36
40
|
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
],
|
41
|
+
```ts
|
42
|
+
// vite.config.ts
|
43
|
+
import versionInjector from 'unplugin-version-injector/vite';
|
44
|
+
|
45
|
+
export default {
|
46
|
+
plugins: [versionInjector()],
|
43
47
|
};
|
44
48
|
```
|
45
49
|
|
46
50
|
---
|
47
51
|
|
48
|
-
###
|
49
|
-
|
52
|
+
### โ
Webpack 4 / 5
|
53
|
+
|
50
54
|
```js
|
51
|
-
|
55
|
+
// webpack.config.js
|
56
|
+
const versionInjector = require('unplugin-version-injector/webpack');
|
52
57
|
|
53
|
-
|
54
|
-
plugins: [
|
58
|
+
module.exports = {
|
59
|
+
plugins: [
|
60
|
+
versionInjector({
|
61
|
+
version: '1.2.3',
|
62
|
+
injectToHead: true,
|
63
|
+
injectToBody: true,
|
64
|
+
}),
|
65
|
+
],
|
55
66
|
};
|
56
67
|
```
|
57
68
|
|
58
69
|
---
|
59
70
|
|
60
|
-
###
|
61
|
-
|
71
|
+
### โ
Rollup
|
72
|
+
|
62
73
|
```js
|
63
|
-
|
74
|
+
// rollup.config.js
|
75
|
+
import versionInjector from 'unplugin-version-injector/rollup';
|
64
76
|
|
65
77
|
export default {
|
66
|
-
plugins: [
|
78
|
+
plugins: [
|
79
|
+
versionInjector({
|
80
|
+
dateFormat: 'YYYY-MM-DD HH:mm:ss',
|
81
|
+
}),
|
82
|
+
],
|
67
83
|
};
|
68
84
|
```
|
69
85
|
|
70
86
|
---
|
71
87
|
|
72
|
-
##
|
73
|
-
|
88
|
+
## ๐ Output Example
|
89
|
+
|
74
90
|
```html
|
75
91
|
<head>
|
76
92
|
<meta name="version" content="1.2.3">
|
77
93
|
<meta charset="UTF-8">
|
78
|
-
<title>My App</title>
|
79
94
|
</head>
|
80
95
|
<body>
|
81
|
-
<h1>Hello
|
96
|
+
<h1>Hello</h1>
|
82
97
|
<script>
|
83
|
-
console.log("%c Version: 1.2.3 ", "background: #222; color: #00ff00; font-size: 12px;
|
84
|
-
console.log("%c Build Time:
|
98
|
+
console.log("%c Version: 1.2.3 ", "background: #222; color: #00ff00; font-size: 12px;");
|
99
|
+
console.log("%c Build Time: 2025-04-10 14:00:00 ", "background: #222; color: #ffcc00; font-size: 12px;");
|
85
100
|
</script>
|
86
101
|
</body>
|
87
102
|
```
|
88
103
|
|
89
|
-
โ
|
104
|
+
โ
Console output example:
|
105
|
+
|
90
106
|
```
|
91
|
-
๐ข Version: 1.2.3
|
92
|
-
๐ก Build Time:
|
107
|
+
๐ข Version: 1.2.3
|
108
|
+
๐ก Build Time: 2025-04-10 14:00:00
|
93
109
|
```
|
94
110
|
|
95
111
|
---
|
96
112
|
|
97
|
-
##
|
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` |
|
113
|
+
## ๐ง Configuration Options
|
103
114
|
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
115
|
+
| Option | Type | Default | Description |
|
116
|
+
|----------------|-----------------------------|-----------------------------------|-------------|
|
117
|
+
| `version` | `string` | Auto from `package.json` | Manually specify a version |
|
118
|
+
| `formatDate` | `(date: Date) => string` | `YYYY-MM-DD HH:mm:ss` | Custom date formatter |
|
119
|
+
| `dateFormat` | `string` | None | Uses `dayjs` to format time (requires installation) |
|
120
|
+
| `injectToHead` | `boolean` | `true` | Injects `<meta name="version">` into `<head>` |
|
121
|
+
| `injectToBody` | `boolean` | `true` | Injects version log `<script>` into `<body>` |
|
122
|
+
|
123
|
+
๐ฆ If using `dateFormat`, please install `dayjs` manually:
|
124
|
+
|
125
|
+
```bash
|
126
|
+
npm install dayjs
|
127
|
+
```
|
128
|
+
|
129
|
+
---
|
130
|
+
|
131
|
+
## ๐ Custom Example
|
132
|
+
|
133
|
+
```ts
|
134
|
+
versionInjector({
|
135
|
+
version: '2.0.0',
|
136
|
+
injectToHead: true,
|
137
|
+
injectToBody: false,
|
138
|
+
dateFormat: 'YYYY/MM/DD HH:mm:ss',
|
109
139
|
});
|
110
140
|
```
|
111
141
|
|
112
142
|
---
|
113
143
|
|
114
|
-
##
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
144
|
+
## ๐งช Supported Build Tools
|
145
|
+
|
146
|
+
| Build Tool | Supported | Description |
|
147
|
+
|--------------|-----------|----------------------------------|
|
148
|
+
| **Vite** | โ
| Uses `transformIndexHtml` hook |
|
149
|
+
| **Webpack 5**| โ
| Uses `processAssets` hook |
|
150
|
+
| **Webpack 4**| โ
| Uses `emit` hook |
|
151
|
+
| **Rollup** | โ
| Uses `generateBundle` hook |
|
119
152
|
|
120
153
|
---
|
121
154
|
|
122
|
-
##
|
123
|
-
|
155
|
+
## ๐ก Use Cases
|
156
|
+
|
157
|
+
- ๐งช Quickly identify deployed version & build time
|
158
|
+
- ๐
Useful for deployment tracking / diagnostics
|
159
|
+
- โก๏ธ No runtime cost โ build-time only
|
124
160
|
|
125
161
|
---
|
126
162
|
|
127
|
-
##
|
128
|
-
|
163
|
+
## ๐ License
|
164
|
+
|
165
|
+
MIT ยฉ [Nian YI](https://github.com/nianyi778)
|
166
|
+
|
167
|
+
---
|
168
|
+
|
169
|
+
## ๐ค Contributing
|
170
|
+
|
171
|
+
Contributions are welcome!
|
129
172
|
|
130
|
-
|
173
|
+
GitHub Repo:
|
174
|
+
[https://github.com/nianyi778/unplugin-version-injector](https://github.com/nianyi778/unplugin-version-injector)
|
131
175
|
|
132
176
|
---
|
133
177
|
|
134
|
-
๐ฅ
|
178
|
+
๐ฅ `unplugin-version-injector` โ The simplest way to track version and build time in your HTML!
|
package/README.zh-CN.md
CHANGED
@@ -1,135 +1,178 @@
|
|
1
|
-
#
|
1
|
+
# ๐ `unplugin-version-injector` - ่ชๅจๆณจๅ
ฅ็ๆฌๅท & ๆๅปบๆถ้ด
|
2
2
|
|
3
|
-
[๐ฌ๐ง English README](./README.md) | [๐จ๐ณ ไธญๆ README](./README.zh-CN.md)
|
3
|
+
[๐ฌ๐ง English README](./README.md) | [๐จ๐ณ ไธญๆ README](./README.zh-CN.md)
|
4
4
|
|
5
5
|
---
|
6
6
|
|
7
|
-
##
|
8
|
-
`unplugin-version-injector` ๆฏไธไธช **่ฝป้็บง** ๆไปถ๏ผๅฏ่ชๅจๅฐ **็ๆฌๅท** ๅ **ๆๅปบๆถ้ด** ๆณจๅ
ฅๅฐๆๆ HTML ๆไปถไธญใ
|
9
|
-
ๆฏๆ **Webpack 4/5ใVite ๅ Rollup**๏ผ้็จไบ **ๅ้กตๅบ็จ (SPA) ๅ ๅค้กตๅบ็จ (MPA)**ใ
|
7
|
+
## ๐ ็ฎไป
|
10
8
|
|
11
|
-
|
12
|
-
|
13
|
-
โ
**่ชๅจๆณจๅ
ฅ `<script>`**๏ผๅจๆต่งๅจๆงๅถๅฐๆๅฐ `็ๆฌๅท` & `ๆๅปบๆถ้ด`
|
14
|
-
โ
**ๅ
ผๅฎน Webpack 4 & 5ใVite ๅ Rollup**
|
15
|
-
โ
**ๆฏๆๅค้กตๅบ็จ (MPA)**๏ผไธไผ้ๆผไปปไฝ HTML
|
16
|
-
โ
**ๆฏๆๆๅจๆๅฎ็ๆฌๅท**๏ผ้ป่ฎค่ฏปๅ `package.json`
|
9
|
+
`unplugin-version-injector` ๆฏไธไธช **่ฝป้็บง้็จๆไปถ**๏ผๅฏๅจๆๅปบๆถ่ชๅจๅฐ **็ๆฌๅท** ๅ **ๆๅปบๆถ้ด** ๆณจๅ
ฅ HTML ๆไปถไธญใ
|
10
|
+
ๅ
ผๅฎน **Webpack 4/5ใVite ๅ Rollup**๏ผ้็จไบ **SPA / MPA** ๅค็ง้กน็ฎ็ปๆใ
|
17
11
|
|
18
12
|
---
|
19
13
|
|
20
|
-
##
|
21
|
-
|
22
|
-
|
23
|
-
|
14
|
+
## โจ ๅ่ฝ็น็น
|
15
|
+
|
16
|
+
- โ
่ชๅจๆณจๅ
ฅ `<meta name="version">` ๅฐ HTML `<head>`
|
17
|
+
- โ
่ชๅจๆณจๅ
ฅ `<script>`๏ผๅจๆต่งๅจๆงๅถๅฐๆๅฐ็ๆฌๅทไธๆๅปบๆถ้ด
|
18
|
+
- โ
ๆฏๆ Webpack 4ใWebpack 5ใViteใRollup
|
19
|
+
- โ
ๆฏๆๅค้กตๅบ็จ๏ผMPA๏ผ๏ผ่ชๅจๅค็ๆๆ HTML ๆไปถ
|
20
|
+
- โ
ๆฏๆ่ชๅฎไน็ๆฌๅทใ่ชๅฎไนๆๅปบๆถ้ดๆ ผๅผ
|
21
|
+
- โ
ไฝ็งฏๅฐใ้ถ่ฟ่กๆถไพ่ต
|
22
|
+
|
23
|
+
---
|
24
|
+
|
25
|
+
## ๐ฆ ๅฎ่ฃ
|
24
26
|
|
27
|
+
```bash
|
25
28
|
# ไฝฟ็จ npm
|
26
29
|
npm install -D unplugin-version-injector
|
30
|
+
|
31
|
+
# ไฝฟ็จ yarn
|
32
|
+
yarn add -D unplugin-version-injector
|
27
33
|
```
|
28
34
|
|
29
35
|
---
|
30
36
|
|
31
|
-
##
|
37
|
+
## ๐ ไฝฟ็จๆนๆณ
|
32
38
|
|
33
|
-
###
|
34
|
-
ไฟฎๆน `webpack.config.js`๏ผ
|
35
|
-
```js
|
36
|
-
const versionInjectorPlugin = require('unplugin-version-injector');
|
39
|
+
### โ
Vite
|
37
40
|
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
],
|
41
|
+
```ts
|
42
|
+
// vite.config.ts
|
43
|
+
import versionInjector from 'unplugin-version-injector/vite';
|
44
|
+
|
45
|
+
export default {
|
46
|
+
plugins: [versionInjector()],
|
44
47
|
};
|
45
48
|
```
|
46
49
|
|
47
50
|
---
|
48
51
|
|
49
|
-
###
|
50
|
-
|
52
|
+
### โ
Webpack 4 / 5
|
53
|
+
|
51
54
|
```js
|
52
|
-
|
55
|
+
// webpack.config.js
|
56
|
+
const versionInjector = require('unplugin-version-injector/webpack');
|
53
57
|
|
54
|
-
|
55
|
-
plugins: [
|
58
|
+
module.exports = {
|
59
|
+
plugins: [
|
60
|
+
versionInjector({
|
61
|
+
version: '1.2.3',
|
62
|
+
injectToHead: true,
|
63
|
+
injectToBody: true,
|
64
|
+
}),
|
65
|
+
],
|
56
66
|
};
|
57
67
|
```
|
58
68
|
|
59
69
|
---
|
60
70
|
|
61
|
-
###
|
62
|
-
|
71
|
+
### โ
Rollup
|
72
|
+
|
63
73
|
```js
|
64
|
-
|
74
|
+
// rollup.config.js
|
75
|
+
import versionInjector from 'unplugin-version-injector/rollup';
|
65
76
|
|
66
77
|
export default {
|
67
|
-
plugins: [
|
78
|
+
plugins: [
|
79
|
+
versionInjector({
|
80
|
+
dateFormat: 'YYYY-MM-DD HH:mm:ss',
|
81
|
+
}),
|
82
|
+
],
|
68
83
|
};
|
69
84
|
```
|
70
85
|
|
71
86
|
---
|
72
87
|
|
73
|
-
##
|
74
|
-
|
88
|
+
## ๐ ๆณจๅ
ฅๆๆ็คบไพ
|
89
|
+
|
75
90
|
```html
|
76
91
|
<head>
|
77
92
|
<meta name="version" content="1.2.3">
|
78
93
|
<meta charset="UTF-8">
|
79
|
-
<title>ๆ็ๅบ็จ</title>
|
80
94
|
</head>
|
81
95
|
<body>
|
82
|
-
<h1>Hello
|
96
|
+
<h1>Hello</h1>
|
83
97
|
<script>
|
84
|
-
console.log("%c ็ๆฌๅท: 1.2.3 ", "background: #222; color: #00ff00; font-size: 12px;
|
85
|
-
console.log("%c ๆๅปบๆถ้ด:
|
98
|
+
console.log("%c ็ๆฌๅท: 1.2.3 ", "background: #222; color: #00ff00; font-size: 12px;");
|
99
|
+
console.log("%c ๆๅปบๆถ้ด: 2025-04-10 14:00:00 ", "background: #222; color: #ffcc00; font-size: 12px;");
|
86
100
|
</script>
|
87
101
|
</body>
|
88
102
|
```
|
89
103
|
|
90
|
-
โ
|
104
|
+
โ
ๆงๅถๅฐ่พๅบ็คบไพ๏ผ
|
105
|
+
|
91
106
|
```
|
92
|
-
๐ข ็ๆฌๅท: 1.2.3
|
93
|
-
๐ก ๆๅปบๆถ้ด:
|
107
|
+
๐ข ็ๆฌๅท: 1.2.3
|
108
|
+
๐ก ๆๅปบๆถ้ด: 2025-04-10 14:00:00
|
94
109
|
```
|
95
110
|
|
96
111
|
---
|
97
112
|
|
98
|
-
##
|
99
|
-
| **้้กน** | **็ฑปๅ** | **ๆ่ฟฐ** | **้ป่ฎคๅผ** |
|
100
|
-
|---------|--------|---------|---------|
|
101
|
-
| `version` | `string` | ๆๅจๆๅฎ็ๆฌๅท (ๅฆ `1.2.3`) | ่ชๅจ่ฏปๅ `package.json` |
|
102
|
-
| `log` | `boolean` | ๆฏๅฆๅจๆงๅถๅฐๆๅฐ็ๆฌไฟกๆฏ | `true` |
|
103
|
-
| `dateFormat` | `string` | ่ชๅฎไนๆๅปบๆถ้ดๆ ผๅผ | `ISO 8601` |
|
113
|
+
## ๐ง ้
็ฝฎ้้กน
|
104
114
|
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
115
|
+
| ้้กน | ็ฑปๅ | ้ป่ฎคๅผ | ่ฏดๆ |
|
116
|
+
|-----------------|-------------------------------|-------------------------------|------|
|
117
|
+
| `version` | `string` | ่ชๅจ่ฏปๅ `package.json` | ๆๅจๆๅฎ็ๆฌๅท |
|
118
|
+
| `formatDate` | `(date: Date) => string` | `YYYY-MM-DD HH:mm:ss` | ่ชๅฎไนๆถ้ดๆ ผๅผๅฝๆฐ |
|
119
|
+
| `dateFormat` | `string` | ๆ | ไฝฟ็จ `dayjs` ๆ ผๅผๅ๏ผ้็จๆทๅฎ่ฃ
๏ผ |
|
120
|
+
| `injectToHead` | `boolean` | `true` | ๆฏๅฆๆณจๅ
ฅ `<meta>` ๆ ็ญพ |
|
121
|
+
| `injectToBody` | `boolean` | `true` | ๆฏๅฆๆณจๅ
ฅๆงๅถๅฐๆฅๅฟ่ๆฌ |
|
122
|
+
|
123
|
+
๐ฆ ๅฆๆไฝฟ็จ `dateFormat`๏ผ่ฏทๅ
ๅฎ่ฃ
๏ผ
|
124
|
+
|
125
|
+
```bash
|
126
|
+
npm install dayjs
|
127
|
+
```
|
128
|
+
|
129
|
+
---
|
130
|
+
|
131
|
+
## ๐ ่ชๅฎไน้
็ฝฎ็คบไพ
|
132
|
+
|
133
|
+
```ts
|
134
|
+
versionInjector({
|
135
|
+
version: '2.0.0',
|
136
|
+
injectToHead: true,
|
137
|
+
injectToBody: false,
|
138
|
+
dateFormat: 'YYYY/MM/DD HH:mm:ss',
|
110
139
|
});
|
111
140
|
```
|
112
141
|
|
113
142
|
---
|
114
143
|
|
115
|
-
##
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
144
|
+
## ๐งช ๆฏๆ็ๆๅปบๅทฅๅ
ท
|
145
|
+
|
146
|
+
| ๆๅปบๅทฅๅ
ท | ็ถๆ | ่ฏดๆ |
|
147
|
+
|--------------|----------|------|
|
148
|
+
| **Vite** | โ
ๆฏๆ | ไฝฟ็จ `transformIndexHtml` |
|
149
|
+
| **Webpack 5**| โ
ๆฏๆ | ไฝฟ็จ `processAssets` ้ฉๅญ |
|
150
|
+
| **Webpack 4**| โ
ๆฏๆ | ไฝฟ็จ `emit` ้ฉๅญ |
|
151
|
+
| **Rollup** | โ
ๆฏๆ | ไฝฟ็จ `generateBundle` ้ฉๅญ |
|
120
152
|
|
121
153
|
---
|
122
154
|
|
123
|
-
##
|
124
|
-
|
155
|
+
## ๐ก ๅบ็จๅบๆฏ
|
156
|
+
|
157
|
+
- ๐งช ๅฟซ้ๅฎไฝ้จ็ฝฒ็ๆฌไธๆๅปบๆถ้ด
|
158
|
+
- ๐
้จ็ฝฒ็ๆง / ่ฟ็ปดๅฏ่งๆง
|
159
|
+
- โก๏ธ ้ถ่ฟ่กๆถไพ่ต๏ผๆๅปบๆถๆณจๅ
ฅ
|
125
160
|
|
126
161
|
---
|
127
162
|
|
128
|
-
##
|
129
|
-
|
163
|
+
## ๐ ่ฎธๅฏ่ฏ
|
164
|
+
|
165
|
+
MIT ยฉ [Nian YI](https://github.com/nianyi778)
|
166
|
+
|
167
|
+
---
|
168
|
+
|
169
|
+
## ๐ค ๅไธ่ดก็ฎ
|
170
|
+
|
171
|
+
ๆฌข่ฟๆไบค PR ๅ issue๏ผ
|
130
172
|
|
131
|
-
|
173
|
+
GitHub ไปๅบ๏ผ
|
174
|
+
[https://github.com/nianyi778/unplugin-version-injector](https://github.com/nianyi778/unplugin-version-injector)
|
132
175
|
|
133
176
|
---
|
134
177
|
|
135
|
-
๐ฅ
|
178
|
+
๐ฅ `unplugin-version-injector` โโ ่ฎฉไฝ ็ๅบ็จ็ๆฌไฟกๆฏ้ๆใๅฏ่ฟฝ่ธช๏ผ
|
@@ -0,0 +1,95 @@
|
|
1
|
+
"use strict";
|
2
|
+
// Updated version with support for both `formatDate` and `dateFormat`
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
const unplugin_1 = require("unplugin");
|
5
|
+
const webpack_1 = require("webpack");
|
6
|
+
const utils_1 = require("./utils");
|
7
|
+
let dayjs;
|
8
|
+
const VersionInjectorPlugin = (0, unplugin_1.createUnplugin)((options = {}) => {
|
9
|
+
const { version = (0, utils_1.getPackageVersion)(), formatDate, dateFormat, injectToHead = true, injectToBody = true, } = options;
|
10
|
+
// resolve date formatter
|
11
|
+
let resolvedFormatDate = utils_1.defaultFormatDate;
|
12
|
+
if (typeof formatDate === 'function') {
|
13
|
+
resolvedFormatDate = formatDate;
|
14
|
+
}
|
15
|
+
else if (typeof dateFormat === 'string') {
|
16
|
+
try {
|
17
|
+
dayjs = require('dayjs');
|
18
|
+
resolvedFormatDate = (d) => dayjs(d).format(dateFormat);
|
19
|
+
}
|
20
|
+
catch (err) {
|
21
|
+
console.warn('[unplugin-version-injector] To use `dateFormat`, please install `dayjs` manually.');
|
22
|
+
}
|
23
|
+
}
|
24
|
+
if (!injectToHead && !injectToBody) {
|
25
|
+
return { name: 'unplugin-version-injector' };
|
26
|
+
}
|
27
|
+
const buildTime = resolvedFormatDate(new Date());
|
28
|
+
const metaTag = `<meta name="version" content="${version}">\n`;
|
29
|
+
const logScript = `
|
30
|
+
<script>
|
31
|
+
console.log("%c Version: ${version} ", "background: #222; color: #00ff00; font-size: 12px; padding: 4px; border-radius: 4px;");
|
32
|
+
console.log("%c Build Time: ${buildTime} ", "background: #222; color: #ffcc00; font-size: 12px; padding: 4px; border-radius: 4px;");
|
33
|
+
</script>`;
|
34
|
+
function processHtml(html) {
|
35
|
+
if (injectToHead && !html.includes('<meta name="version"')) {
|
36
|
+
html = html.replace(/<head>/, `<head>\n ${metaTag}`);
|
37
|
+
}
|
38
|
+
if (injectToBody && !html.includes('<script>console.log("%c Version:')) {
|
39
|
+
html = html.replace('</body>', ` ${logScript}\n</body>`);
|
40
|
+
}
|
41
|
+
return html;
|
42
|
+
}
|
43
|
+
return {
|
44
|
+
name: 'unplugin-version-injector',
|
45
|
+
vite: {
|
46
|
+
transformIndexHtml(html) {
|
47
|
+
return processHtml(html);
|
48
|
+
},
|
49
|
+
},
|
50
|
+
rollup: {
|
51
|
+
generateBundle(_, bundle) {
|
52
|
+
for (const file of Object.values(bundle)) {
|
53
|
+
if (file.type === 'asset' && file.fileName.endsWith('.html')) {
|
54
|
+
file.source = processHtml(file.source);
|
55
|
+
}
|
56
|
+
}
|
57
|
+
},
|
58
|
+
},
|
59
|
+
webpack(compiler) {
|
60
|
+
const isWebpack5 = typeof webpack_1.sources !== 'undefined' && webpack_1.sources.RawSource;
|
61
|
+
if (isWebpack5) {
|
62
|
+
compiler.hooks.compilation.tap('unplugin-version-injector', (compilation) => {
|
63
|
+
compilation.hooks.processAssets.tap({
|
64
|
+
name: 'unplugin-version-injector',
|
65
|
+
stage: webpack_1.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,
|
66
|
+
}, (assets) => {
|
67
|
+
Object.keys(assets).forEach((filename) => {
|
68
|
+
if (filename.endsWith('.html')) {
|
69
|
+
let source = assets[filename].source().toString();
|
70
|
+
source = processHtml(source);
|
71
|
+
compilation.updateAsset(filename, new webpack_1.sources.RawSource(source));
|
72
|
+
}
|
73
|
+
});
|
74
|
+
});
|
75
|
+
});
|
76
|
+
}
|
77
|
+
else {
|
78
|
+
compiler.hooks.emit.tapAsync('unplugin-version-injector', (compilation, callback) => {
|
79
|
+
Object.keys(compilation.assets).forEach((filename) => {
|
80
|
+
if (filename.endsWith('.html')) {
|
81
|
+
const rawSource = compilation.assets[filename].source().toString();
|
82
|
+
const newSource = processHtml(rawSource);
|
83
|
+
compilation.assets[filename] = new webpack_1.sources.RawSource(newSource);
|
84
|
+
}
|
85
|
+
});
|
86
|
+
callback();
|
87
|
+
});
|
88
|
+
}
|
89
|
+
},
|
90
|
+
};
|
91
|
+
});
|
92
|
+
if (typeof module !== 'undefined' && module.exports) {
|
93
|
+
module.exports = VersionInjectorPlugin;
|
94
|
+
}
|
95
|
+
exports.default = VersionInjectorPlugin;
|
@@ -0,0 +1,27 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
exports.defaultFormatDate = exports.getPackageVersion = void 0;
|
7
|
+
const fs_1 = __importDefault(require("fs"));
|
8
|
+
const path_1 = __importDefault(require("path"));
|
9
|
+
/** ่ทๅ package.json ็ๆฌ */
|
10
|
+
function getPackageVersion() {
|
11
|
+
try {
|
12
|
+
const packageJsonPath = path_1.default.resolve(process.cwd(), 'package.json');
|
13
|
+
if (fs_1.default.existsSync(packageJsonPath)) {
|
14
|
+
return require(packageJsonPath).version;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
catch (error) {
|
18
|
+
console.warn('[VersionInjector] Failed to read package.json:', error);
|
19
|
+
}
|
20
|
+
return '0.0.0';
|
21
|
+
}
|
22
|
+
exports.getPackageVersion = getPackageVersion;
|
23
|
+
/** ้ป่ฎคๆ ผๅผๅ build time */
|
24
|
+
function defaultFormatDate(date) {
|
25
|
+
return date.toISOString();
|
26
|
+
}
|
27
|
+
exports.defaultFormatDate = defaultFormatDate;
|
@@ -0,0 +1,93 @@
|
|
1
|
+
// Updated version with support for both `formatDate` and `dateFormat`
|
2
|
+
import { createUnplugin } from 'unplugin';
|
3
|
+
import { Compilation, sources } from 'webpack';
|
4
|
+
import { getPackageVersion, defaultFormatDate } from './utils';
|
5
|
+
let dayjs;
|
6
|
+
const VersionInjectorPlugin = createUnplugin((options = {}) => {
|
7
|
+
const { version = getPackageVersion(), formatDate, dateFormat, injectToHead = true, injectToBody = true, } = options;
|
8
|
+
// resolve date formatter
|
9
|
+
let resolvedFormatDate = defaultFormatDate;
|
10
|
+
if (typeof formatDate === 'function') {
|
11
|
+
resolvedFormatDate = formatDate;
|
12
|
+
}
|
13
|
+
else if (typeof dateFormat === 'string') {
|
14
|
+
try {
|
15
|
+
dayjs = require('dayjs');
|
16
|
+
resolvedFormatDate = (d) => dayjs(d).format(dateFormat);
|
17
|
+
}
|
18
|
+
catch (err) {
|
19
|
+
console.warn('[unplugin-version-injector] To use `dateFormat`, please install `dayjs` manually.');
|
20
|
+
}
|
21
|
+
}
|
22
|
+
if (!injectToHead && !injectToBody) {
|
23
|
+
return { name: 'unplugin-version-injector' };
|
24
|
+
}
|
25
|
+
const buildTime = resolvedFormatDate(new Date());
|
26
|
+
const metaTag = `<meta name="version" content="${version}">\n`;
|
27
|
+
const logScript = `
|
28
|
+
<script>
|
29
|
+
console.log("%c Version: ${version} ", "background: #222; color: #00ff00; font-size: 12px; padding: 4px; border-radius: 4px;");
|
30
|
+
console.log("%c Build Time: ${buildTime} ", "background: #222; color: #ffcc00; font-size: 12px; padding: 4px; border-radius: 4px;");
|
31
|
+
</script>`;
|
32
|
+
function processHtml(html) {
|
33
|
+
if (injectToHead && !html.includes('<meta name="version"')) {
|
34
|
+
html = html.replace(/<head>/, `<head>\n ${metaTag}`);
|
35
|
+
}
|
36
|
+
if (injectToBody && !html.includes('<script>console.log("%c Version:')) {
|
37
|
+
html = html.replace('</body>', ` ${logScript}\n</body>`);
|
38
|
+
}
|
39
|
+
return html;
|
40
|
+
}
|
41
|
+
return {
|
42
|
+
name: 'unplugin-version-injector',
|
43
|
+
vite: {
|
44
|
+
transformIndexHtml(html) {
|
45
|
+
return processHtml(html);
|
46
|
+
},
|
47
|
+
},
|
48
|
+
rollup: {
|
49
|
+
generateBundle(_, bundle) {
|
50
|
+
for (const file of Object.values(bundle)) {
|
51
|
+
if (file.type === 'asset' && file.fileName.endsWith('.html')) {
|
52
|
+
file.source = processHtml(file.source);
|
53
|
+
}
|
54
|
+
}
|
55
|
+
},
|
56
|
+
},
|
57
|
+
webpack(compiler) {
|
58
|
+
const isWebpack5 = typeof sources !== 'undefined' && sources.RawSource;
|
59
|
+
if (isWebpack5) {
|
60
|
+
compiler.hooks.compilation.tap('unplugin-version-injector', (compilation) => {
|
61
|
+
compilation.hooks.processAssets.tap({
|
62
|
+
name: 'unplugin-version-injector',
|
63
|
+
stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,
|
64
|
+
}, (assets) => {
|
65
|
+
Object.keys(assets).forEach((filename) => {
|
66
|
+
if (filename.endsWith('.html')) {
|
67
|
+
let source = assets[filename].source().toString();
|
68
|
+
source = processHtml(source);
|
69
|
+
compilation.updateAsset(filename, new sources.RawSource(source));
|
70
|
+
}
|
71
|
+
});
|
72
|
+
});
|
73
|
+
});
|
74
|
+
}
|
75
|
+
else {
|
76
|
+
compiler.hooks.emit.tapAsync('unplugin-version-injector', (compilation, callback) => {
|
77
|
+
Object.keys(compilation.assets).forEach((filename) => {
|
78
|
+
if (filename.endsWith('.html')) {
|
79
|
+
const rawSource = compilation.assets[filename].source().toString();
|
80
|
+
const newSource = processHtml(rawSource);
|
81
|
+
compilation.assets[filename] = new sources.RawSource(newSource);
|
82
|
+
}
|
83
|
+
});
|
84
|
+
callback();
|
85
|
+
});
|
86
|
+
}
|
87
|
+
},
|
88
|
+
};
|
89
|
+
});
|
90
|
+
if (typeof module !== 'undefined' && module.exports) {
|
91
|
+
module.exports = VersionInjectorPlugin;
|
92
|
+
}
|
93
|
+
export default VersionInjectorPlugin;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import fs from 'fs';
|
2
|
+
import path from 'path';
|
3
|
+
/** ่ทๅ package.json ็ๆฌ */
|
4
|
+
export function getPackageVersion() {
|
5
|
+
try {
|
6
|
+
const packageJsonPath = path.resolve(process.cwd(), 'package.json');
|
7
|
+
if (fs.existsSync(packageJsonPath)) {
|
8
|
+
return require(packageJsonPath).version;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
catch (error) {
|
12
|
+
console.warn('[VersionInjector] Failed to read package.json:', error);
|
13
|
+
}
|
14
|
+
return '0.0.0';
|
15
|
+
}
|
16
|
+
/** ้ป่ฎคๆ ผๅผๅ build time */
|
17
|
+
export function defaultFormatDate(date) {
|
18
|
+
return date.toISOString();
|
19
|
+
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "unplugin-version-injector",
|
3
|
-
"version": "1.0
|
3
|
+
"version": "1.1.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)",
|
@@ -22,7 +22,7 @@
|
|
22
22
|
"build:esm": "tsc --module ESNext --outDir dist/esm",
|
23
23
|
"build:cjs": "tsc --module CommonJS --outDir dist/cjs",
|
24
24
|
"build": "npm run clean && npm run build:esm && npm run build:cjs",
|
25
|
-
"
|
25
|
+
"prepublishOnly": "npm run build"
|
26
26
|
},
|
27
27
|
"dependencies": {
|
28
28
|
"unplugin": "^1.0.0"
|
@@ -36,5 +36,6 @@
|
|
36
36
|
"publishConfig": {
|
37
37
|
"access": "public"
|
38
38
|
},
|
39
|
+
"files": ["dist","README.md","README.zh-CN.md"],
|
39
40
|
"packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b"
|
40
41
|
}
|
package/src/index.ts
DELETED
@@ -1,77 +0,0 @@
|
|
1
|
-
import { createUnplugin } from 'unplugin';
|
2
|
-
import { Compilation, sources } from 'webpack';
|
3
|
-
import type { VersionInjectorOptions } from './types';
|
4
|
-
import { getPackageVersion, defaultFormatDate } from './utils';
|
5
|
-
|
6
|
-
const VersionInjectorPlugin = createUnplugin((options: VersionInjectorOptions = {}) => {
|
7
|
-
|
8
|
-
const shouldInject = options.log !== false; // โ
ๅชๆ log: false ๆถไธๆณจๅ
ฅ
|
9
|
-
|
10
|
-
if (!shouldInject) {
|
11
|
-
return { name: 'unplugin-version-injector' }; // โ ็ดๆฅ่ฟๅ็ฉบๆไปถ๏ผ้ฟๅ
ๆ ๆไน็ๆไฝ
|
12
|
-
}
|
13
|
-
|
14
|
-
const version = options.version || getPackageVersion();
|
15
|
-
const buildTime = options.formatDate ? options.formatDate(new Date()) : defaultFormatDate(new Date());
|
16
|
-
|
17
|
-
const metaTag = `<meta name="version" content="${version}">\n`;
|
18
|
-
const logScript = `
|
19
|
-
<script>
|
20
|
-
console.log("%c Version: ${version} ", "background: #222; color: #00ff00; font-size: 12px; padding: 4px; border-radius: 4px;");
|
21
|
-
console.log("%c Build Time: ${buildTime} ", "background: #222; color: #ffcc00; font-size: 12px; padding: 4px; border-radius: 4px;");
|
22
|
-
</script>`;
|
23
|
-
|
24
|
-
function processHtml(html: string): string {
|
25
|
-
if (!html.includes('<meta name="version"')) {
|
26
|
-
html = html.replace(/<head>/, `<head>\n ${metaTag}`);
|
27
|
-
}
|
28
|
-
if (!html.includes('<script>console.log("%c Version:')) {
|
29
|
-
html = html.replace('</body>', ` ${logScript}\n</body>`);
|
30
|
-
}
|
31
|
-
return html;
|
32
|
-
}
|
33
|
-
|
34
|
-
return {
|
35
|
-
name: 'unplugin-version-injector',
|
36
|
-
|
37
|
-
// โ
Vite ้้
|
38
|
-
vite: {
|
39
|
-
transformIndexHtml(html: string) {
|
40
|
-
return processHtml(html);
|
41
|
-
}
|
42
|
-
},
|
43
|
-
|
44
|
-
// โ
Webpack ้้
|
45
|
-
webpack(compiler) {
|
46
|
-
compiler.hooks.compilation.tap('unplugin-version-injector', (compilation: Compilation) => {
|
47
|
-
compilation.hooks.processAssets.tap(
|
48
|
-
{
|
49
|
-
name: 'unplugin-version-injector',
|
50
|
-
stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,
|
51
|
-
},
|
52
|
-
(assets) => {
|
53
|
-
Object.keys(assets).forEach((filename) => {
|
54
|
-
if (filename.endsWith('.html')) {
|
55
|
-
let source = assets[filename].source().toString();
|
56
|
-
source = processHtml(source);
|
57
|
-
|
58
|
-
compilation.updateAsset(
|
59
|
-
filename,
|
60
|
-
new sources.RawSource(source) // โ
ไฟฎๆญฃ updateAsset ็ฑปๅ
|
61
|
-
);
|
62
|
-
}
|
63
|
-
});
|
64
|
-
}
|
65
|
-
);
|
66
|
-
});
|
67
|
-
}
|
68
|
-
};
|
69
|
-
});
|
70
|
-
|
71
|
-
// โ
ๅ
ผๅฎน Webpack / Vite / Rollup
|
72
|
-
|
73
|
-
if (typeof module !== 'undefined' && module.exports) {
|
74
|
-
module.exports = VersionInjectorPlugin; // โ
่ฎฉ CommonJS ็ดๆฅๆฟๅฐ
|
75
|
-
}
|
76
|
-
|
77
|
-
export default VersionInjectorPlugin;
|
package/src/types.ts
DELETED
package/src/utils.ts
DELETED
@@ -1,20 +0,0 @@
|
|
1
|
-
import fs from 'fs';
|
2
|
-
import path from 'path';
|
3
|
-
|
4
|
-
/** ่ทๅ package.json ็ๆฌ */
|
5
|
-
export function getPackageVersion(): string {
|
6
|
-
try {
|
7
|
-
const packageJsonPath = path.resolve(process.cwd(), 'package.json');
|
8
|
-
if (fs.existsSync(packageJsonPath)) {
|
9
|
-
return require(packageJsonPath).version;
|
10
|
-
}
|
11
|
-
} catch (error) {
|
12
|
-
console.warn('[VersionInjector] Failed to read package.json:', error);
|
13
|
-
}
|
14
|
-
return '0.0.0';
|
15
|
-
}
|
16
|
-
|
17
|
-
/** ้ป่ฎคๆ ผๅผๅ build time */
|
18
|
-
export function defaultFormatDate(date: Date): string {
|
19
|
-
return date.toISOString();
|
20
|
-
}
|
package/tsconfig.json
DELETED
@@ -1,15 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"compilerOptions": {
|
3
|
-
"target": "ES6",
|
4
|
-
"module": "ESNext",
|
5
|
-
"lib": ["ESNext", "DOM"],
|
6
|
-
"moduleResolution": "Node",
|
7
|
-
"strict": true,
|
8
|
-
"esModuleInterop": true,
|
9
|
-
"skipLibCheck": true,
|
10
|
-
"declaration": true,
|
11
|
-
"outDir": "dist"
|
12
|
-
},
|
13
|
-
"include": ["src"]
|
14
|
-
}
|
15
|
-
|