简简单单一个vite⚡⚡插件搞定用户的另类需求——自给自足的感觉真好

简介: 简简单单一个vite⚡⚡插件搞定用户的另类需求——自给自足的感觉真好

需求背景

前几天我们的客户对我们组的客户经理提了个需求,每次上线前端页面需要在HTML里给定版本信息,因为我们客户单位会定期爬取版本信息进行汇总展示在大屏。

版本信息要求如下:

  • 上线日期
  • 上线内容描述
  • 对应git提交ID
  • 对应项目的版本号

调研

我立马想到使用插件,前几天我已经将项目脚手架换成vite了,我找了一圈,发现了几个相似的需求,不过都是直接生成 meta 标签,跟我的需求不符

(我的需求是让版本信息成为入口标签的属性),

他们分别是下面几个库,希望可以帮到大家

https://www.npmjs.com/package/vite-plugin-version-mark

https://www.npmjs.com/package/git-commit-info-plugin

可以满足我的需求的插件基本上没有

基于前面几次的插件经验,我又打算自己开发插件满足自己的需求。

实现

下面是我本地的初始版本,使用 vite 特有的钩子 transformIndexHtml ,

我们通过 childProcess 同步的方式访问 git 信息,

通过 jsdom 库将html字符串转化为 dom 对象插入信息,最后序列化为字符串返回即可。

import childProcess from 'child_process';
import { JSDOM } from 'jsdom';
import moment from 'moment';
const AddCommitAndVersion = () => {
  return {
    name: 'add-commit-and-version',
    transformIndexHtml (html) {
      const commitID = childProcess.execSync('git rev-parse --short HEAD', { encoding: 'utf-8' })
      const commitInfo = childProcess.execSync('git log -3 --pretty="%s"', { encoding: 'utf-8' })
      const dom = new JSDOM(html)
      const document = dom.window.document
      const container = document.getElementById('root')
      container.setAttribute("commitID", commitID.trim());
      container.setAttribute("verion", moment(new Date()).format(`YYYY.MM.DD.HH:mm:ss`));
      container.setAttribute("description", commitInfo.trim().split('\n').toString());
      return dom.serialize()
    }
  }
}

为了可以让更多的人方便用,我们在此基础上提供更多的灵活性。所以我们定义如下的签名

interface OptionProps {
  /**
   * 挂载信息的节点,该值为 querySelector 参数
   * 默认:body标签
   */
  root?: string
  /**
   * moment日期格式
   * 默认:YYYY-MM-DD HH:mm:ss
   */
  dateFormat?: string
  /**
   * commitID,如果为true,则表示禁用,不显示
   * 默认:打包分支,最后一次提交commitID
   */
  commitID?: string | true
  /**
   * 版本号,如果为true,则表示禁用,不显示
   * 默认: 打包时间,格式取决于 dateFormat
   */
  verion?: string | true
  /**
   * 版本描述,如果为true,则表示禁用,不显示
   * 默认: 最近三次commit内容,使用`、`隔开
   */
  description?: string | true
  /**
   * 扩展字段
   * 默认 null
   */
  extendInfo?: {[key in string]: string}
}

除了预设的信息外,我还新增了扩展信息的字段,方便面对更多需求。

扩展之后的代码如下,主要是解析配置文件。

import childProcess from 'child_process';
import { JSDOM } from 'jsdom';
import moment from 'moment';
export default (option) => {
  let {
    dateFormat = `YYYY.MM.DD.HH:mm:ss`,
    commitID,
    verion,
    description,
    extendInfo = {},
    root = 'body'
  } = option ?? {}
  return {
    name: 'vate-plugin-add-commit-info',
    transformIndexHtml (html) {
      const dom = new JSDOM(html)
      const document = dom.window.document
      const container = document.querySelector(root)
      // 最后一次提交commit的ID
      if (commitID !== true) {
        commitID = commitID
          ? commitID
          : childProcess.execSync('git rev-parse --short HEAD', { encoding: 'utf-8' })
        container?.setAttribute("commitID", commitID.trim());
      }
      // 版本信息,默认是当前打包的时间点
      if (verion !== true) {
        container?.setAttribute("verion", verion ?? moment(new Date())?.format(dateFormat))
      }
      // 描述信息,默认最近三次的commit描述
      if (description !== true) {
        description = description
          ? description
          : childProcess
            .execSync('git log -3 --pretty="%s"', { encoding: 'utf-8' })
            .trim()
            .split('\n')
            .toString()
        container?.setAttribute("description", description)
      }
      // 自定义扩展字段
      if (extendInfo) {
        const keys = Object.keys(extendInfo)
        if (keys.length) {
          keys.map(key => container?.setAttribute(key, extendInfo[key]))
        }
      }
      return dom.serialize()
    }
  }
}

默认效果如下

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import addCommitInfo from 'vite-plugin-add-commit-info';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    addCommitInfo(),
    react()
  ]
})

当使用配置时效果如下

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import addCommitInfo from 'vite-plugin-add-commit-info';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    addCommitInfo({
      root: '#root',
      description: 'test'
    }),
    react()
  ]
})

最后

我已经开源了,感兴趣的小伙伴可以下载体验一番。

npm地址:https://www.npmjs.com/package/vite-plugin-add-commit-info

github地址:https://github.com/mmdctjj/vite-plugin-add-commit-info

今天的分享就到这了,文章中有纰漏的地方欢迎指正。

相关文章
|
Web App开发 JSON JavaScript
仅20+行核心代码的Chrome插件,这不是有手就行吗?(上)
大家好,我是零一,不知道你们有没有开发过Chrome插件,但你们一定用得很多。其实Chrome插件的开发一点都不麻烦,基本就是有手就行,一个功能极简的插件核心代码也就不过30行左右。那你还怕不会插件的开发吗? 本文将手把手(真 · 手把手)介绍Chrome插件的开发,并末尾附带一个插件实战教学
418 0
仅20+行核心代码的Chrome插件,这不是有手就行吗?(上)
|
数据库
代码写的垃圾被嫌弃?这 3 个插件你值得拥有…
今天推荐三个插件,它们都是代码质量检测的神器。可以扫描检测出你项目中不符合规范的代码,他们分别是 SonarLint、SonarQube、Alibaba代码规约插件。
247 0
代码写的垃圾被嫌弃?这 3 个插件你值得拥有…
|
9月前
|
JavaScript Java 测试技术
基于小程序的电影院订票选座系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的电影院订票选座系统+springboot+vue.js附带文章和源代码设计说明文档ppt
54 0
|
6月前
|
缓存 前端开发 Linux
哇塞!NPM 缓存竟成开发拦路虎?快来掌握清空秘籍,开启前端开发逆袭之旅!
【8月更文挑战第20天】NPM是前端开发中管理依赖的关键工具。有时需清空其缓存以解决版本不一致或包损坏等问题,确保使用最新依赖。可通过命令`npm cache clean --force`强制清空全部缓存,或手动删除各系统下的缓存文件夹。注意清空缓存可能延长后续安装时间,建议事先备份依赖或确保可重新安装。正确管理缓存有助于提升开发效率。
219 1
|
9月前
|
JavaScript Java 测试技术
基于小程序的传染病防控宣传系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的传染病防控宣传系统+springboot+vue.js附带文章和源代码设计说明文档ppt
61 0
|
JavaScript 前端开发
与时俱进版前端资源教程
众所周知,前端发展如火如荼,日新月异,而且很长一段时间内都将如此。这份由晚晴幽草轩轩主正在维护的教程列表;旨在为前端学习、 技能提升、 视野扩展、 资料查找等行个方便。将会在日常工作探索、学习中,持续保持更新,增新优之章,除旧失之文;尽可能使得这份列表保持简练,以避免信息过重且冗杂;望其能在浩如烟海的讯息中,堪有所用。
1255 0
|
前端开发 JavaScript 测试技术
测试圈相亲平台开发流程(9):择偶结果弹层-前端开发vue-cli
测试圈相亲平台开发流程(9):择偶结果弹层-前端开发vue-cli
测试圈相亲平台开发流程(9):择偶结果弹层-前端开发vue-cli
|
程序员
“用了就停不下来”的代码插件
今天无意中扫到, 旁边的人写代码时, 屏幕非常炫酷, 就多看了几秒, 于是发现了一个很有意思的插件 activate-power-mode, 它的主要作用就是, 即使你只会写helloWorld, 也能让你体会一把, 狂拽酷炫的感觉! 插件github地址: https://github.
1285 0
|
9月前
|
JavaScript Java 测试技术
基于小程序的客家菜餐馆点菜系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的客家菜餐馆点菜系统+springboot+vue.js附带文章和源代码设计说明文档ppt
52 0

热门文章

最新文章