0%

发表于 更新于 阅读次数： Valine：
本文字数： 5.4k 阅读时长 ≈ 5 分钟

Build Version Tracker：一个强大的构建版本跟踪插件

引言

在现代前端开发中，构建流程变得越来越复杂。无论是使用 Webpack 还是 Vite，我们都需要对构建产物进行版本管理和跟踪。今天我要向大家推荐一个非常实用的工具——Build Version Tracker，这是一个支持 Webpack 和 Vite 的通用构建版本跟踪插件。

什么是 Build Version Tracker？

Build Version Tracker 是一个轻量级但功能强大的构建工具插件，它能够自动生成构建版本信息、记录构建过程的关键数据，并将构建产物打包为 ZIP 文件。最重要的是，它同时支持 Webpack 和 Vite 两种主流的构建工具。

核心功能特性

📦 自动版本信息生成

插件会在每次构建完成后自动生成详细的版本信息，包括：

  • 构建人：自动获取 Git 用户名
  • 构建分支：当前 Git 分支信息
  • 构建时间：精确到秒的时间戳
  • 构建路径：构建产物的输出目录

🔄 双构建工具支持

这是该插件最大的亮点之一：

  • Webpack 插件：完美集成到 Webpack 构建流程中，支持 Webpack 3.0+
  • Vite 插件：专门为 Vite 优化的插件实现
  • 一致的 API：两个插件使用相同的配置参数

📄 多格式输出

插件会生成多种格式的版本信息：

  1. version.txt：纯文本格式的版本信息文件
  2. HTML 注入：在 HTML 文件中插入版本信息脚本
  3. 控制台输出：构建过程中显示详细的版本信息

🗜️ 自动打包功能

构建完成后，插件会自动将构建产物打包为 ZIP 文件，方便部署和分发。

✨ 自定义版本信息格式化

支持自定义版本信息的格式化方式，满足不同项目的需求。

🔧 智能版本检测

自动适配不同版本的 Webpack，确保在各种环境下都能正常工作。

安装和使用

安装

1
2
3
4
5
6
7
8
# 使用 npm
npm install build-version-tracker

# 使用 pnpm
pnpm add build-version-tracker

# 使用 yarn
yarn add build-version-tracker

依赖安装

插件需要以下依赖才能正常工作：

1
2
3
4
5
6
7
8
# 如果使用 Webpack 插件
npm install adm-zip webpack

# 如果使用 Vite 插件
npm install adm-zip

# 一次性安装所有依赖
npm install build-version-tracker adm-zip webpack

Webpack 配置示例

CommonJS 语法：

1
2
3
4
5
6
7
8
9
10
11
12
const BuildVersionTracker = require('build-version-tracker');

module.exports = {
  mode: 'production',
  plugins: [
    new BuildVersionTracker({
      distPath: 'dist',     // 构建输出目录
      isBuild: true,        // 启用构建功能
      htmlName: 'index.html' // HTML 文件名
    })
  ]
};

ES 模块语法：

1
2
3
4
5
6
7
8
9
10
11
12
import BuildVersionTracker from 'build-version-tracker';

export default {
  mode: 'production',
  plugins: [
    new BuildVersionTracker({
      distPath: 'dist',
      isBuild: true,
      htmlName: 'index.html'
    })
  ]
};

Vite 配置示例

CommonJS 语法：

1
2
3
4
5
6
7
8
9
10
11
const viteVersionPlugin = require('build-version-tracker/vite');

export default {
  plugins: [
    viteVersionPlugin({
      distPath: 'dist',
      isBuild: true,
      htmlName: 'index.html'
    })
  ]
};

ES 模块语法：

1
2
3
4
5
6
7
8
9
10
11
import viteVersionPlugin from 'build-version-tracker/vite';

export default {
  plugins: [
    viteVersionPlugin({
      distPath: 'dist',
      isBuild: true,
      htmlName: 'index.html'
    })
  ]
};

自定义配置示例

1
2
3
4
5
6
7
8
9
new BuildVersionTracker({
  distPath: 'build',                    // 自定义输出目录
  isBuild: true,                        // 启用构建功能
  htmlName: 'app.html',                  // 自定义 HTML 文件名
  // 自定义版本信息格式化
  formatVersion: (info) => {
    return `Build: ${info.time}, Branch: ${info.currentBranch}, By: ${info.userName}`;
  }
})

插件生命周期

Webpack 插件

  • Webpack 3.x：使用 plugin('after-emit') 方法
  • Webpack 4+：使用 hooks.afterEmit.tapAsync() 方法
  • Webpack 5+：使用 hooks.afterEmit.tapAsync() 方法（新钩子系统）

Vite 插件

  • 使用 closeBundle 钩子，确保在所有构建操作完成后执行版本信息生成
  • 避免使用 buildEnd 钩子，防止文件被后续构建步骤覆盖

输出示例

version.txt 内容

1
构建人： username, 构建分支：main, 构建时间：2024-01-01 12:00:00，构建后文件位于：dist

自定义格式示例

1
Version: 2024-01-01 12:00:00, Branch: main, User: username

HTML 注入效果

1
2
<script>console.log("%c构建人： username, 构建分支：main, 构建时间：2024-01-01 12:00:00", 'color:blue')</script>
</body>

API 文档

Webpack 插件选项

参数 类型 默认值 描述
distPath string ‘dist’ 构建输出目录
isBuild boolean false 是否启用构建功能
htmlName string ‘index.html’ HTML 文件名
formatVersion function null 自定义版本信息格式化函数
formatTextVersion function null 自定义文本版本信息格式化函数

Vite 插件选项

参数 类型 默认值 描述
distPath string ‘dist’ 构建输出目录
isBuild boolean false 是否启用构建功能
htmlName string ‘index.html’ HTML 文件名
formatVersion function null 自定义版本信息格式化函数
formatTextVersion function null 自定义文本版本信息格式化函数

自定义格式化函数参数

参数 类型 描述
userName string 构建人
currentBranch string 构建分支
time string 构建时间
distPath string 构建产物路径

技术实现

版本检测机制

插件使用智能版本检测机制，自动适配不同版本的 Webpack：

  • Webpack 4+：从 compiler.webpack.version 获取版本信息
  • Webpack 3.x：从 compiler.version 获取版本信息
  • 降级策略：通过检测钩子系统存在性推断版本

错误处理

插件包含完善的错误处理机制，确保在各种情况下都能优雅降级：

  • 版本检测失败时使用默认版本
  • 钩子系统不存在时提供详细警告
  • 构建过程中的错误会被捕获并记录

本地开发测试

  1. 在插件项目中创建全局链接

    1
    2
    3
    4
    5
    6
    7
    8
    # 进入插件项目目录
    cd build-version-tracker

    # 构建插件
    npm run build

    # 创建全局链接
    npm link

  2. 在测试项目中链接插件

    1
    2
    3
    4
    5
    6
    7
    8
    # 进入测试项目目录
    cd /path/to/your/test-project

    # 链接插件
    npm link build-version-tracker

    # 安装插件的 peerDependencies
    npm install adm-zip webpack

  3. 在测试项目中使用插件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // Webpack 配置示例
    const BuildVersionTracker = require('build-version-tracker');

    module.exports = {
      // ... 其他配置
      plugins: [
        new BuildVersionTracker({
          distPath: 'dist',
          isBuild: true
        })
      ]
    };

  4. 取消链接（测试完成后）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 在测试项目中取消链接
    npm unlink build-version-tracker

    # 重新安装正式版本（如果需要）
    npm install build-version-tracker

    # 在插件项目中取消全局链接
    cd build-version-tracker
    npm unlink

实际应用场景

1. 团队协作开发

在团队开发环境中，通过版本信息可以快速识别：

  • 谁构建了这个版本
  • 从哪个分支构建
  • 什么时候构建的

2. 持续集成/持续部署

在 CI/CD 流程中，版本信息可以帮助：

  • 追踪构建历史
  • 快速定位问题版本
  • 自动化部署验证

3. 生产环境调试

当生产环境出现问题，版本信息可以帮助：

  • 确认部署的代码版本
  • 快速回滚到稳定版本
  • 分析问题出现的时间点

为什么选择 Build Version Tracker？

🚀 开箱即用

无需复杂配置，安装后即可使用，大大降低了上手成本。

🔧 高度可定制

提供了丰富的配置选项，可以根据项目需求灵活调整。

📊 信息全面

生成的版本信息涵盖了构建过程的各个关键环节。

🔄 工具兼容

同时支持 Webpack 和 Vite，适应不同的技术栈选择。

🛠️ 开发友好

提供了完整的本地开发测试指南，支持 npm link 进行本地调试。

🔍 智能适配

自动适配不同版本的 Webpack，确保在各种环境下都能正常工作。

实际使用体验

我在多个项目中使用了这个插件，体验非常出色：

  1. 安装简单：一行命令即可完成安装
  2. 配置直观：参数命名清晰，易于理解
  3. 运行稳定：在各种构建环境下都能稳定工作
  4. 输出规范：生成的版本信息格式统一规范
  5. 调试方便：详细的日志输出便于问题排查

更新日志

v0.0.4

  • 初始版本发布
  • 支持 Webpack (3.0+) 和 Vite 构建工具
  • 支持 ES 模块和 CommonJS 模块
  • 自动生成版本信息和打包构建产物
  • 智能版本检测，自动适配不同 Webpack 版本
  • 完善的错误处理和降级策略
  • 优化测试脚本，支持 ES 模块语法
  • ✨ 支持自定义版本信息格式化

v0.0.3

  • 初始版本发布
  • 支持 Webpack (3.0+) 和 Vite 构建工具
  • 支持 ES 模块和 CommonJS 模块
  • 自动生成版本信息和打包构建产物
  • 智能版本检测，自动适配不同 Webpack 版本
  • 完善的错误处理和降级策略
  • ✨ 优化测试脚本，支持 ES 模块语法

v0.0.2

  • 初始版本发布
  • ✨ 支持 Webpack (3.0+) 和 Vite 构建工具
  • 支持 ES 模块和 CommonJS 模块
  • 自动生成版本信息和打包构建产物
  • ✨ 智能版本检测，自动适配不同 Webpack 版本
  • ✨ 完善的错误处理和降级策略

v0.0.1

  • 初始版本发布
  • 支持 Webpack 和 Vite 构建工具
  • 支持 ES 模块和 CommonJS 模块
  • 自动生成版本信息和打包构建产物

总结

Build Version Tracker 是一个设计精良、功能实用的构建版本跟踪工具。无论你是 Webpack 用户还是 Vite 爱好者，无论项目规模大小，这个插件都能为你提供可靠的版本管理解决方案。

它的出现填补了构建工具在版本跟踪方面的空白，让我们的开发流程更加规范化和自动化。如果你正在寻找一个简单易用但又功能强大的版本跟踪工具，我强烈推荐你试试 Build Version Tracker。

相关链接

本文作者：mingyangya
发布日期：2026年3月19日
转载请注明出处

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 645 阅读时长 ≈ 1 分钟
  1. 通过ssh-keygen命令生成ssh公钥
1
2
ssh-keygen -t ed25519 -f ~/.ssh/id_rsa_service1  -C "xxxx@xx.com" 
ssh-keygen -t ed25519 -f ~/.ssh/id_rsa_service2  -C "id_rsa_service2 Key"

执行命令后如下图所示即为成功。

  1. 为对应仓库添加公钥

以gitee为例，打开id_rsa_service1所在文件夹下的id_rsa_service1.pub文件编辑查看内容
将内容拷贝粘贴到gitee对应添加公钥的地方,如下图:

  1. 创建或者编辑~/.ssh/config文件，为每个密钥指定配置。
1
2
3
4
5
6
7
8
9
10
11
Host gitee
  HostName gitee.com
  Port 22 
  User your_username
  PreferredAuthentications publickey
  IdentityFile ~/.ssh/id_rsa_gitee
 
Host service2
  HostName service2.example.com
  User your_username
  IdentityFile ~/.ssh/id_rsa_service2
  1. 验证是否配置成功
1
ssh -T git@gitee.com

如下图所示即为成功。

tips 参考： https://help.gitee.com/base/account/SSH%E5%85%AC%E9%92%A5%E8%AE%BE%E7%BD%AE

发表于 更新于 阅读次数： Valine：
本文字数： 49 阅读时长 ≈ 1 分钟

一些常用的JavaScript方法

源码

颜色转换方法

RGB颜色转换为十六进制

十六进制转换为RGB颜色

发表于 更新于 分类于 ， 阅读次数： Valine：
本文字数： 181 阅读时长 ≈ 1 分钟

日常使用以及解决一些问题的方法，相关内容如下：

论坛以及博客

工具以及文档

发表于 更新于 阅读次数： Valine：
本文字数： 133 阅读时长 ≈ 1 分钟

mkcert 是生成本地 HTTPS 加密证书的工具，一个命令就可以生成证书，不需要任何配置。

阅读全文 »

发表于 更新于 阅读次数： Valine：
本文字数： 712 阅读时长 ≈ 1 分钟

Homebrew是MacOS上的包管理工具，可以简化 macOS 和 Linux 操作系统上软件的安装。

阅读全文 »

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 416 阅读时长 ≈ 1 分钟

介绍一下常用的Git命令，其中包含add、commit、push、branch、checkout、mv、pull等

阅读全文 »

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 516 阅读时长 ≈ 1 分钟

本文介绍vscode的安装和实用插件

阅读全文 »

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 2.3k 阅读时长 ≈ 2 分钟

本文介绍使用@vant/cli构建vue2组件库

阅读全文 »

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 2.5k 阅读时长 ≈ 2 分钟

本文使用css来实现各个朝向的等腰三角形，涉及知识点border,且通过transform中的rotate来改箭头的朝向。来看一下效果吧。

阅读全文 »