🚀 开源 | unplugin-version-injector —— 一款自动注入版本号 & 构建时间的插件，支持 Webpack / Vite ...

🚀 开源 | `unplugin-version-injector` —— 一款自动注入版本号 & 构建时间的插件，支持 Webpack / Vite / Rollup！

🔥 让你的 Web 项目在 HTML 中自动注入版本号和构建时间，方便版本管理 & 调试！
📌 一行代码搞定，不需要手动维护，支持 Webpack、Vite、Rollup！

📌 背景：为什么要自动注入版本号 & 构建时间？

在前端开发中，我们经常遇到 缓存问题 或 版本管理混乱 的情况，比如：

🚨 部署后版本不对？ 明明发了 1.0.1 版本，客户看到的还是 1.0.0，无法确认版本号。
🌀 浏览器缓存问题？ 代码已经更新，但浏览器还在加载旧的 index.html，不清楚是哪个版本。
🔍 调试 & 线上排查困难？ 生产环境某些用户遇到了 Bug，但你无法确定他使用的是哪个构建版本。

✅ 解决方案：在 HTML 里自动注入 meta 版本号，并在 console 里打印版本信息！
这样，无论是在 浏览器调试 还是 用户反馈 时，都能 快速确定当前项目的版本和构建时间！ 🚀

🌟 `unplugin-version-injector` 是什么？

unplugin-version-injector 是一款 基于 unplugin 的自动版本注入插件，它可以在 构建时 让 HTML 自动注入版本号和构建时间，支持： ✅ Webpack 4 / 5
✅ Vite
✅ Rollup
✅ 多页面应用（MPA） & 单页面应用（SPA）

📌 主要功能

✅ 自动在 HTML <head> 里插入 <meta name="version">
✅ 在浏览器 Console 里打印版本号 & 构建时间（彩色日志 🌈）
✅ 支持 Webpack / Vite / Rollup，配置 0 成本！
✅ 支持手动指定版本号 & 自定义构建时间格式
✅ 纯 JS/TS 实现，依赖 0，性能无损耗

📦 快速开始

1️⃣ 安装

# 使用 npm
npm install -D unplugin-version-injector

# 或使用 yarn
yarn add -D unplugin-version-injector

2️⃣ 在 Webpack / Vite / Rollup 里使用

📌 Webpack 配置

// webpack.config.js
const versionInjector = require('unplugin-version-injector').default;

module.exports = {
  plugins: [
    versionInjector.webpack() // ✅ 一行代码自动注入版本号！
  ]
};

📌 Vite 配置

// vite.config.js
import versionInjector from 'unplugin-version-injector';

export default {
  plugins: [
    versionInjector.vite()
  ]
};

📌 Rollup 配置

// rollup.config.js
import versionInjector from 'unplugin-version-injector';

export default {
  plugins: [
    versionInjector.rollup()
  ]
};

🛠 自动生成的 HTML

构建完成后，插件会在 HTML 里 自动注入 <meta name="version"> ：

<head>
  <meta name="version" content="1.0.3">
  <meta charset="UTF-8">
  <title>My App</title>
</head>

🚀 这样你就可以在浏览器 document.querySelector('meta[name="version"]').content 里获取版本号！

📜 控制台自动打印版本信息

插件会在浏览器 Console 里自动打印 彩色版本日志：

🟢 Version: 1.0.3  (绿色)
🟡 Build Time: 2025-03-06T12:00:00.000Z  (黄色)

💡 这样在生产环境里，只需要打开 Console 就能确认版本号，排查问题更高效！ 🎯

⚙️ 可选配置

如果你想 自定义版本号或构建时间格式，可以传入配置：

versionInjector.webpack({
  version: '1.2.3',  // 手动指定版本号（默认读取 package.json）
  formatDate: (date) => date.toLocaleString() // 自定义时间格式
});

✅ 这样你可以完全控制注入的版本信息！

🎯 适用场景

✅ 1. 版本管理

让 每个构建版本 都能在 HTML 里显示 版本号，方便追踪和调试。

✅ 2. 缓存问题排查

遇到 浏览器缓存问题 时，直接在 Console 确认当前 HTML 版本，不用再猜。

✅ 3. 多页面 / 多环境支持

适用于 单页面应用（SPA） 和 多页面应用（MPA） ，可配合 Git 版本号 记录。

📌 开源地址

📦 GitHub：🔗 unplugin-version-injector
📝 NPM：🔗 unplugin-version-injector

欢迎 Star ⭐️ & PR，让我们一起优化这个插件！🚀🚀🚀

💡 结语

在前端项目中，版本管理 和 构建信息可视化 非常重要。
✨ unplugin-version-injector 让你一行代码搞定版本号 & 构建时间注入，省时省力！

📌 如果你觉得这个插件有用，欢迎 Star 🌟 一下，让更多人受益！ 🎯
📢 你的支持是开源最大的动力！💪

🔥 期待你的反馈 & 建议，一起让前端开发更高效！🚀

🚀 开源 | unplugin-version-injector —— 一款自动注入版本号 & 构建时间的插件，支持 Webpack / Vite ...