unplugin-version-injector 1.0.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 (7) hide show
  1. package/README.md +134 -0
  2. package/README.zh-CN.md +135 -0
  3. package/package.json +40 -0
  4. package/src/index.ts +77 -0
  5. package/src/types.ts +6 -0
  6. package/src/utils.ts +20 -0
  7. package/tsconfig.json +15 -0
package/README.md ADDED
@@ -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!** ๐Ÿš€
package/README.zh-CN.md ADDED
@@ -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/package.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "name": "unplugin-version-injector",
3
+ "version": "1.0.0",
4
+ "author": "Nian Yi <nianyi778@gmail.com>",
5
+ "license": "MIT",
6
+ "description": "A universal plugin to inject version and build time into HTML (supports Webpack, Vite, Rollup)",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/nianyi778/unplugin-version-injector.git"
10
+ },
11
+ "keywords": ["unplugin", "version", "injector", "webpack", "vite", "rollup"],
12
+ "main": "./dist/cjs/index.js",
13
+ "module": "./dist/esm/index.js",
14
+ "exports": {
15
+ "require": "./dist/cjs/index.js",
16
+ "import": "./dist/esm/index.js",
17
+ "default": "./dist/esm/index.js"
18
+ },
19
+ "types": "./dist/index.d.ts",
20
+ "scripts": {
21
+ "clean": "rm -rf dist",
22
+ "build:esm": "tsc --module ESNext --outDir dist/esm",
23
+ "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
24
+ "build": "npm run clean && npm run build:esm && npm run build:cjs",
25
+ "publish": "npm run build && npm publish"
26
+ },
27
+ "dependencies": {
28
+ "unplugin": "^1.0.0"
29
+ },
30
+ "devDependencies": {
31
+ "typescript": "^4.9.5",
32
+ "webpack": "^5",
33
+ "vite": "^4",
34
+ "rollup": "^3"
35
+ },
36
+ "publishConfig": {
37
+ "access": "public"
38
+ },
39
+ "packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b"
40
+ }
package/src/index.ts ADDED
@@ -0,0 +1,77 @@
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 ADDED
@@ -0,0 +1,6 @@
1
+ export interface VersionInjectorOptions {
2
+ version?: string; // ็”จๆˆทๆ‰‹ๅŠจไผ ้€’็š„็‰ˆๆœฌๅท
3
+ log?: boolean; // ๆ˜ฏๅฆๆ‰“ๅฐๆ—ฅๅฟ—
4
+ formatDate?: (date: Date) => string; // ่‡ชๅฎšไน‰ build time ๆ ผๅผๅŒ–
5
+ }
6
+
package/src/utils.ts ADDED
@@ -0,0 +1,20 @@
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 ADDED
@@ -0,0 +1,15 @@
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
+