前端如何将git的信息打包进html

pauldu
4,592 阅读2分钟

为什么要做这件事

  1. 定制化项目我们没有参与或者要临时更新客户的包的时候，需要查文档才知道哪个是最新分支
  2. 当测试环境打包的时候，不确定是否是最新的包，需要点下功能看是否是最新的代码，不能直观的看到当前打的是哪个分支
  3. 多人开发的时候，某些场景下可能被别人覆盖了，需要查下jenkins或者登录服务器看下

实现效果

如下，当打开F12，可以直观的看到打包日期、分支、提交hash、提交时间 image.png

如何做

主要是借助 git-revision-webpack-plugin的能力。获取到git到一些后，将这些信息注入到变量中，html读取这个变量即可

1. 安装dev的依赖

    npm install --save-dev git-revision-webpack-plugin

2. 引入依赖并且初始化

   const { GitRevisionPlugin } = require('git-revision-webpack-plugin')
   const gitRevisionPlugin = new GitRevisionPlugin()

3. 注入变量信息

我这里用的是vuecli，可直接在chainWebpack中注入，当然你可以使用DefinePlugin进行声明

     config.plugin('html').tap((args) => {
          args[0].banner = {
            date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
            branch: gitRevisionPlugin.branch(),
            commitHash: gitRevisionPlugin.commithash(),
            lastCommitDateTime: dayjs(gitRevisionPlugin.lastcommitdatetime()).format('YYYY-MM-DD HH:mm:ss'),
          }
          return args
    });

4. 使用变量

在index.html的头部插入注释

  <!-- date  <%= htmlWebpackPlugin.options.banner.date %> -->
  <!-- branch  <%= htmlWebpackPlugin.options.banner.branch %> -->
  <!-- commitHash  <%= htmlWebpackPlugin.options.banner.commitHash %> -->
  <!-- lastCommitDateTime  <%= htmlWebpackPlugin.options.banner.lastCommitDateTime %> -->

5. 查看页面

image.png

6. 假如你用的是vuecli

当你使用的是vuecli，构建完后会发现index.html上这个注释丢失了

原因如下

vueCLi 对html的打包用的html-webpack-plugin,默认在打包的时候会把注释删除掉

image.png

修改vuecli的配置如下可以解决，将removeComments设置为false即可

module.exports = {
  // 其他配置项...
  chainWebpack: config => {
    config
    .plugin('html')
    .tap(args => {
       args[0].minify = {
         removeComments: false,
         // 其他需要设置的参数
       };
       return args;
     });
  },
};

7. 假如你想给qiankun的子应用添加一些git的注释信息，可以在meta中添加

 <meta name="description"
    content="Date:<%= htmlWebpackPlugin.options.banner.date %>,Branch:<%= htmlWebpackPlugin.options.banner.branch %>,commitHash: <%= htmlWebpackPlugin.options.banner.commitHash %>,lastCommitDateTime:<%= htmlWebpackPlugin.options.banner.lastCommitDateTime %>">

渲染在html上如下，也可以快速的看到子应用的构建时间和具体的分支 image.png

总结

  1. 借助git-revision-webpack-plugin的能力读取到git的一些信息
  2. 将变量注入在html中或者使用DefinePlugin进行声明变量
  3. 读取变量后显示在html上或者打印在控制台上可以把关键的信息保留，方便我们排查问题
avatar
文章
阅读
粉丝