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


        相关文章
        |
        28天前
        |
        前端开发 JavaScript
        手敲Webpack 5:React + TypeScript项目脚手架搭建实践
        手敲Webpack 5:React + TypeScript项目脚手架搭建实践
        |
        2月前
        |
        安全 开发工具 git
        git合并错了,我想回退到之前的版本
        git合并错了,我想回退到之前的版本
        |
        1月前
        |
        Java Shell 开发工具
        git集成IDEA,托管项目实现版本管理
        git集成IDEA,托管项目实现版本管理
        33 0
        |
        3月前
        |
        缓存 JSON JavaScript
        简单介绍下从零搭建 Webpack 项目
        本文详细介绍了Webpack中Loader的概念及其重要性。Webpack仅支持处理JS和JSON文件,而Loader能够帮助处理其他类型的文件,如CSS、图片等,并将其转换为有效的模块。文章首先解释了Loader的基本原理,接着介绍了几种常见Loader的配置和使用方法
        23 1
        |
        3月前
        |
        前端开发 JavaScript API
        |
        3月前
        |
        架构师 开发工具 git
        项目去除git版本控制 去除版本控制
        文章提供了去除本地项目Git版本控制的步骤,包括删除`.git`文件夹和`.idea`目录下的`vcs.xml`文件。
        项目去除git版本控制 去除版本控制
        |
        3月前
        |
        jenkins 测试技术 开发工具
        协同开发的艺术:Git 在团队项目中的高效应用
        【8月更文第16天】在现代软件开发中,团队成员之间的高效协作是至关重要的。Git 作为一种分布式版本控制系统,为开发者提供了强大的工具来管理代码的变化和协作。本文将介绍如何利用 Git 来优化团队的工作流程,并提供实际操作的代码示例。
        111 1
        |
        3月前
        |
        网络安全 开发工具 数据安全/隐私保护
        Win10使用Git克隆项目出现fatal: Authentication failed for异常
        Windows 10系统中使用Git克隆项目时出现"fatal: Authentication failed for"异常的解决方法,主要是通过修改凭据管理器中的Git凭据密码来解决因密码过期导致的身份验证失败问题。
        69 0
        Win10使用Git克隆项目出现fatal: Authentication failed for异常
        |
        3月前
        |
        安全 开发工具 git
        coding上创建项目、创建代码仓库、将IDEA中的代码提交到coding上的代码仓库、Git的下载、IDEA上配置git
        这篇文章是关于如何在IDEA中配置Git、在Coding.net上创建项目和代码仓库,并将IDEA中的代码提交到远程代码仓库的详细教程,涵盖了Git安装、IDEA配置、项目创建、代码提交等步骤。
        coding上创建项目、创建代码仓库、将IDEA中的代码提交到coding上的代码仓库、Git的下载、IDEA上配置git
        |
        3月前
        |
        JavaScript 前端开发 API
        解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
        【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
        49 0