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

简介: 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

    VERSIONCOMMITHASH并且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方法显示,如下

        <div id="version">
              {process.env.VERSION}
              {process.env.COMMITHASH}
              {process.env.NODE_ENV === 'development' && process.env.BRANCH &&
              <>
                 <span>{process.env.BRANCH}</span>
              </>
              }
            </div>

        version:如 v0.0.0-34-33bb4fad

        commithash:如 33bb4fadcaa5bf1253a551c68bcf17c945cf8ed5

        branch:如dev , master等

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


        相关文章
        |
        1月前
        |
        小程序 Shell 网络安全
        【微信小程序】-- 使用 Git 管理项目(五十)
        【微信小程序】-- 使用 Git 管理项目(五十)
        |
        1月前
        |
        前端开发
        webpack如何设置devServer启动项目为https协议
        webpack如何设置devServer启动项目为https协议
        141 0
        |
        3月前
        |
        缓存 前端开发 JavaScript
        「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(三)
        「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
        |
        4月前
        |
        开发工具 git
        Git 如何将一个项目的代码放到一个新的仓库中,但不在新的仓库中显示旧的提交记录
        Git 如何将一个项目的代码放到一个新的仓库中,但不在新的仓库中显示旧的提交记录
        75 0
        |
        3天前
        |
        JavaScript 前端开发
        构建工具:配置Webpack打包Vue项目
        【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
        |
        3天前
        |
        缓存 JavaScript 前端开发
        js开发:请解释什么是Webpack,以及它在项目中的作用。
        Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。Webpack的插件机制可扩展功能,支持热更新以加速开发流程。
        13 2
        |
        18天前
        |
        数据可视化 持续交付 开发工具
        实际项目中如何使用Git做分支管理
        实际项目中如何使用Git做分支管理
        |
        2月前
        |
        存储 Linux 开发工具
        「译文」使用 submodule 和 subtree 管理 Git 项目
        「译文」使用 submodule 和 subtree 管理 Git 项目
        |
        2月前
        |
        前端开发 JavaScript 安全
        |
        2月前
        |
        前端开发 JavaScript Java