一个生成项目Git版本信息的Webpack小插件

好久没写博客了,惭愧,惭愧!今天记录一个Webpack小插件,这个插件功能是在构建编译时,向文件中插入当前的构建版本信息。这个小插件我自己在项目中一直在用,在文章!18年我新学到的知识点中也简单的提了一下,因为觉得还是比较有用,所以这里详细记录下。

这个插件要解决的问题是:方便确定部署的前端静态文件的版本信息。如果一个项目多人开发,而且又是共用一个测试环境,很容易漏合代码,或部署分支不对等等。在生产环境,有一个版本信息,也能够快速帮助我们定位一些环境问题。插件最终效果如下:

效果图

1. 获取项目 Git 版本信息

从上面的效果图中,我们可以看到,版本信息中主要包含了以下信息:

  • 编译时间
  • 编译执行人
  • 编译使用的分支
  • 编译基于的 git commitId
  • 最近的几次 git 提交信息(方便查看是否漏合代码)

除编译时间外,其他几个信息都是项目的 git 信息。所以第一步就是如何获取这些信息。另外要注意的就是在生成环境不能打印一些敏感的 git 信息,所以版本信息要区分下开发环境和生成环境。

2. 实现与使用

如何获取项目的 git 信息,没什么需要细讲的,直接给出代码:

const execSync = require('child_process').execSync;
const execGitCmd = function(cmd) {
    return execSync(cmd).toString().replace(/\n$/,'');
};
let date = new Date().toLocaleString(); // 编译时间
let user = execGitCmd('git config user.name'); // 编译执行人
let gitBranch = execGitCmd(`git symbolic-ref --short -q HEAD`); // git 分支
let gitID = execGitCmd(`git log -n 1 --pretty=format:"%H"`); // gitId
let info = execGitCmd('git log -p -3 --name-only'); // 最近3次 git 提交信息

接下来就是要编写一个Webpack插件,把上面这些信息在编译时写到文件中。关于如何编写Webpack插件,有兴趣的就自行研究哈。一般情况下,版本信息写入到 html 文件即可,这里使用html-webpack-plugin提供的钩子。具体代码如下:

const execSync = require('child_process').execSync;
const execGitCmd = function(cmd) {
    return execSync(cmd).toString().replace(/\n$/,'');
};
let date = new Date().toLocaleString(); // 编译时间
let user = execGitCmd('git config user.name'); // 编译执行人
let gitBranch = execGitCmd(`git symbolic-ref --short -q HEAD`); // git 分支
let gitID = execGitCmd(`git log -n 1 --pretty=format:"%H"`); // gitId
let info = execGitCmd('git log -p -3 --name-only'); // 最近3次 git 提交信息
let year = new Date().getFullYear();

function VersionInjection(options) {
    this.tmpl = options.isProd ? `
<!--
Build Time: ${date}
GitBranch: ${gitBranch}
GitId: ${gitID}
Copyright (c) ${year} xxxxxx公司
-->` : `
<!--
Builder: ${user}
Build Time: ${date}
GitBranch: ${gitBranch}
GitId: ${gitID}
-------------------------------------------------------------------------------
${info}
-------------------------------------------------------------------------------
Copyright (c) ${year} xxxxxx公司
-->
`;
}

VersionInjection.prototype.apply = function(compiler) {
    let that = this;
    compiler.plugin('compilation', function(compilation) {
        compilation.plugin('html-webpack-plugin-after-html-processing', function(htmlPluginData, callback) {
            if (/\.html$/.test(htmlPluginData.outputName)) {
                htmlPluginData.html = htmlPluginData.html + that.tmpl;
            }

            callback(null, htmlPluginData);
        });
    });
};

module.exports = VersionInjection;

使用:

const VersionInjection = require('./plugin/VersionInjection');

plugins: [
    ...,
    new VersionInjection({isProd})
    ...,
]

3. 小结

本文主要分享了一个注入项目 Git 版本信息的 Webpack 小插件,当然思路有了在其他工具(gulp)里也能方便地实现同样的功能。以上!

留言列表
  • 望哥:
    是否考虑开源到github上,以便大家可以直接引用?
    • u3xyz:
      暂时还没有这个想法
      2018年11月29日 05:01
    2018年11月24日 00:51 回复
  • 空气罐头:
    老哥,你这个标题导航做得不是很好啊。就以这篇文章为例,当页面滚动到最后的时候,导航的跳转就不正确了。
    • u3xyz:
      是的,的确有bug,感谢指出!
      2018年11月20日 21:32
    2018年11月20日 15:25 回复
  • 你猜我是谁:
    这个好
      2018年06月01日 16:50 回复
    • test1:
      test1
        2018年04月24日 14:59 回复
      • test:
        test
          2018年04月10日 10:41 回复

        发表评论: