前言

此前写了一个记录最后一次构建发版的git相关信息的插件，下面来介绍一下具体的实现

vite 插件

vite的插件规则是基于rollup去做的，因为底层的构建是通过rollup，所以我们在编写插件的同时需要遵循rollup的插件规则。

rollup 插件

rollup的插件约定非常简单，就是一个函数，返回一个对象，对象里面需要有一个name字段标识插件名称，剩下的属性就是rollup提供的各个钩子。

例子：

function myPlugin(){
    return{
        name:'vite-plugin-myplugin',
        resolveId(source){
            if (source === 'virtual-module') {
                // 这表示 rollup 不应询问其他插件或
                // 从文件系统检查以找到此 ID
                return source;
            }
            return null; // 其他ID应按通常方式处理
        }
    }
}

上述代码就是一个非常简单的插件示例，其中resolveId为rollup约定的钩子名称，rollup会在构建过程中调用这些钩子并传递相对应的参数，开发者通过这些钩子就可以参与到构建过程中取。这其实和webpack的插件是非常相似的，webpack是通过发布订阅包装了一层，让开发者去订阅每个过程的钩子。但本质上原理是差不多的，rollup会更简便

vite-plugin-WriteGitVersion

下面我们就来实现一下这个插件

需求拆分

首先我们将这个插件的功能进行一下拆分，并且给出相对应的解决方案

• 获取git提交信息
  • 通过nodejs开辟一个子进程，然后在子进程里通过git命令可以获取到这些信息
• 订阅某一个钩子
  • 这里的选择有点多，我选择订阅构建结束的钩子
• 在这个钩子里将获取到的git信息生成一个文件输出到最终的构建结果里
  • 通过nodejs的fs模块去完成

下面就可以去写代码了

/**
 * 在构建完毕之后生成本次构建的版本号构建人等信息的插件
 * @constructor
 */
import fs from 'fs'
import child_process from 'child_process'
// const execSync = require('child_process').execSync
// const fs = require('fs')

// 获取git信息的相关命令
const COMMITHASH_COMMAND = 'rev-parse HEAD' // 获取当前git提交的hash值
const VERSION_COMMAND = 'describe --always'
const BRANCH_COMMAND = 'rev-parse --abbrev-ref HEAD' // 获取当前git分支名称
const COMMIT_USER = 'git log -1 --pretty=format:"%an <%ae>"' // 获取当前提交人信息

const pkg = fs.readFileSync(`${process.cwd()}/package.json`, 'utf-8')

export const WriteGitVersion = () => ({
  name: 'vite-plugin-WriteGitVersion',
  generateBundle() {
    try {
      const d = new Date()
      const versionStr = `
        提交人：${child_process.execSync(COMMIT_USER)}
        
        commit_hash: ${child_process.execSync(`git ${COMMITHASH_COMMAND}`)}
        当前分支: ${child_process.execSync(`git ${BRANCH_COMMAND}`)}
        Release: ${child_process.execSync(`git ${VERSION_COMMAND}`)}
        当前版本：${JSON.parse(pkg).version}
        
        构建时间: ${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}
        `
      fs.writeFileSync('dist/version.txt', versionStr)
    } catch (e) {
      console.log(e, '发生错误')
    }
  },
})

整个过程其实也非常的简单。如果是斜webpack的插件的话也很简单，把generateBundle换成订阅webpack某一个钩子就行了，里面的代码都不需要变。