git项目中加入版本号git-revision-webpack-plugin

webpack 插件生成 VERSION 和 COMMITHASH 基于本地生成过程中的文件的Git仓库。

便于我们在项目中可直观看到提交的git commithash

用法：

给定一个webpack 4项目，将其安装为本地开发依赖项：

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

然后，将其配置为webpack配置中的插件：

const GitRevisionPlugin = require('git-revision-webpack-plugin');

const gitRevision = new GitRevisionPlugin();

在webpack的plugins: [ ],中配置gitRevision即可

plugins: [
    gitRevision
],

插件API

VERSION，COMMITHASH并且BRANCH也通过一个公共的API暴露。使用DefinePlugin的示例：

plugins: [
    gitRevision,
    new webpack.DefinePlugin({
        'process.env.VERSION': JSON.stringify(gitRevision.version()),
        'process.env.COMMITHASH': JSON.stringify(gitRevision.commithash()),
        'process.env.BRANCH': JSON.stringify(gitRevision.branch())
    })
],

 

在页面中可以直接使用process.env.xxx方法显示，如下

    

      {process.env.VERSION}
      {process.env.COMMITHASH}
      {process.env.NODE_ENV === 'development' && process.env.BRANCH &&
      <>
         {process.env.BRANCH}
      
      }
    

version：如 v0.0.0-34-33bb4fad

commithash：如 33bb4fadcaa5bf1253a551c68bcf17c945cf8ed5

branch：如dev ， master等

其他配置 地址参考：https://snyk.io/advisor/npm-package/git-revision-webpack-plugin

 

交流

对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！欢迎关注公众号共同学习。